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

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中,只有查詢屬性時才會體會到繼承的存在,而設置屬性則和繼承無關,該特性可以讓我們可以有選擇地覆蓋繼承的屬性。


上一篇: 如何打造體驗優秀的“直播+”產品?

下一篇: 沒有符合條件的記錄

分享到: 更多
莆田三公游戏下载 超级大乐透100期走势图 时时彩技巧软件 竞彩足球彩票 老虎机网 海南七星彩论坛粤海网 真钱二八杠棋牌游戏 牛牛什么牌可以抢庄 正规牛牛 微信二十一点游戏 不思议棋牌 759棋牌娱乐 百人炸金花有规律吗 新版gb直播 冠亚和稳赚 双色球开奖视频