原型與原型鏈

dayday_up 發布于2019-08-21 17:33 / 2057人閱讀

摘要：原型屬性在函數被定義時創建，初始值是一個空對象沒有自身屬性的對象。為新建對象添加方法和屬性的方式利用原型構造器中原型屬性幾個相關方法和屬性判斷一個屬性是自身屬性還是原型屬性。來自知乎的一張圖，很清晰面向對象編程指南的原型鏈圖

sync github

原型屬性 prototype

在函數被定義時創建，初始值是一個"空"對象（沒有自身屬性的對象）。

為新建對象添加方法和屬性的方式

利用原型

// 1 構造器中
function Gadget(name, color) {
    this.name = name;
}

// 2 原型屬性
Gadget.prototype.price = 66;

幾個相關方法和屬性

hasOwnProperty() 判斷一個屬性是自身屬性還是原型屬性。

通常，在for in 和 for of 中，需要使用 hasOwnProperty()~

propertyIsEnumerable() 該方法會對所有的非內建對象屬性返回 true

const newtoy = new Gadget("webcam");

// 對于內建屬性和方法來說，不可枚舉
newtoy.propertyIsEnumerable("constructor"); // false

// 任何來自原型鏈中的屬性都會返回false，包括那些在`for-in`循環中可枚舉的屬性
newtoy.propertyIsEnumerable("price");   // false

// notice
newtoy.constructor.prototype.propertyIsEnumerable("price"); // true

isPrototypeOf() 判斷當前對象是否是另一個對象的原型

Object.getPrototypeOf() ES5適用。獲取對象的原型。效果同特殊屬性 __proto__

__proto__

notice: 不要在實際的腳本中使用。另，__proto__與prototype的區別，__proto__實際上是某個實例對象的屬性，而prototype則屬于構造器函數的屬性。

原型陷阱

當我們對原型對象執行完全替換時，可能會觸發原型鏈中某種異常

prototype.constructor屬性是不可靠的

體會下面的輸出內容

function Dog() {
    this.tail = true;
}
var benji = new Dog();
var rusty = new Dog();

Dog.prototype.say = function() {
    return "Woof!";
};

benji.say();    // "Woof!"
rusty.say();    // "Woof!"
benji.constructor === Dog;  // true
rusty.constructor === Dog;  // true

// 用一個自定義的新對象完全覆蓋掉原有的原型對象
Dog.prototype = {
    paws: 4,
    hair: true,
};

// 發現通過構造函數創建的對象 prototype 對象并沒有改變
typeof benji.paws;  // undefined
benji.say();    // Woof
typeof benji.__proto__.say; // function
typeof benji.__proto__.paws;    // undefined

// 通過構造函數創建的對象使用新的 prototype 對象
var lucy = new Dog();
lucy.say(); // TypeError: lucy.say is not a function
lucy.paws;  // 4
typeof lucy.__proto__.say; // undefined
typeof lucy.__proto__.paws; // number

//但是！！！注意此時新對象的 constructor 屬性的指向
lucy.constructor;   // function Object(){[native code]}
benji.constructor;  // function Dog() {...}

// solve
Dog.prototype.constructor = Dog;
new Dog().constructor === Dog;  // true
lucy.constructor;   // function Dog() {...}

當我們重寫某對象的 prototype 時，需要重置相應的 constructor 屬性。

Summary

來自知乎的一張圖，很清晰

Reference

《JavaScript面向對象編程指南》

Javascript的原型鏈圖 - wang z

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

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

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

《javascript高級程序設計》筆記：原型圖解

摘要：不理解沒關系，下面會結合圖例分析上一篇高級程序設計筆記創建對象下一篇高級程序設計筆記繼承參考之原型鏈的解讀三張圖搞懂的原型對象與原型鏈繼承與原型鏈文章直接從原型圖解開始的，如果對一些概念不太清除，可以結合后面幾節查看 1. 圖解原型鏈 1.1 鐵三角關系（重點） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 評論0 收藏0
【5】JavaScript 函數高級——原型與原型鏈深入理解（圖解）

摘要：探索是如何判斷的表達式如果函數的顯式原型對象在對象的隱式原型鏈上，返回，否則返回是通過自己產生的實例案例案例重要注意的顯示原型和隱式原型是一樣的。面試題測試題測試題報錯對照下圖理解原型與原型鏈深入理解（圖解）原型（prototype）函數的 prototype 屬性（圖）每個函數都有一個prototype屬性，它默認指向一個Object空對象（即稱為：原型對象）原型對象中有...

馬龍駒 2019-08-23 17:17 評論0 收藏0
JavaScript中的原型與原型鏈

摘要：前言作為前端高頻面試題之一，相信很多小伙伴都有遇到過這個問題。前言作為前端高頻面試題之一，相信很多小伙伴都有遇到過這個問題。那么你是否清楚完整的了解它呢？國際慣例，讓我們先拋出問題：什么是原型、原型鏈它們有什么特點它們能做什么怎么確定它們的關系或許你已經有答案，或許你開始有點疑惑，無論是 get 新技能或是簡單的溫習一次，讓我們一起去探究一番吧如果文章中有出現紕...

laoLiueizo 2019-08-23 16:58 評論0 收藏0
進擊JavaScript之（四）原型與原型鏈

摘要：每一個由構造函數創建的對象都會默認的連接到該神秘對象上。在構造方法中也具有類似的功能，因此也稱其為類實例與對象實例一般是指某一個構造函數創建出來的對象，我們稱為構造函數的實例實例就是對象。表示該原型是與什么構造函數聯系起來的。本文您將看到以下內容：傳統構造函數的問題一些相關概念認識原型構造、原型、實例三角結構圖對象的原型鏈函數的構造函數Function 一句話說明什么...

XBaron 2019-08-20 10:45 評論0 收藏0
原型鏈一：原型與原型鏈

摘要：說白了，原型就是構造函數用來構造新實例的模板對象。什么是原型鏈先回答什么是原型。例如這個原型的原型就是這個構造函數的，既這個原型對象。這些原型對象通過像鏈子一樣連起來，就叫做原型鏈。原型鏈初步學習這篇博客只是我初步理解原型鏈的一個個人學習筆記,寫的比較粗略,且有的地方可能理解錯誤. 更多更專業的關于原型鏈的解釋請看JavaScript深入之從原型到原型鏈和阮一峰的博客:Javas...

MudOnTire 2019-08-22 17:04 評論0 收藏0
JavaScript系列--淺析原型鏈與繼承

摘要：綜上所述有原型鏈繼承，構造函數繼承經典繼承，組合繼承，寄生繼承，寄生組合繼承五種方法，寄生組合式繼承，集寄生式繼承和組合繼承的優點于一身是實現基于類型繼承的最有效方法。一、前言繼承是面向對象（OOP）語言中的一個最為人津津樂道的概念。許多面對對象（OOP）語言都支持兩種繼承方式:：接口繼承和實現繼承。接口繼承只繼承方法簽名,而實現繼承則繼承實際的方法。由于js中方法沒有簽名...

draveness 2019-08-23 18:06 評論0 收藏0