JavaScript中從原型到原型鏈的示例分析

這篇“JavaScript中從原型到原型鏈的示例分析”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“JavaScript中從原型到原型鏈的示例分析”，給大家總結了以下內容，具有一定借鑒價值，內容詳細步驟清晰，細節處理妥當，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內容吧。

一、構造函數

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 = 1console.log(num.constructor) // ? Number() { [native code] }console.log(num.constructor === Number) // true// Dateconsole.log(new Date().constructor) // ? Date() { [native code] }// 注意！！！不要混淆哦console.log(new Date().getTime().constructor) // ? Number() { [native code] }// Booleanconsole.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) // trueconsole.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中從原型到原型鏈的示例分析”這一關鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領會，快去試試吧，如果想閱讀更多相關知識點的文章，歡迎關注億速云行業資訊頻道！