在面向对象设计中，最多被使用的就是类了。但是js中没有类的概念，也就没有继承等一系列相应的操作。然后会有一种仿类的方式，实现继承方式，其中就使用到了一种重要的概念：[[Prototype]]，但是要如何理解[[Prototype]]，什么才是[[Prototype]]，该如何使用呢？
-
[[Prototype]]是什么？
先看一段代码：
// case1 function Fun(name){ this.name = name } var obj = new Fun('obj') console.log(Object.getPrototypeOf(obj) === Fun.prototype) console.log(obj.__proto__ === Fun.prototype) 输出： true true // case2 var a={ name: 'a' } var b = Object.create(a) console.log(b.name) console.log(Object.getPrototypeOf(b) == a) 输出： a true如case1中通过构造函数方式调用方法Fun新生成对象,通过
Object.getPrototypeof方法获取到对象的[[Prototype]]链指向了Fun.prototype属性值。（其实有些浏览器中支持__proto__获取对象的[[Prototype]]链）case2中通过
Object.create方式创建一个新对象b关联到对象a，b的prototype指向了a，此时虽然b对象没有属性name，但是console.log(b.name)输出了a。此处prototype就起到了重要的作用。js中获取一个对象的属性值涉及到对象的[[Get]]操作：先从对象的直接属性里面找寻，如果未找到，此时会沿着对象的[[Prototype]]链上找寻，直至最顶层的[[Prototype]](一般Object.prototype为最顶层),如果还未找到，就会返回undefined,这也很好的解释了b.name。prototype只是对象中的一个属性，它让对象可以关联到另外一个对象。
prototype会影响到js中的[[Get]]操作和[[Put]]操作，至于如何影响[[Get]]操作上述已描述过，下面描述下[[Put]]操作
再看段代码：
var a={ name: 'a', set id(val){ this._id_=val }, get id(){ return this._id_ } } Object.defineProperty(a,'desc',{ writable:false, value: 'desc of a' }) var b = Object.create(a) // case1：writable=true属性 b.name = 'b' console.log('a.name:' + a.name) // a.name:a console.log('b.name:' + b.name) // b.name:b // case2：writable=false 属性 b.desc='desc of b' // 默认无效，在strict模式下会报错！！ console.log('a.desc:' + a.desc) // a.desc:desc of a console.log('b.desc:' + b.desc) // b.desc:desc of a // case3：setter属性 b.id = 'b_id' console.log('a.id:' + a.id) // a.id:undefined console.log('b.id:' + b.id) // b.id:b_id当给对象属性赋值时会执行[[Put]]操作，如果属性直属于该对象，则直接更改属性值。如果属性不直属于该对象同时也不存在对象的[[Prototype]]链上时，直接给该对象创建该属性并赋值。如存在于[[Prototype]]链上时，就像上面的代码示例中表现的那样：
- 如果该属性可写，此时则在对象上创建同样的属性并赋值，此时屏蔽了[[Prototype]]链上的属性值。
- 如果该属性不可写，若运行在非严格模式下，代码默认无效，若在严格模式下，会抛错。
- 如果属性是一个setter，此时执行该setter，然后也会在对象上创建同样的属性并赋值，屏蔽[[Prototype]]链上的属性值。
由此可以得出结论：对象中的[[Prototype]]其实是其中的一个属性，用来关联到另外一个对象。它起到了一个委托关联的作用，可以访问到被关联对象中的属性、方法。类似于其余面向对象语言中的类继承概念，只是类似，其中并唔发生类继承中的拷贝操作。
-
prototype使用场景？
基本上了解到了[[Prototype]]链，那么会在那些场景中使用呢？
主要应用于“类”继承中。
js中很多场景会被设计成：将众多操作对象抽象成一个抽象的"类"，然后定义n多“子类”，通过重写继承过来的方法实现“伪多态”的现象。
代码示例：function View(name){ this.name = name } View.prototype.print= function(){ console.log(this.name) } function IView(name, id){ View.call(this,name) this.id = id } // ES5 IView.prototype=Object.create(View.prototype) // Object.setPrototypeOf(IView.prototype, View.prototype) ES6 IView.prototype.print=function(){ View.prototype.print.call(this) console.log('name:%s,id:%s',this.name,this.id) } var v = new IView('iview', 1) v.print() // 输出： iview name:iview,id:1上述代码中定义了两个“类”：View和IView，然后通过IView.prototype=Object.create(View.prototype)，看上去让IView继承View，再重写View原型链中的方法print。
当然要实现上述功能，并非要通过创造伪类（构造函数方式调用/new 函数调用）的方式。因为上面代码中虽然IView看上去继承View，但是实质上并没有像继承一样拷贝一份View中的内容到IView中，只是通过[[Prototype]]方式让IView关联到View上。这样就不是真正意义上类继承的操作方式了。下面介绍种通过关联的方式（符合js特征）
var View={ init(name){ this.name = name }, print(){ console.log(this.name) } } var IView = Object.create(View) IView.set=function(name,id){ this.init(name) this.id=id } // **注意此处不可再定义IView.init方法，否则会出现循环调用(报错：RangeError: Maximum call stack size exceeded)** IView.show=function(){ this.print() console.log('name:%s,id:%s',this.name,this.id) } var v = Object.create(IView) v.set('iview',2) v.show() // 输出： iview name:iview,id:2上述通过Object.create方式将IView的[[Prototype]]指向了View，然后再创建对象关联到IView对象上。同样实现了上述代码片断1中的效果。
-
ES6中的语法糖class
ES6中引入了class关键字语法糖，从此不需要通过改写Prototype，像上述第一段代码中的方式实现"类"继承了。
将上述代码用class改写：class View { construtor(name){ this.name = name } print(){ console.log(this.name) } } class IView extends View { construtor(name,id){ super(name) this.id=id } print(){ super.print() console.log('name:%s,id:%s',this.name,this.id) } } var v = new IView('iview',3) v.print()
最后(Last but not least)
[[Prototype]]原型链提供了一个对象关联到另一个对象的方式。js中被没有类的概念，实现类似的类继承的方式，可以通过委托关联的形式实现我们想要的需求，这样更有利于加深我们对js中[[Prototype]]的理解。
参考资料：[美]KYLE SIMPSON著 赵望野 梁杰 译 《你不知道的javascript》上卷
