初始原型鏈（一）

前端面試經常會問關於原型鏈的知識，今天我總結了一下關於原型鏈的內容，希望對廣大小白一點點參考~

什麼是原型？

在 js 中，對象都有 __proto__ 屬性， 就是指這個對象的原型，如果構造函數 A 實例化一個對象 B，那麼 A.prototype 就是 B 的原型。也就是：

  function A(){}
  
  var B = new A();

  B.__proto__ == A.prototype

什麼是原型鏈？

介紹完原型，那麼就必須說原型鏈了。

剛纔提到，每個對象都有 __proto__屬性，指向其構造函數的 prototype， 而 prototype 的值也是一個對象啊，所以就形成一條鏈，稱為原型鏈。

舉個例子：

cat 的原型鏈

我們創建一個叫做 Animal 的類， 並實例化一個對象 cat，我們來一點一點探索 cat 所處的原型鏈。

function Animal( name){
    this.name = name;
}

var cat = new Animal("cat");

cat 由 Animal 實例化而來，那麼就之前的說法，cat 的 __proto__ 指向 Animal 的 prototype:

的確如此！

接下來考慮到 Animal 的 prototype 也是一個對象，也有原型 ，那麼 Animal.prototype 的 __proto__  有指向什麼呢？

我們分析到 Animal 的 prototype 是一個對象， 那麼應該由 Object 構造，這麼說，Animal.prototype.__proto__  應該指向 Object.prototype 。

Object.prototype 也是一個對象啊，那麼它的原型又是什麼？ 

原型鏈的定義中提到，原型鏈的終點指向 null 。所以， Object.prototype.__proto__ 應該指向  null。

小結

實例化 cat  有以下關係：

1. cat 由 Animal 構造，所以有：cat.__proto__ == Animal.prototype；

2. Animal.prototype是一個對象，由 Object 構造，所以有：Animal.prototype.__proto__  == Object.prototype；

3. 原型鏈的終點指向 null，所以有：Object.prototype.__proto__ == null；

也就是：

cat.__proto__.__proto__.__proto__ == null；

圖示：

 這就是 cat 的原型鏈了，我們知道了什麼是原型鏈，那麼原型鏈有什麼用？

原型鏈的作用

 當我們用一個構造函數實例化很多不同的對象，而又希望給這些對象綁定相同的方法，就可以綁定到它們的構造函數上去。

舉個例子：

我們想讓所有的字元串都擁有一個去掉空格的方法，調用這個方法，就能去掉字元串中的所有空格。我們只需要給 String.prototype 綁定一個方法：

String.prototype.trim = function(){
        return this.replace(/\s+/g,"");
    };


    var str = "This is a good day!";
    console.log(str.trim());

//列印出 Thisisagoodday！

原型鏈的屬性查找規則

 當從對象搜尋一個屬性或者方法的時候，會遵循以下規則：

1. 先從本身擁有的屬性或方法查找，如果對象本身有，那就直接用自己的屬性或者方法；

function Animal( name){
        this.name = name;
        this.say = function (){
            console.log("hello cat!");
        }
    }

    var cat = new Animal("cat");
    cat.say = function (){
        console.log("cat hello!");
    }
    cat.say();　　　　　　　　　　　　　　　　//列印出 cat hello!
　　

2. 當本身找不到這個屬性或者方法的時候，就會沿著原型鏈找，使用原型鏈上的方法或者屬性；

 function Animal( name){
        this.name = name;
        this.say = function (){
            console.log("hello cat!");
        }
    }

    var cat = new Animal("cat");
    cat.say();          //列印出  hello cat!

3. 原型鏈也找不到，那麼找不到的屬性返回 undefined，找不到的方法會報錯，提示不是一個 function。

console.log(cat.sayHello());   　　　　// 報錯：Uncaught TypeError: cat.sayHello is not a function
console.log(cat.age);　　　　　　　　　　//undefined

特殊的：

沒有原型屬性的對象

通過 Object.create(null)生成沒有原型的對象。

後記

這是我對原型鏈知識的一點理解和看法，如有錯誤的理解或表述，歡迎大家指出，接下來我會著重探究幾個特殊的對象（Object、Function等）的原型。請大家多多支持！

 如需轉載，請指明出處，素質轉載，謝謝。