前言
原型、原型鏈也是一個老生常談的問題了，可以說js原型弄明白了，那么學習js就得了一種質的飛躍，今天我們就來看看這個在前端面試中的高頻考題究竟是怎么一回事，
一、原型
JavaScript 常被描述為一種基于原型的語言——每個物件擁有一個原型物件
當試圖訪問一個物件的屬性時，它不僅僅在該物件上搜尋，還會搜尋該物件的原型，以及該物件的原型的原型，依次層層向上搜索，直到找到一個名字匹配的屬性或到達原型鏈的末尾
準確地說，這些屬性和方法定義在Object的構造器函式（constructor functions）之上的prototype屬性上，而非實體物件本身
原型實體：
函式可以有屬性，每個函式都有一個特殊的屬性叫作原型prototype
function doSomething(){}
console.log( doSomething.prototype );
控制臺輸出
{
constructor: ? doSomething(),
__proto__: {
constructor: ? Object(),
hasOwnProperty: ? hasOwnProperty(),
isPrototypeOf: ? isPrototypeOf(),
propertyIsEnumerable: ? propertyIsEnumerable(),
toLocaleString: ? toLocaleString(),
toString: ? toString(),
valueOf: ? valueOf()
}
}
上面這個物件，就是大家常說的原型物件
可以看到，原型物件有一個自有屬性constructor，這個屬性指向該函式，如下圖關系展示
二、原型鏈
原型物件也可能擁有原型，并從中繼承方法和屬性，一層一層、以此類推，這種關系常被稱為原型鏈 (prototype chain)，它解釋了為何一個物件會擁有定義在其他物件中的屬性和方法
在物件實體和它的構造器之間建立一個鏈接（它是__proto__屬性，是從建構式的prototype屬性派生的），之后通過上溯原型鏈，在構造器中找到這些屬性和方法
原型鏈實體：
function Person(name) {
this.name = name;
this.age = 18;
this.sayName = function() {
console.log(this.name);
}
}
// 第二步 創建實體
var person = new Person('person')
根據代碼，我們可以得到下圖
下面分析一下：
- 建構式Person存在原型物件Person.prototype
- 建構式生成實體物件person，person的__proto__指向建構式Person原型物件
- Person.prototype.proto 指向內置物件，因為 Person.prototype 是個物件，默認是由 Object函式作為類創建的，而 Object.prototype 為內置物件
- Person.proto 指向內置匿名函式 anonymous，因為 Person 是個函式物件，默認由 Function 作為類創建
- Function.prototype 和 Function.__proto__同時指向內置匿名函式 anonymous，這樣原型鏈的終點就是 null
三、總結
下面首先要看幾個概念：
__proto__作為不同物件之間的橋梁，用來指向創建它的建構式的原型物件的
每個物件的__proto__都是指向它的建構式的原型物件prototype的
person1.__proto__ === Person.prototype
建構式是一個函式物件，是通過 Function構造器產生的
Person.__proto__ === Function.prototype
原型物件本身是一個普通物件，而普通物件的建構式都是Object
Person.prototype.__proto__ === Object.prototype
剛剛上面說了，所有的構造器都是函式物件，函式物件都是 Function構造產生的
Object.__proto__ === Function.prototype
Object的原型物件也有__proto__屬性指向null，null是原型鏈的頂端
Object.prototype.__proto__ === null
最后
到此我們的原型和原型鏈的文章是結束了，如果上面的內容有錯，請指出，我會及時改正.相互學習，共同進步. 感謝你的關注…
想學前端的可以聯系我Q裙：714205369
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/276203.html
標籤：其他
上一篇：音波加載效果 html+css
下一篇：H5專案適配系統深色模式方案總結