你不知道的JavaScript（上）this和对象原型（四）原型

 

五章 原型

1、[[ Prototype ]]

JavaScript 中的对象有一个特殊的 [[Prototype]] 内置属性，其实就是对于其他对象的引用。几乎所有的对象在创建时 [[Prototype]] 属性都会被赋予一个非空的值。

对于默认的 [[Get]] 操作来说，如果无法在对象本身找到需要的属性，就会继续访问对象
的 [[Prototype]] 链：

var anotherObject = {
a:2
};
// 创建一个关联到 anotherObject 的对象
var myObject = Object.create( anotherObject );
myObject.a; // 2

还有另外一种方法，就是使用for..in遍历对象时原理，和查找[[ Prototype ]]链想死，任何可以通过原型链访问到的属性都会被枚举。使用in操作符来检查属性在对象中是否存在也会查找对象的整条原型链（无论属性是否可枚举）

var anotherObject = {
a:2
};
// 创建一个关联到 anotherObject 的对象
var myObject = Object.create( anotherObject );
for (var k in myObject) {
console.log("found: " + k);
}
// found: a
("a" in myObject); // true

2、“构造函数“

在 JavaScript 中对于“构造函数”最准确的解释是，所有带 new 的函数调用。函数不是构造函数，但是当且仅当使用 new 时，函数调用会变成“构造函数调用”。

function NothingSpecial() {
console.log( "Don't mind me!" );
}
var a = new NothingSpecial();
// "Don't mind me!"
a; // {}

3、原型继承【重点】

图中由下到上的箭头表明这是委托关联，不是复制操作。

典型的“原型风格”，例子如下：

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"

核心部分就是语句 Bar.prototype = Object.create( Foo.prototype ) 。调用Object.create(..) 会凭空创建一个“新”对象并把新对象内部的 [[Prototype]] 关联到你指定的对象（本例中是 Foo.prototype ）。但是 Object.create(..)唯一的缺点就是需要创建一个新对象然后把旧对象抛弃掉，不能直接修改已有的默认对象。

ES6添加了一个辅助函数Object.setPrototypeOf(..) ，可以用标准并且可靠的方法来修改关联。

对比一下两种关联的方法

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

4、检查“类”的关系

寻找对象a委托的对象，也就是检查一个实例（js中的对象）的继承祖先（js中的委托关联）被称为内省（或者反射）

例子

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

方法一  （instanceof）

instanceof 操作符的左操作数是一个普通的对象，右操作数是一个函数。 instanceof 回答的问题是：在 a 的整条 [[Prototype]] 链中是否有指向 Foo.prototype 的对象？可是，这个方法只能处理对象（ a ）和函数（带 .prototype 引用的 Foo ）之间的关系。如果你想判断两个对象（比如 a 和 b ）之间是否通过 [[Prototype]] 链关联，只用 instanceof无法实现

a instanceof Foo; // true

方法二  

在本例中，我们实际上并不关心（甚至不需要） Foo ，我们只需要一个可以用来判断的对象（本例中是 Foo.prototype ）就行。 isPrototypeOf(..) 回答的问题是：在 a 的整条 [[Prototype]] 链中是否出现过 Foo.prototype ？

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

 5、创建关联

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

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

 第六章 行为委托

 重点：对象关联

Foo = {
              init:function(who){
                  this.me=who;
              },
              identify:function(){
                  return "i am "+this.me;
              }
          };
          Bar = Object.create(Foo);
          Bar.speak = function(){
              console.log("hello"+this.identify()+".");
          }
          var b1 = Object.create(Bar);
          b1.init("b1");
          var b2 = Object.create(Bar);
          b2.init("b2");
          b1.speak();
          b2.speak();

ES6 使用更好的对象字面形式的语法和简洁方法

var AuthController = {
errors: [],
checkAuth() {
// ...
},
server(url,data) {
// ...
}
// ...
};
// 现在把 AuthController 关联到 LoginController
Object.setPrototypeOf( AuthController, LoginController );