理解js中的[[Prototype]]

在面向对象设计中，最多被使用的就是类了。但是js中没有类的概念，也就没有继承等一系列相应的操作。然后会有一种仿类的方式，实现继承方式，其中就使用到了一种重要的概念：[[Prototype]]，但是要如何理解[[Prototype]]，什么才是[[Prototype]]，该如何使用呢？

1. [[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]]链上时，就像上面的代码示例中表现的那样：

   1. 如果该属性可写，此时则在对象上创建同样的属性并赋值，此时屏蔽了[[Prototype]]链上的属性值。
   2. 如果该属性不可写，若运行在非严格模式下，代码默认无效，若在严格模式下，会抛错。
   3. 如果属性是一个setter，此时执行该setter，然后也会在对象上创建同样的属性并赋值，屏蔽[[Prototype]]链上的属性值。

   由此可以得出结论：对象中的[[Prototype]]其实是其中的一个属性，用来关联到另外一个对象。它起到了一个委托关联的作用，可以访问到被关联对象中的属性、方法。类似于其余面向对象语言中的类继承概念，只是类似，其中并唔发生类继承中的拷贝操作。

2. 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中的效果。

3. 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》上卷