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

五章原型

1、[[ Prototype ]]

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

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

 var anotherObject = {

 a:2

 };

 // 创建一个关联到 anotherObject 的对象

 var myObject = Object.create( anotherObject );

 myObject.a; //

还有另外一种方法，就是使用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 );

巴特西

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

最新文章

热门文章