《你不知道的JavaScript》整理(四)——原型

一、[[Prototype]]

JavaScript中的对象有一个特殊的[[Prototype]]内置属性,其实就是对于其他对象的引用。

var myObject = {
a: 2
};
myObject.a; //

当你试图引用对象的属性时会触发原型[[Get]]操作,比如myObject.a。

1. 第一步是检查对象本身是否有这个属性,如果有的话就使用它。

2. 如果a不在myObject中,就需要使用对象的[[Prototype]]链了。

1)Object.prototype

普通的[[Prototype]]链最终都会指向内置的Object.prototype。

《你不知道的JavaScript》整理(四)——原型

2)属性设置和屏蔽

myObject.foo = "bar";

如 果 属 性 名foo既 出 现 在myObject中 也 出 现 在myObject的[[Prototype]]链 上 层, 那么就会发生屏蔽

myObject中包含的foo属性会屏蔽原型链上层的所有foo属性,因为myObject.foo总是会选择原型链中最底层的foo属性。

有些情况下会隐式产生屏蔽:

var anotherObject = {
a: 2
}; var myObject = Object.create(anotherObject); anotherObject.a; //
myObject.a; // 2
anotherObject.hasOwnProperty("a"); // true
myObject.hasOwnProperty("a"); // false myObject.a++; // 隐式屏蔽! anotherObject.a; // 2
myObject.a; // myObject.hasOwnProperty("a"); // true

++操作相当于myObject.a = myObject.a + 1。

因此++操作首先会通过[[Prototype]]查找属性a并从anotherObject.a获取当前属性值2,然后给这个值加1,接着用[[Put]]将值3赋给myObject中新建的屏蔽属性a。

二、“类”

JavaScript中只有对象

在JavaScript中,类无法描述对象的行,(因为根本就不存在类!)对象直接定义自己的行为。

1)“类”函数

function Foo() {
// ...
}
var a = new Foo();
console.log(Object.getPrototypeOf(a) === Foo.prototype); // true

a这个对象是在调用new Foo()时创建的,最后会被关联到这个“Foo.prototype”对象上。

在JavaScript中不能创建一个类的多个实例,只能创建多个对象,它们[[Prototype]]关联的是同一个对象。

从视觉角度来说,[[Prototype]]机制如下图所示,箭头从右到左,从下到上:

《你不知道的JavaScript》整理(四)——原型

这个机制通常被称为原型继承,它常常被视为动态语言版本的类继承。

2)“构造函数

function Foo() {
// ...
}
var a = new Foo();

之所以认为Foo是一个“类”:

1. 其中一个原因是我们看到了关键字new,在面向类的语言中构造类实例时也会用到它。

2. 另一个原因是,看起来我们执行了类的构造函数方法,Foo()的调用方式很像初始化类时类构造函数的调用方式

在JavaScript中对于“构造函数”最准确的解释是,所有带new的函数调用

函数不是构造函数,但是当且仅当使用new时,函数调用会变成“构造函数调用”。

三、(原型)继承

function Foo(name) {
this.name = name;
}
Foo.prototype.myName = function() {
return this.name;
}; function Bar(name, label) {
Foo.call(this, name);
this.label = label;
}
// 我们创建了一个新的 Bar.prototype 对象并关联到 Foo.prototype
Bar.prototype = Object.create(Foo.prototype);
// 注意!现在没有 Bar.prototype.constructor 了
// 如果你需要这个属性的话可能需要手动修复一下它
Bar.prototype.myLabel = function() {
return this.label;
}; var a = new Bar("a", "obj a");
a.myName(); // "a"
a.myLabel(); // "obj a"

原型继承的机制,是指a可以“继承”Foo.prototype并访问Foo.prototype的myName()函数。

面这两种方式是常见的错误做法

// 和你想要的机制不一样!
Bar.prototype = Foo.prototype; // 基本上满足你的需求,但是可能会产生一些副作用 :(
Bar.prototype = new Foo();

1. 第一种只是让Bar.prototype直接引用Foo.prototype对象。因此当你执行类似Bar.prototype.myLabel = ...的赋值语句时会直接修改Foo.prototype对象本身

2. 第二种的确会创建一个关联到Bar.prototype的新对象。但是它使用了Foo(..)的“构造函数调用”,如果函数Foo有一些副作用(比如写日志、修改状态、注册到其他对象、给this添加数据属性,等等)的话,就会影响到Bar()的“后代”

两种正确的把Bar.prototype关联到Foo.prototype的方法:

// ES6 之前需要抛弃默认的 Bar.prototype
Bar.ptototype = Object.create( Foo.prototype ); // ES6 开始可以直接修改现有的 Bar.prototype
Object.setPrototypeOf( Bar.prototype, Foo.prototype );

1)检查“类”关系

在传统的面向类环境中,检查一个实例(JavaScript中的对象)的继承祖先(JavaScript中的委托关联)通常被称为内省(或者反射)。

function Foo() {
// ...
}
Foo.prototype.blah = ...;
var a = new Foo();

如何通过内省找出a的“祖先”(委托关联)呢?

1. 第一种站在“类”的角度来判断:

a instanceof Foo; // true

instanceof回答的问题是:在a的整条[[Prototype]]链中是否有指向Foo.prototype的对象?

这个方法只能处理对象(a)和函数(带.prototype引用的Foo)之间的关系。

2. 第二种判断[[Prototype]]反射的方法,它更加简洁:

Foo.prototype.isPrototypeOf( a ); // true

isPrototypeOf回答的问题是:在a的整条[[Prototype]]链中是否出现过Foo.prototype?

同样的问题,同样的答案,但是在第二种方法中并不需要间接引用函数(Foo),它的.prototype属性会被自动访问。

我们只需要两个对象就可以判断它们之间的关系。举例来说:

// 非常简单:b 是否出现在 c 的 [[Prototype]] 链中?
b.isPrototypeOf( c );

2)获取一个对象的[[Prototype]]链

1. 在ES5中,标准的方法是:

Object.getPrototypeOf( a );

console.log(Object.getPrototypeOf( a ) === Foo.prototype); // true

2. 浏览器也支持一种非标准的方法来访问内部[[Prototype]]属性:

a.__proto__ === Foo.prototype; // true

.__proto__的实现大致上是这样的:

Object.defineProperty(Object.prototype, "__proto__", {
get: function() {
return Object.getPrototypeOf(this);
},
set: function(o) {
// ES6 中的 setPrototypeOf(..)
Object.setPrototypeOf(this, o);
return o;
}
});

访问(获取值)a.__proto__时,实际上是调用了a.__proto__()(调用getter函数)。

虽然getter函数存在于Object.prototype对象中,但是它的this指向对象a,所以和Object.getPrototypeOf( a )结果相同

四、对象关联

[[Prototype]]机制就是存在于对象中的一个内部链接,它会引用其他对象

这个链接的作用是:如果在对象上没有找到需要的属性或者方法引用,引擎就会继续在[[Prototype]]关联的对象上进行查找。

这一系列对象的链接被称为“原型链”。

var foo = {
something: function() {
console.log("Tell me something good...");
}
};
var bar = Object.create(foo);
bar.something(); // Tell me something good...

我们并不需要类来创建两个对象之间的关系,只需要通过委托来关联对象就足够了。

Object.create()的polyfill代码:

Object.create = function(o) {
function F() {}
F.prototype = o;
return new F();
};

使用了一个一次性函数F,我们通过改写它的.prototype属性使其指向想要关联的对象,然后再使用new F()来构造一个新对象进行关联。

上一篇:HoloLens开发手记 - Unity之语音输入


下一篇:test md