從原型到原型鏈，修煉JavaScript內功這篇文章真的不能錯過！系列（二）

從原型到原型鏈

本文主要從構造函數 -> 原型（隱式原型+顯示原型）-> 原型鏈的順序，漸進式講解，希望對你有所做幫助，共勉～

系列文章：

1. this指向詳解：思維腦圖與代碼的結合，讓你一篇搞懂this、call、apply（附面試題）
2. 本篇內容：請看下方目錄

目錄

• 前言
• 一、構造函數
• 二、原型
• 三、實例與原型
• 四、原型的原型
• 五、原型鏈
• 六、總結
• 寫在最後

前言

又到了回憶過去的時候了，知識就是這樣，原型和原型鏈在我之前的實習生涯中用到的很少——幾乎沒有（噗！我菜我攤牌了），但是它和this指向問題一樣，是初級、中級前端開發在面試時永遠繞不開的話題。是不是大家每次看面經的時候都會去搜索原型相關的知識點？

你看這知識，總是在考的時候，才能知道它的重要，就好像曾經有一段賊拉真摯的面試題擺在我面前…話題拉回來，今天我們就收了這個孽障！

一、構造函數

1.1 什麼是構造函數？

構造函數本身就是一個函數，與普通函數沒有任何區別，不過爲了規範一般將其首字母大寫。構造函數和普通函數的區別在於，使用new生成實例的函數就是構造函數，直接調用的就是普通函數。

function Person() {
	this.name = 'yuguang';
};
var person = new Person();
console.log(person.name) // yuguang

在這個例子中，Person 就是一個構造函數。

1.2 constructor？

constructor 返回創建實例對象時構造函數的引用。此屬性的值是對函數本身的引用，而不是一個包含函數名稱的字符串。

可以看到實例對象的constructor指向了它的構造函數，而它和原型的關係我們在之後會鏈接到一起。

1.3 都有哪些數據類型或者函數擁有constructor呢？

在JavaScript中，每個具有原型的對象都會自動獲得constructor屬性。除了：arguments、Enumerator、Error、Global、Math、RegExp等一些特殊對象之外，其他所有的JavaScript內置對象都具備constructor屬性。例如：Array、Boolean、Date、Function、Number、Object、String等。所有主流瀏覽器均支持該屬性。打開控制檯我們可以驗證一下

// 字符串
console.log('str'.constructor) // ƒ String() { [native code] }
console.log('str'.constructor === String) // true

// 數組
console.log([1,2,3].constructor) // ƒ Array() { [native code] }
console.log([1,2,3].constructor === Array) // true

// 數字
var num = 1
console.log(num.constructor) // ƒ Number() { [native code] }
console.log(num.constructor === Number) // true

// Date
console.log(new Date().constructor) // ƒ Date() { [native code] }
// 注意！！！不要混淆哦
console.log(new Date().getTime().constructor) // ƒ Number() { [native code] }

// Boolean
console.log(true.constructor) // ƒ Boolean() { [native code] }
console.log(true.constructor === Boolean) // true

// 自定義函數
function show(){
	console.log('yuguang');
};
console.log(show.constructor) // ƒ Function() { [native code] }

// 自定義構造函數，無返回值
function Person(){
	this.name = name;
};
var p = new Person()
console.log(p.constructor) // ƒ Person()

// 有返回值
function Person(){
	this.name = name;
	return {
		name: 'yuguang'
	}
};
var p = Person()
console.log(p1.constructor) // ƒ Object() { [native code] }

1.4 模擬實現一個new

既然構造函數與普通函數的區別僅僅在於調用方式上，我們就應該瞭解new。

• 當調用new運算符時，該函數總會返回一個對象；
• 通常情況下，構造器裏的this就指向返回的這個對象；

代碼如下：

通常情況下
var MyClass = function(){
	this.name = 'yuguang';
};
var obj = new MyClass();
obj.name; // yuguang

特殊情況
var MyClass = function(){
	this.name = 'yuguang';
	return {
		name: '老王'
	}
};
var obj = new MyClass();
obj.name // 老王

我們利用 __proto__（隱式原型，下文會提到）屬性來模擬一下new 調用構造函數的過程：

var objectNew = function(){
    // 從object.prototype上克隆一個空的對象
    var obj = new Object(); 
    // 取得外部傳入的構造器，這裏是Person
    var Constructor = [].shift.call( arguments );
    // 更新，指向正確的原型
    obj.__proto__ = Constructor.prototype; //知識點，要考、要考、要考 
    // 借用外部傳入的構造器給obj設置屬性
    var ret = Constructor.apply(obj, arguments);
    // 確保構造器總是返回一個對象
    return typeof ref === 'object' ? ret : obj;
}

二、原型

2.1 prototype(顯式原型)

JavaScript 是一種基於原型的語言 (prototype-based language)，在設計的時候模仿了Java的兩套類型機制：基本類型 和 對象類型。可見原型很重要！

每個對象都擁有一個原型對象，類是以函數的形式來定義的。prototype表示該函數的原型，也表示一個類的成員的集合。看下圖：

可以發現Person函數自己的原型都有什麼：

• constructor (Person.prototype.constructor => Person)
• __proto__ （我們稱它爲隱式原型）

此時我們得到了第一張表示構造函數和實例原型之間的關係圖：

那麼我們該怎麼表示實例與構造函數原型，也就是 person 和 Person.prototype 之間的關係呢，這時候我們就要講到第二個屬性：

2.2 proto(隱式原型)

這是每一個JavaScript對象(除了 null )都具有的一個屬性，叫__proto__，這是一個訪問器屬性（即 getter 函數和 setter 函數），通過它可以訪問到對象的內部[[Prototype]] (一個對象或 null )。

function Person() {}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

於是我們更新下關係圖：

小結： 每個引用類型的隱式原型都指向它的構造函數的顯式原型

2.3 constructor

前文提到了constructor，它與原型的關係也可以添加到這張圖裏，更新下關係圖：

根據上圖的關係，下面這段的結果，大家就一目瞭然了：

function Person() {}

var person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 順便學習一個ES5的方法,可以獲得對象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

接下來我們要繼續思考實例和原型的關係：

三、實例與原型

當讀取實例的屬性時，如果找不到，就會查找與對象關聯的原型中的屬性，如果還查不到，就去找原型的原型，一直找到最頂層爲止。這樣一個查找過程

舉個例子：

function Person() {}
Person.prototype.name = '老王';

var person = new Person();
person.name = '餘光';

console.log(person.name) // 餘光

delete person.name;
console.log(person.name) // 老王

在這個例子中，我們給實例對象 person 添加了 name 屬性，當我們打印 person.name 的時候，結果自然爲 餘光（is me）。

描述：

但是當我們刪除了 person 的 name 屬性後，再次讀取 person.name，從 person 對象中找不到 name 屬性就會從 person 的原型也就是 person.proto ，也就是 Person.prototype中查找，幸運的是我們找到了 name 屬性，結果爲 老王（這…）

總結：

• 嘗試遍歷實例a中的所有屬性，但沒有找到目標屬性；
• 查找name屬性的這個請求被委託給該實例a的構造器(A)的原型，它被a.__proto__ 記錄着並且指向A.prototype；
• A.prototype存在目標屬性，返回他的值；

但是萬一還沒有找到呢？原型的原型又是什麼呢？

四、原型的原型

在前面，我們已經講了原型也是一個對象，既然是對象，我們就可以用最原始的方式創建它，那就是：

var obj = new Object();
obj.name = '餘光'
console.log(obj.name) // 餘光

其實原型對象就是通過Object構造函數生成的，結合之前所講，實例的 __proto__ 指向構造函數的 prototype ，可以理解成，Object.prototype()是所有對象的根對象，所以我們再次更新下關係圖：

五、原型鏈

每個對象擁有一個原型對象，通過 __proto__ 指針指向上一個原型 ，並從中繼承方法和屬性，同時原型對象也可能擁有原型，這樣一層一層，最終指向 null。這種關係被稱爲原型鏈 (prototype chain)，通過原型鏈一個對象會擁有定義在其他對象中的屬性和方法。

這個鏈條存在着終點，是因爲：Object.prototype 的原型是——null，引用阮一峯老師的 《undefined與null的區別》 就是：

null 表示“沒有對象”，即該處不應該有值。這句話也意味着 Object.prototype 沒有原型

我們最後更新一次關係圖，藍色線條就可以表示原型鏈這種關係。

補充，易錯點

1.constructor
首先是 constructor 屬性，我們看個例子：

function Person() {}
var person = new Person();
console.log(person.constructor === Person); // true

當獲取 person.constructor 時，其實 person 中並沒有 constructor 屬性,當不能讀取到constructor 屬性時，會從 person 的原型也就是 Person.prototype 中讀取，正好原型中有該屬性，所以：

person.constructor === Person.prototype.constructor

2.__proto__

其次是 proto ，絕大部分瀏覽器都支持這個非標準的方法訪問原型，然而它並不存在於 Person.prototype 中，實際上，它是來自於 Object.prototype ，與其說是一個屬性，不如說是一個 getter/setter，當使用 obj.proto 時，可以理解成返回了 Object.getPrototypeOf(obj)。

3.真的是繼承嗎？

最後是關於繼承，前面我們講到“每一個對象都會從原型‘繼承’屬性”，實際上，繼承是一個十分具有迷惑性的說法，引用《你不知道的JavaScript》中的話，就是：

繼承意味着複製操作，然而 JavaScript 默認並不會複製對象的屬性，相反，JavaScript 只是在兩個對象之間創建一個關聯，這樣，一個對象就可以通過委託訪問另一個對象的屬性和函數，所以與其叫繼承，委託的說法反而更準確些。

六、總結

• 使用new生成實例的函數就是構造函數，直接調用的就是普通函數；
• 每個對象都擁有一個原型對象；
• 每個引用類型的隱式原型都指向它的構造函數的顯式原型；
• Object.prototype是所有對象的根對象；
• 原型鏈存在終點，不會無限查找下去；

參考

• 《JavaScript設計模式與開發實踐》
• 木易楊前端進階
• JavaScript深入之從原型到原型鏈

<>

寫在最後

JavaScript內功基礎部分已經總結到第二篇了，本系列大約會有15篇文章，都是我們在面試最高頻的，但工作中常常被忽略的。

JavaScript內功系列：

1. this指向詳解，思維腦圖與代碼的結合，讓你一篇搞懂this、call、apply。系列（一）
2. 本文
3. 下一篇預發：作用域和作用域鏈

關於我

• 花名：餘光
• 沉迷JS，水平有限，虛心學習中

其他沉澱

• JavaScript版LeetCode題解
• 前端進階筆記

如果您看到了最後，不妨收藏、點贊、評論一下吧！！！
持續更新，您的三連就是我最大的動力，虛心接受大佬們的批評和指點，共勉！