【JavaScript】【對象】更好地理解對象繼承

Youngs 發布于2019-08-21 13:33 / 2311人閱讀

摘要：每一個通過構造函數實例化的對象和都具有構造函數中的屬性，實例和構造函數之間是構造關系構造過程中也形成了原型關系是的原型，是的原型，實例通過原型鏈找到原型中的屬性和方法。自定義和構造函數的屬性是自有屬性，它們是對象本身的屬性。

繼承原理：實例中包含一個指向原型對象的內部指針

實現方法：讓原型對象等于另一個類型的實例

關鍵點：

構造函數、原型對象、實例

實例屬性、原型方法

構造關系、原型關系

自有屬性、繼承屬性和方法

demo：

//構造器
function Animal() {
    this.animal = "animal";
};
function Mammal() {
    this.mammal = "mammal";
};
var cat;

//原型鏈
Mammal.prototype = new Animal();
cat = new Mammal();

//添加屬性和方法
Animal.prototype.isAnimal = true;
Animal.prototype.sayAnimal = function() {
    alert("Is it " + this.animal + "? " + this.isAnimal);
};
Mammal.prototype.isMammal = true;
Mammal.prototype.sayMammal = function() {
    alert("Is it a " + this.mammal + "? " + this.isMammal);
};

先來看看每個對象都能訪問到哪些屬性和方法：

Animal.prototype:

isAnimal    //自定義
sayAnimal()    //自定義

Mammal.prototype:

isMammal    //自定義
sayMammal()    //自定義
animal    //來自構造函數
isAnimal    //來自繼承
sayAnimal()    //來自繼承

cat:

mammal    //來自構造函數
isMammal    //來自繼承
sayMammal()    //來自繼承
animal    //來自繼承
isAnimal    //來自繼承
sayAnimal()    //來自繼承

在這個demo中，有兩對構造關系和兩對繼承關系（不考慮Object）。每一個通過構造函數實例化的對象（Mammal.prototype和cat）都具有構造函數中的屬性，實例和構造函數之間是構造關系；構造過程中也形成了原型關系：Mammal.prototype是cat的原型，Animal.prototype是Mammal.prototype的原型，實例通過原型鏈找到原型中的屬性和方法。

自定義和構造函數的屬性是自有屬性，它們是對象本身的屬性。來自繼承的屬性和方法是對象沿著原型鏈找到的，它們并不是對象本身的屬性和方法。

實例繼承到的方法的作用域是該實例對象內部的執行環境，可以訪問實例能獲取到的所有屬性。通過this.property的方式可以得到實例對象能夠訪問到的所有屬性和方法，包括自有屬性和繼承的屬性方法。demo中的實例對象cat可以訪問到在Animal和Mammal及其原型中定義的所有屬性方法，這正是繼承的意義所在。

驗證：

console.log(cat.mammal);    //mammal
console.log(cat.isMammal);    //true
console.log(cat.sayMammal());    //Is it mammal? true
console.log(cat.animal);    //animal
console.log(cat.isAnimal);    //true
console.log(cat.sayAnimal());    //Is it animal? true

轉載請注明出處：https://segmentfault.com/a/1190000004550787

文章不定期更新完善，如果能對你有一點點啟發，我將不勝榮幸。

云服務器 GPU云服務器理解對象對象繼承objective-cclass 更好地大數據更好地

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

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

如何更好地理解Javascript對象的自有屬性和原型繼承屬性

摘要：對象具有自有屬性，也有一些屬性是從原型對象繼承而來的。為了更好地理解對象自有屬性和繼承屬性下面的示例深入解釋了屬性的訪問和設置細節。在給對象的屬性賦值時，是在原始對象上創建屬性或者對已有屬性賦值，而不會去修改原型鏈。 Javascript對象具有自有屬性（own property），也有一些屬性是從原型對象繼承而來的。為了更好地理解對象自有屬性和繼承屬性下面的示例深入解釋了屬性的訪問和...

kviccn 2019-08-21 10:36 評論0 收藏0
【譯】每個JavaScript 開發者應該了解的10個面試題

摘要：避免脆弱的基類問題。紅牌警告沒有提到上述任何問題。單向數據流意味著模型是單一的事實來源。單向數據流是確定性的，而雙向綁定可能導致更難以遵循和理解的副作用。原文地址 1. 你能說出兩種對 JavaScript 應用開發者而言的編程范式嗎？希望聽到： 2. 什么是函數編程？希望聽到： 3. 類繼承和原型繼承的不同？希望聽到 4. 函數式編程和面向對象編程的優缺點？ ...

mykurisu 2019-05-22 18:24 評論0 收藏0
7個 Javascript 面試題及回答策略

摘要：使用異步編程，有一個事件循環。它作為面向對象編程的替代方案，其中應用狀態通常與對象中的方法搭配并共享。在用面向對象編程時遇到不同的組件競爭相同的資源的時候，更是如此。翻譯：瘋狂的技術宅原文：https://www.indeed.com/hire/i... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮的前端技術文章不管你是面試官還是求職者，里面...

李義 2019-08-23 15:40 評論0 收藏0
理解JavaScript的核心知識點：原型

摘要：首先，需要來理清一些基礎的計算機編程概念編程哲學與設計模式計算機編程理念源自于對現實抽象的哲學思考，面向對象編程是其一種思維方式，與它并駕齊驅的是另外兩種思路過程式和函數式編程。 JavaScript 中的原型機制一直以來都被眾多開發者（包括本人）低估甚至忽視了，這是因為絕大多數人沒有想要深刻理解這個機制的內涵，以及越來越多的開發者缺乏計算機編程相關的基礎知識。對于這樣的開發者來說 J...

iKcamp 2019-08-23 18:34 評論0 收藏0
十分鐘快速了解《你不知道的 JavaScript》（上卷）

摘要：最近剛剛看完了你不知道的上卷，對有了更進一步的了解。你不知道的上卷由兩部分組成，第一部分是作用域和閉包，第二部分是和對象原型。附錄詞法這一章并沒有說明機制，只是介紹了中的箭頭函數引入的行為詞法。第章混合對象類類理論類的機制類的繼承混入。最近剛剛看完了《你不知道的 JavaScript》上卷，對 JavaScript 有了更進一步的了解。《你不知道的 JavaScript》上卷由兩部...

趙春朋 2019-08-26 12:16 評論0 收藏0