走心大白话JavaScript教程（三）不得不说的原型与原型链

JS大法好，JS在手，天下我有，信JS，得永生。

这个系列的教程我一开始是写在github上的，
可是以为放到掘金来可让更多须要的人看到，
就搬到掘金专栏上啦，
若是以为本教程对你有帮助，请点这里去github上给我一颗Star~
教程目录也在github上哈~

本着对技术负责的态度，任何纠正/疑问，尽管提出，我会及时修正/回答。

必定要把每一个例子代码都拷贝到你的运行环境中边看结果边理解，否则学习效果减半，或者没效果。

下面开始第三篇：

不得不说的原型与原型链：prototype与__proto__

一、纸面意思

啥是原型，啥是原型链？

原型：一个属性，属性名叫prototype，只有构造函数有，好比Foo.prototype;

原型链：一个属性，属性名叫__proto__，万物皆有，链状相连，最后归宗到Object.prototype上，Object.prototype__proto__值为null；

二、尝试理解一下这两个点，记住必定配合控制台去打印。

• 访问一个实例的属性，JS会先在实例内部寻找，找不到的话，沿着原型链继续找下去。

  function Foo(){this.name='我是构造函数Foo'} //一个构造函数Foo
  
    var foo = new Foo(); //经过new Foo()，获得实例化的foo
  
    console.log(foo.bar); //访问foo的bar属性，控制台打印一下，获得undefined
  
    Foo.prototype.bar = '我是bar属性，在Foo.prototype(Foo的原型)里';  //给Foo.prototype添加bar属性
  
    console.log(foo.bar); //再次访问foo的bar属性，控制台打印一下看看。结果验证了"沿着原型链找下去"这句话。
  
    Object.prototype.examAttr = '我是examAttr属性，在Object.prototype(Object的原型)里'; //给Object.prototype添加examAttr属性
  
    console.log(foo.examAttr); //访问foo的examAttr属性，控制台打印一下看看。结果验证了"一直找到Object.prototype"这句话。复制代码

  配合以前写的纸面意思，回味一下上面的代码。

• 每一个构造函数都有一个原型，这个原型的constructor属性就是这个构造函数。

  function Foo(){this.name='我是构造函数Foo'} //一个构造函数Foo
  
    console.log(Foo.prototype); //打印结果能够看到一个Object对象，即Foo的原型，里面有一个constructor属性，属性值即为Foo函数。
  
    var foo = new Foo(); //实例化
  
    console.log(foo.constructor); //foo中没有constructor属性，沿着原型链找到Foo的原型(即上面打印的结果)，获得Foo原型的constructor属性值，即Foo函数。复制代码

  以上代码解释了为何经过查看实例的constructor属性能够获得实例的构造函数。重点在于“沿着原型链找”。
  
  

  三、从老生常谈的JS实现new运算符过程来剖析

  //写一个构造函数，定义其prototype
  function Foo(name) {
    this.name = name;
  }
  Foo.prototype = {
    constructor:Foo, //因为从新定义了prototype，我们把constructor属性补上。
    say: function () {
        console.log('My name is ' + this.name);
    }
  };
  //JS实现new的方法generate
  function generate(Fun,arguments) {
    var foo = {}; //新建一个空对象
    Fun.apply(foo, arguments); //利用apply改变this指向，如今运行Fun时，内部this指向foo空对象，那么给this.name赋值就变成了给foo.name赋值。
    foo.__proto__ = Fun.prototype; //把foo的__proto__属性指向Fun.prototype。
    return foo;
  }
  //执行generate，模拟new
  var foo = generate(Foo,["Terry"]); //至关于 var foo = new Foo("Terry")
  //验证明例方法
  foo.say();
  //查看foo的构造函数
  console.log(foo.constructor);复制代码

  上面的代码彻底实现了new运算符的逻辑，因此说，new运算符就是上面这段代码的语法糖而已。

  下面这张图想必不少人都很熟悉，我截取了小上半部分，
  不要考虑看不见的导线，只关心f一、Foo、Foo.prototype三者的关系就够了。
  配合下面这张图，再回头看一下JS实现new的过程：

理不清不要紧，咱们来解析一下：

图中表示，f1由new Foo而来，而f1的__proto__链接着Foo.prototype，
这说明Foo的实例f1的__proto__(原型链)是指向Foo.prototype(原型)的，
你再回头去看咱们用JS实现new所封装的方法generate，有这么一句：
foo.__proto__ = Fun.prototype;
那不就是手动把foo(图中的f1)的原型链指向Fun(图中的Foo)的原型吗！复制代码

四、ES5面向对象中经常使用的混合模式

在封装代码/插件的时候，使用面向对象的混合模式来写，代码结构是这样的：复制代码

function MyPlugin(name){
    this.name = name; //每一个实例都不同的属性，写在构造函数里。
}
MyPlugin.prototype = {
    publicFun:function(){
        console.log('我是公共方法，全部实例共用'); //每一个实例都调用同样逻辑的代码，封装成方法写进构造函数的原型里
        console.log(this.name+'使用了插件'); 
    }
}
//使用插件
var myPlugin = new MyPlugin('小明');
myPlugin.publicFun(); //实例并无publicFun方法，可是JS从myPlugun.__proto__中找到了public。复制代码

经过找“点”大法(前面教程有说过)，能够发现publicFun内部的this指向myPlugin，
也就验证了为何一、理解this指向的小技巧中小结里的第三点：
“明确区分函数是[构造函数]仍是[普通函数]，[构造函数]内的this指向实例化后的对象；”

这回知道为何插件能够这么写，而且实例化后的插件能够直接调用写在prototype里的方法了吧？

小结

• 关于原型与原型链，没有什么“一句话来讲”，仔细通读这篇教程吧，尤为是那张图。
  
  

PS:
欢迎转载，须要注明原址。
教程之间紧密联系，不懂的地方，请好好看下全系列教程目录，
有没有你不懂的那个关键字在里面。
若是帮到你，别忘了给我一颗Star~