《你不知道的JavaScript》整理（四）——原型

一、[[Prototype]]

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

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

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

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

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

1）Object.prototype

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

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]]机制如下图所示，箭头从右到左，从下到上：

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

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()来构造一个新对象进行关联。