JavaScript系列 - 深入之從原型到原型鏈

shadajin 發布于2019-08-26 12:01 / 587人閱讀

摘要：本文詳情構造函數創建對象先使用構造函數創建一個對象在這個例子中，就是一個構造函數，我們使用創建了一個實例對象。

本文詳情：https://github.com/mqyqingfen...

構造函數創建對象
先使用構造函數創建一個對象

function Person(){

}
var person = new Person();
person.name = "Mit";
console.log(person.name)

在這個例子中，Person 就是一個構造函數，我們使用 new 創建了一個實例對象 person。

prototype
每個函數都有一個prototype對象

function Person() {

}
// 雖然寫在注釋里，但是你要注意：
// prototype是函數才會有的屬性
Person.prototype.name = "Kevin";
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

函數的prototype對象指向該構造函數創建實例的原型

(__proto__)
每個js對象都具有一個屬性，叫__proto__，這個屬性指向該對象的原型

function Person() {

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

更新如下

constructor
每個原型都有一個constructor屬性指向關聯的構造函數

實例和原型
當讀取完實例的屬性是，如果找不到，就會查找與對象關聯的原型中的屬性，如果找不到，就回去原型中去查找

function Person() {

}

Person.prototype.name = "Kevin";

var person = new Person();

person.name = "Daisy";
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin

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

var obj = new Object();
obj.name = "Kevin"
console.log(obj.name) // Kevin

其實原型對象就是通過 Object 構造函數生成的，結合之前所講，實例的 proto 指向構造函數的 prototype ，所以我們再更新下關系圖：

原型鏈

那 Object.prototype 的原型呢？

null，我們可以打印：

console.log(Object.prototype.__proto__ === null) // true

然而 null 究竟代表了什么呢？

引用阮一峰老師的《undefined與null的區別》就是：

null 表示“沒有對象”，即該處不應該有值。
所以 Object.prototype.__proto__ 的值為 null 跟 Object.prototype 沒有原型，其實表達了一個意思。

所以查找屬性的時候查到 Object.prototype 就可以停止查找了。

最后一張關系圖也可以更新為：

GPU云服務器云服務器原型原型鏈原型鏈 javascript原型原型鏈繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108032.html

JavaScript深入之從原型到原型鏈

摘要：深入系列的第一篇，從原型與原型鏈開始講起，如果你想知道構造函數的實例的原型，原型的原型，原型的原型的原型是什么，就來看看這篇文章吧。讓我們用一張圖表示構造函數和實例原型之間的關系在這張圖中我們用表示實例原型。 JavaScript深入系列的第一篇，從原型與原型鏈開始講起，如果你想知道構造函數的實例的原型，原型的原型，原型的原型的原型是什么，就來看看這篇文章吧。構造函數創建對象我們先...

Songlcy 2019-08-21 15:32 評論0 收藏0
JavaScript深入之new的模擬實現

摘要：深入系列第十二篇，通過的模擬實現，帶大家揭開使用獲得構造函數實例的真相一句話介紹運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象類型之一也許有點難懂，我們在模擬之前，先看看實現了哪些功能。 JavaScript深入系列第十二篇，通過new的模擬實現，帶大家揭開使用new獲得構造函數實例的真相 new 一句話介紹 new: new 運算符創建一個用戶定義的對象類型的實例或具...

tianlai 2019-08-20 16:17 評論0 收藏0
JavaScript深入之bind的模擬實現

摘要：也就是說當返回的函數作為構造函數的時候，時指定的值會失效，但傳入的參數依然生效。構造函數效果的優化實現但是在這個寫法中，我們直接將，我們直接修改的時候，也會直接修改函數的。 JavaScript深入系列第十一篇，通過bind函數的模擬實現，帶大家真正了解bind的特性 bind 一句話介紹 bind: bind() 方法會創建一個新函數。當這個新函數被調用時，bind() 的第一個參數...

FingerLiu 2019-08-20 16:15 評論0 收藏0
JavaScript深入系列15篇正式完結！

摘要：寫在前面深入系列共計篇已經正式完結，這是一個旨在幫助大家，其實也是幫助自己捋順底層知識的系列。深入系列自月日發布第一篇文章，到月日發布最后一篇，感謝各位朋友的收藏點贊，鼓勵指正。寫在前面 JavaScript 深入系列共計 15 篇已經正式完結，這是一個旨在幫助大家，其實也是幫助自己捋順 JavaScript 底層知識的系列。重點講解了如原型、作用域、執行上下文、變量對象、this、...

fxp 2019-08-20 16:50 評論0 收藏0
JavaScript深入之繼承的多種方式和優缺點

摘要：深入系列第十五篇，講解各種繼承方式和優缺點。優點融合原型鏈繼承和構造函數的優點，是中最常用的繼承模式。寄生組合式繼承為了方便大家閱讀，在這里重復一下組合繼承的代碼組合繼承最大的缺點是會調用兩次父構造函數。 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優缺點。寫在前面本文講解JavaScript各種繼承方式和優缺點。但是注意：這篇文章更像是筆記，哎...

JackJiang 2019-08-20 16:30 評論0 收藏0