原型鏈

1. 函數(shù)聲明

   1. 字面量 var f1 = function(){};
   2. 關(guān)鍵詞 function f2 = function(){};
   3. 構(gòu)造函數(shù) var f3 = new Function();
      歸根結(jié)底都是通過(guò)new Function 的方式來(lái)創(chuàng)建的，js中一切皆對(duì)象，對(duì)象又分函數(shù)對(duì)象和普通對(duì)象，簡(jiǎn)單來(lái)說(shuō)通過(guò)new Function創(chuàng)建的就稱(chēng)之為函數(shù)對(duì)象，其他的都是普通對(duì)象

2. 原型對(duì)象

在js中每一個(gè)對(duì)象（普通對(duì)象、函數(shù)對(duì)象）都有一個(gè)__proto__ 屬性，函數(shù)對(duì)象都有一個(gè)prototype屬性，指向函數(shù)的原型對(duì)象

var obj = {};
var fn = function(){};
console.log(obj.__proto__); // {constructor: ?, __defineGetter__: ?, __defineSetter__: ?, hasOwnProperty: ?, …}
console.log(obj.prototype); // undefined 
console.log(fn.__proto__); // ? () { [native code] }
console.log(fn.prototype); // {constructor: ?}

其中 prototype 就是原型對(duì)象，當(dāng)然原型對(duì)象也是一個(gè)普通對(duì)象，它的作用主要是用來(lái)實(shí)現(xiàn)繼承的，舉個(gè)栗子：

var Animal = function(){
    this.name = 'Tom';
}

Animal.prototype.say = function(){
    console.log('I am ' + this.name)
}

var cat = new Animal();
var dog = new Animal();
cat.say();  // I am Tom
dog.say();  // I am Tom

這里原型繼承的問(wèn)題，暫且按下不表（皮這一下，很開(kāi)心~~）

3. 原型鏈

上文說(shuō)到，每一個(gè)對(duì)象都有一個(gè)__proto__ 屬性，那么這個(gè)屬性究竟有什么用呢？先來(lái)看幾個(gè)例子

var Animal = function(){
    this.name = 'Tom';
}

var cat = new Animal();

console.log(cat.__proto__ === Animal.prototype); // true
console.log(Animal.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true

從這個(gè)例子中可以看出 __proto__ 屬性指向構(gòu)造函數(shù)的原型對(duì)象prototype，而prototype也是一個(gè)普通對(duì)象，也有__proto__屬性，繼續(xù)指向其構(gòu)造函數(shù)，直到指向null，這樣就形成了一個(gè)原型指向的鏈條，專(zhuān)業(yè)術(shù)語(yǔ)稱(chēng)之為原型鏈。
至于為什么最終是null，如果非要解釋的話，引用道德經(jīng)中的一句話：有，是萬(wàn)物之所始；無(wú)，是萬(wàn)物之所母。
此外，F(xiàn)unction、Object作為js的內(nèi)置函數(shù)對(duì)象，需要清楚一點(diǎn)，他們都是 new Function創(chuàng)建的

console.log(Function.constructor === Object.constructor); // true

4. new 的實(shí)現(xiàn)過(guò)程

通過(guò)new 一個(gè)構(gòu)造函數(shù)得到一個(gè)對(duì)象，看一下內(nèi)部實(shí)現(xiàn)過(guò)程，有助于幫助理解原型鏈指向

1. 聲明一個(gè)對(duì)象 var obj = {};

2. obj.__proto__ = 構(gòu)造函數(shù).prototype;

3. 改變this指針，通過(guò)call、apply讓this指向第一步創(chuàng)建的obj；

4. 返回對(duì)象obj;

   function Animal(name){
      this.name = name;
   }
   
   Animal.prototype.say = function(){
       console.log('I am ' + this.name)
   }
   
   function myNew() {
       var obj = {}; // 是指還是new，不要糾結(jié)，只是模擬new的過(guò)程
       var Constructor = [].shift.call(arguments); // 構(gòu)造函數(shù) Animal
       //constructor屬性是在Animal.prototype對(duì)象中用來(lái)記錄它指向的 構(gòu)造函數(shù) 的屬性
       console.log(Constructor.prototype); // {say: ?, constructor: ?} say:?() constructor:? Animal(name) 
       obj.__proto__ = Constructor.prototype; // 讓obj.__proto__ 指向 Animal.prototype
       Constructor.apply(obj,arguments); // 讓this指向obj
       return obj;
   }
   
   var cat= myNew(Animal,'Tom');
   console.log(cat.name); // Tom
   cat.say(); // I am Tom
   console.log(cat.constructor); // ? Animal(name){ this.name = name; }
   

5. 大招

如果以上內(nèi)容還是不太明白，我自己做了張注解圖（線條有點(diǎn)多而雜，見(jiàn)諒~~），以及代碼案例幫助理解

圖1.jpg

// 幾個(gè)概念： 
// 普通對(duì)象是new Object而來(lái)的，所以 它的構(gòu)造函數(shù)就是Object
// 函數(shù)對(duì)象是new Function而來(lái)的，所以 它的構(gòu)造函數(shù)就是Function，F(xiàn)unction、Object是new Function而來(lái)的
// 對(duì)象的__proto__ 指向構(gòu)造函數(shù)的prototype
function Animal(){}
var cat = new Animal();

cat.constructor == Animal; // true
cat.__proto__ === Animal.prototype; // true

Animal.constructor === Function; // true
Animal.prototype.__proto__ === Object.prototype; // true 注：prototype是對(duì)象
Animal.__proto__ === Function.prototype; // true

Object.constructor  === Function; // true
Object.__proto__ === Function.prototype; // true
Object.prototype.__proto__ === null; // true

Function.constructor === Function; // true
Function.__proto__ === Function.prototype; // true
Function.prototype.__proto__ === Object.prototype; // true