原型鏈及原型鏈的作用

• 要用原型，先要有構造函數
• 構造函數一創建，系統就自動分配一個原型對象: Person.prototype
• new一下，即創建一個構造函數的實例對象，每個實例對象被創建的時候，都帶有一個隱式的__ proto__ 指向原型對象

原型鏈

概念：

當實例對象，在自身找不到方法時，會向上一級原型(Person.prototype)對象上查找，如果找不到，又會到原型對象上-級的原型對象(Object.prototype) 上查找，這種鏈試查找機制，就叫原型鏈。

簡單理解

• 每一個對象都有原型，原型也是對象，也有自己的原型，以此類推形成鏈式結構，叫原型鏈

• 當調用實例的某個屬性或方法時，內部會在實例對象p的原型的原型的原型身上一層層查找，找到為止，直到原型鏈終點null

擴展

原型鏈是一條引用的鏈，實例的隱式原型__ proto__指向構造函數的顯式原型(prototype)

• 可以使用A instanceof B來判斷B是否在A的原型鏈上

原型鏈訪問規則

• 就近原則:對象優先訪問自己的成員，自身沒有，才去原型找，原型也沒有,就往上一級原型找

原型鏈作用

• 實現繼承
• 幾乎所有的框架底層都是用原型鏈實現的繼承

構造函數，原型對象，實例對象的三角關系

1.構造函數

• 創建構造函數Person,它有一個porotype屬性，指向原型對象Person.prototype (由系統自動創建分配)

2.原型對象

• 原型對象Person.prototype, 有一個constructor屬性，指回構造函數Person ( 構造函數和原型對象互指)
• 同時原型對象也是對象，也有一個隱式的__ proto__ 屬性， 指向它自己的原型對象
  Object.prototype
• Object.prototype也是對象， 也有自己的原型對象，自身同時也有constructor屬性,指回它的構造函數Object

3.實例對象

• new一下，調用Person構造函數，創建一 個新的實例對象p (p對象包含構造函數Person的所有屬性和方法)
• 每個實例對象創建的時候，都帶有一個隱式的__ proto__, 指向它的原型對象
• 原型對象身上又有一個__ proto__,又指向上一級原型對象，一級一往上指,形成鏈式查找(原型鏈)

    <script>
        // 創建一個構造函數Person,Person本身具有原型對象
        function Person(name, age) {
            this.name = name;
            this.age = age;
        }

        // 給Person的原型對象添加屬性和方法
        Person.prototype.sex = 'girl';
        Person.prototype.sing = function() {
            // Person.prototype.constrctor指向Person構造函數
            console.log('唱歌');
        }

        // 生成一個實例對象xh
        // 實例對象的__proto__指向Person.prototype
        var xh = new Person('xiaohong', 12, );
        // xh本身帶有age屬性，可以直接訪問
        console.log(xh.age); //12  

        // xh本身沒有沒有sing方法，在自身找不到，就去原型Person.prototype身上找
        console.log(xh.sing()); //undefined
        console.log(xh.hobby); //undefined
        console.log(Person.prototype);

        // 關系驗證
        console.log(xh.__proto__.__proto__ === Object.prototype) //true
        console.log(xh.__proto__.__proto__.constructor) //Object

        // 原型對象身上的constructor指向的就是Person構造函數
        console.log(Person.prototype.constructor === Person) //true 
        // 原型鏈重點null
        console.log(xh.__proto__.__proto__.__proto__) //null
    </script>

具體關系如下圖所示：