如何理解JavaScript中的原型和原型鏈

首先是一張關係圖,避免抽象化理解時產生的困難

Function對象

函數對象是JavaScript學習中不可避免的一部分,並且這一部分相對重要且抽象 函數的建立方式有2種:

• 字面量建立

var foo = function(){
    console.log("test");
}

• new 關鍵字建立實例對象

//let 函數名 = new Function(「參數列表」,」函數體」);
let sum = new Function("num1,num2","return num1+num2");

咱們多數在使用new關鍵字的時候,是用於建立實例對象

那麼咱們首先來看一下,在使用new關鍵字建立實例對象的時候,都經歷了什麼:

• 建立一個新對象
• 連接到原型對象,繼承屬性和方法
• 將構造函數的做用域賦給新對象(this指向改變到實例對象中)
• 返回新對象

這個時候咱們的關注點 原型對象 就出現了:

原型對象prototype

• prototype是一個顯式原型屬性(也能夠叫它原型對象),只有函數纔有該屬性,一般咱們叫這個時候的函數爲"構造函數"
• prototype的伴隨構造函數的聲明就會被自動建立
• 原型對象prototype只有一個屬性:constructor

代碼舉例:

function Student(name,age){
    this.name = name;
    this.age = age;
}
let s1 = new Student("Tom",17);

首先咱們建立了一個構造函數Student,此時Student的結構中會出現一個prototype屬性,即原型對象,這是引擎自動給它的,咱們能夠直接進行使用

• 實例對象prototype中的constructor屬性:

此時能夠看出constructor對應的是構造函數,也就是Student

而且這是一個公有不可枚舉屬性,一旦改變了prototype,這個屬性就會不見,固然能夠再手動添加回去

而當咱們再使用new關鍵字建立實例對象s1以後,咱們來看一下s1的結構:

實例對象s1中除了在Student得到的age,name屬性以外,還有一個__proto__屬性,因此它又是什麼東西呢?

__proto__是什麼

__proto__是每一個對象都有的隱式原型屬性，指向了建立該對象的構造函數的原型對象prototype,可是 prototype是內部私有屬性,咱們並不能訪問到,因此使用__proto__進行訪問

至於__proto__是如何產生的,上面的new關鍵字建立函數的時候的第三部"連接到原型,繼承屬性和方法"的時候就讓實例對象,例如s1擁有了__proto__屬性

從實例對象s1的__proto__指向構造函數Student的prototype,構成了原型鏈

經過原型鏈的概念,咱們就不難理解實例對象是如何繼承構造函數中原型對象的屬性和方法了

function Student(name,age){
    this.name = name;
    this.age = age;
}
Student.prototype.method = function(){
    console.log("個人名字是"+this.name+",個人年齡是"+this.age);
}
let s1 = new Student("Tom",17);
s1.method();    //個人名字是Tom,個人年齡是17

函數的原型鏈結構

任意的一個函數, 都是至關於 Function 的實例. 相似於 {} 與 new Object() 的關係

    function foo () {};
    // 告訴解釋器, 有一個對象叫 foo, 它是一個函數
    // 至關於 new Function() 獲得一個 函數對象

1. 函數有 __proto__ 屬性
2. 函數的構造函數是 Function
3. 函數應該繼承自 Function.prototype
4. Fucntion.prototype 繼承自 Object.protoype
5. 構造函數有prototype, 實例對象纔有__proto__指向原型, 構造函數的原型纔有 constructor 指向構造函數

intanceof

array instanceof Array判斷 構造函數 Array 的原型 是否在 實例對象 array 的原型鏈存在