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

kviccn 發布于2019-08-21 10:36 / 2897人閱讀

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

Javascript對象具有“自有屬性”（own property），也有一些屬性是從原型對象繼承而來的。為了更好地理解對象自有屬性和繼承屬性下面的示例深入解釋了屬性的訪問和設置細節。

function Obj () {
    this.z = 3;//自有屬性
}

//對象會繼承原型里的屬性
Obj.prototype.x = 1;
Obj.prototype.y = 2;

var o = new Obj();
console.log(o); //o的打印結果如下圖，可以看到其自有屬性和繼承自原型的屬性

假設要查詢對象o的屬性y, 如果o自有屬性中不存在y, 那么會繼續在o的原型對象中查找屬性y。如果原型對象中也沒有y，但這個原型對象也有原型，那么繼續在這個原型對象的原型上執行查詢，直到沒找到y或者查找到一個原型是null的對象為止。對象的原型屬性構成了一個“鏈”。通過這個“鏈”可以實現屬性的繼承。

現在假設給對象o的屬性x賦值，如果o中已經有屬性x(自有屬性，不是繼承來的)那么這個賦值操作只改變這個已有屬性x的值。如果o中不存在屬性x, 那么賦值操作給o添加一個新屬性x。如果之前o繼承了自己的原型對象的x屬性，那么這個繼承的屬性就被新創建的同名屬性屏蔽了。

o.x = 5;
console.log(o);
console.log(o.x);// 5

從打印結果可以看到對象創建了一個自有屬性x，屏蔽了之前繼承來的x值，這個操作只影響o這個單一對象，不會影響對象的原型里的x屬性，既不會影響其他繼承該原型的對象。

var b = new Obj();
console.log(b);
console.log(b.x);//1

我們再把對象o的x屬性delete掉,然后再訪問屬性“x”

delete o.x;//true
o.x; // 1

發現訪問o.x時 x 再次指向了原型對象中的 x屬性。
實際上自有屬性和繼承屬性與靜態語言的實例屬性和類屬性很像，因此在編寫程序的時候最好不要把實例屬性和類屬性使用相同的名字，因為相同名字的實例屬性會屏蔽掉類屬性，但是當你刪除實例屬性后，再使用相同的名稱訪問到的將是類屬性。

在給對象的屬性賦值時，是在原始對象上創建屬性或者對已有屬性賦值，而不會去修改原型鏈。在Javascript中，只有查詢屬性時才會體會到繼承的存在，而設置屬性則和繼承無關，該特性可以讓我們可以有選擇地覆蓋繼承的屬性。

云服務器 GPU云服務器匹配對象的屬性和函數對象的屬性 js原型屬性有什么用 js中集合對象的屬性

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

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

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

摘要：每一個通過構造函數實例化的對象和都具有構造函數中的屬性，實例和構造函數之間是構造關系構造過程中也形成了原型關系是的原型，是的原型，實例通過原型鏈找到原型中的屬性和方法。自定義和構造函數的屬性是自有屬性，它們是對象本身的屬性。繼承原理：實例中包含一個指向原型對象的內部指針實現方法：讓原型對象等于另一個類型的實例關鍵點：構造函數、原型對象、實例實例屬性、原型方法構造關系、原型...

Youngs 2019-08-21 13:33 評論0 收藏0
徹底搞懂JavaScript中的繼承

摘要：這正是我們想要的太棒了毫不意外的，這種繼承的方式被稱為構造函數繼承，在中是一種關鍵的實現的繼承方法，相信你已經很好的掌握了。你應該知道，JavaScript是一門基于原型鏈的語言，而我們今天的主題 -- 繼承就和原型鏈這一概念息息相關。甚至可以說，所謂的原型鏈就是一條繼承鏈。有些困惑了嗎？接著看下去吧。一、構造函數，原型屬性與實例對象要搞清楚如何在JavaScript中實現繼承，...

_ivan 2019-08-21 17:48 評論0 收藏0
JS基礎05「對象」

摘要：對象是的數據類型。對象是動態的，可以隨時新增和刪除自有屬性。客戶端中表示網頁結構的對象均是宿主對象。提供第二個可選參數，用以對對象的屬性進行進一步描述。沒有原型的對象為數不多，就是其中之一。運算符的左側是屬性名字符串，右側是對象。對象是 JavaScript 的數據類型。它將很多值（原始值或者其他對象）聚合在一起，可通過名字訪問這些值，因此我們可以把它看成是從字符串到值的映射。對象是...

frolc 2019-08-26 10:58 評論0 收藏0
《JavaScript 闖關記》之對象

摘要：屬性名可以是包含空字符串在內的任意字符串，但對象中不能存在兩個同名的屬性。客戶端中表示網頁結構的對象均是宿主對象。這里的函數稱做構造函數，構造函數用以初始化一個新創建的對象。通過關鍵字和構造函數調用創建的對象的原型就是構造函數的屬性的值。對象是 JavaScript 的數據類型。它將很多值（原始值或者其他對象）聚合在一起，可通過名字訪問這些值，因此我們可以把它看成是從字符串到值的映射...

rozbo 2019-08-20 10:50 評論0 收藏0
《JavaScript面向對象精要》讀書筆記

摘要：解除引用的最佳手段是將對象變量設置為。字面形式允許你在不需要使用操作符和構造函數顯示創建對象的情況下生成引用值。函數就是值可以像使用對象一樣使用函數因為函數本來就是對象，構造函數更加容易說明。 JavaScript（ES5）的面向對象精要標簽： JavaScript 面向對象讀書筆記 2016年1月16日-17日兩天看完了《JavaScript面向對象精要》（參加異步社區的活動送...

GitCafe 2019-08-19 17:26 評論0 收藏0