Javascript核心之原型鏈

前置知識

JavaScript中一切皆對象。

1. 除了undefined以外全部的數據類型都是對象（引用類型）或者有其對應的包裝類（原始類型）。

   • 原始值（不可變）

     • undefined
     • null
     • Boolean
     • Number
     • String
     • Symbol (es6新增)
     • BigInt (es6新增)

   • 引用類型

     • Object
     • Array
     • Function
     • RegExp
     • Date
     • Promise (es6新增)
     • Map (es6新增)
     • Set (es6新增)
     • WeakSet (es6新增)
     • WeakMap (es6新增)
     • ...

//null也是對象
typeof null //"object"

1. 全部對象都有其對應的構造函數，null除外。

能夠理解爲全部對象都是由函數產生的，均可以使用new關鍵字建立，函數也是一個對象，由Function產生。

var num = new Number(); //數字
var str = new String(); //字符串
var bool = new Boolean(); //布爾值

var obj = new Object(); //空對象

//定義一個函數
function sum(a, b){
    return a + b;
}

//至關於下面的寫法
var sum = new Function("a", "b", "return a + b");

//自定義構造函數
function Person(name, age){
    this.name = name;
    this.age = age;
}
var person = new Person('wlicox', 18); //自定義對象

new一個對象的時候JS作了哪些事情

1. 隱式的建立一個this對象；
2. this對象中包括一個prototype屬性，指向該構造函數的原型；
3. prototype對象中包括一個construtor屬性，指向該構造函數自己；
4. 返回this。

用代碼解釋大概就是下面這樣的:

假設有一個自定義構造函數Person

function Person(name, age){
    this.name = name;
    this.age = age;
}

當執行var person = new Person('wlicox', 18)時

function Person(name, age){
    //1.隱式的建立一個this對象
    var this = {
        //2.有一個prototype屬性
        prototype: {
            construtor: Foo //3.指回Foo本身
        }
    };
    
     /*用戶代碼*/
    this.name = name;
    this.age = age;
    
    return this; //4.隱式的返回this
}

構造函數和普通函數的區別

1. 構造函數只作一件事，就是建立對象，普通函數能夠提升編寫的效率以及代碼的複用等；
2. 構造函數的命名使用大駝峯，普通函數的命名使用小駝峯；
3. 構造函數的入參是做爲建立對象的屬性的值，普通對象的入參是用來提升函數的靈活性的；
4. 構造函數使用new關鍵字調用，普通函數使用()調用；
5. 構造函數不能有返回值，若是顯式的返回一個引用類型的值，那麼經過new建立的對象就一直是該返回值（返回原始類型的值不影響結果），普通函數有沒有返回值均可以。

function Person(name, age){
    this.name = name;
    this.age = age;
    return {};
}

var person = new Person('wilcox', 18)
console.log(person) //{}

原型prototype

1. 原型實際上就是一個普通的對象，每一個構造函數建立的時候都有個本身的原型；
2. 構造函數經過prototype屬性找到它的原型；
3. 構造函數建立的對象會繼承其構造函數原型上對象上的屬性。

構造函數construtor

1. 原型對象中的屬性，指向該構造函數自己；

Person === Person.prototype.constructor //true

隱式原型__proto__

1. 用構造函數生成的對象可使用__proto__屬性找到其構造函數的原型；

person.__proto__ === Person.prototype //true

prototype、construtor、__proto__三者的關係

原型鏈

1. 每一個對象都有__proto__屬性，由__proto__屬性串聯起來的的對象的集合就是原型鏈外；
2. 當一個對象在本身身上找不到屬性時，就會順着原型鏈往上找；

1. Object的原型是最頂端的原型，其中有一個toSting方法，這也就是爲何全部的數據類型都自帶toString方法。
2. null沒有原型
3. 原型圖：

注意：由於對象都是由構造函數參數的因此 Function 是一開始就存在的，再js代碼執行的時候， Function就被放入到內存中， Function也是對象，但它沒有構造函數，因此它的 __proto__指向它的本身的原型。