什么是原型？
每個函式都有 prototype（原型）屬性，這個屬性是一個指標，指向一個物件，這個物件的用途是包含特定型別的所有實體共享的屬性和方法，這個物件（原型物件）是用來給實體共享屬性和方法的，
function Person() {}
Person.prototype.name = 'Nicholas';
Person.prototype.age = '29';
Person.prototype.job = 'SoftWare Engineer';
Person.prototype.sayName = function() {
console.log(this.name);
};
var person1 = new Person();
person1.sayName(); // Nicholas
var person2 = new Person();
person1.sayName(); // Nicholas
console.log(person1.sayName === person2.sayName); // true
以下是關系圖
由上圖可知
-
建構式的 prototype（原型）屬性，指向原型物件
-
因為目前原型物件是屬于 Person 建構式的，所以它的 constructor 指向 Person 建構式
-
實體 1、實體 2 都是指向原型物件，所以就證明了 Person.prototype 定義的屬性和方法都會共享給它的實體，即代碼中 person1.sayName === person2.sayName 回傳 true，即它們使用的確實是同一個函式（函式的參考地址相同）
-
當呼叫建構式創建一個新的實體后，該實體內部將包含一個指標（內部屬性）即[[Prototype]]，指向建構式的原型物件，雖然在腳本中沒有標準的方式訪問[[Prototype]]，但 Firefox、Safari、Chrome 等瀏覽器在每個物件上都支持一個屬性proto；
-
要注意一點，實體 1、實體 2 的[[Prototype]]都是指向原型物件，而不是直接指向建構式本身
-
雖然無法訪問[[Prototype]]屬性，但是可以通過原型物件的 isPrototypeOf()方法來判斷實體是否指向該建構式的原型物件，Person.prototype.isPrototypeOf(person1) 回傳 true
-
在 ES5 中，新增了一個方法 Object.getPrototypeOf()，回傳[[Prototype]]的值
到目前為止，應該理解原型、原型物件、建構式之間的關系了吧
什么是原型鏈？
假設一個原型物件等于另一個型別的實體，另一個型別的原型物件又等于另一個型別的實體，就像這樣一層層遞進，就構成了實體與原型的鏈條，這個就是所謂的原型鏈的基本概念
// 定義建構式：超類
function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = https://www.cnblogs.com/noxussj/archive/2021/09/01/function() {
return this.property;
};
// 定義建構式：子類
function SubType() {
this.subproperty = false;
}
// SubType.prototype 等于 SuperType的實體，即重寫SubType原型物件
SubType.prototype = new SuperType();
// 原型物件重寫后又新增了方法
SubType.prototype.getSubValue = function() {
return this.subproperty;
};
var instance = new SubType();
關系圖
什么是繼承？
可以理解為，假設有函式 A 和函式 B，函式 A 繼承了函式 B，那么函式 B 中的屬性方法在函式 A 中也能訪問和使用
繼承的方式有很多：原型鏈繼承、組合繼承、原型式繼承、寄生式繼承、寄生組合式繼承
文章的內容/靈感都從下方內容中借鑒
-
【持續維護/更新 500+前端面試題/筆記】https://github.com/noxussj/Interview-Questions/issues
-
【大資料可視化圖表插件】https://www.npmjs.com/package/ns-echarts
-
【利用 THREE.JS 實作 3D 城市建模（珠海市）】https://3d.noxussj.top/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/296751.html
標籤：其他