原型鏈上的get與set訪問器屬性

關於訪問器屬性基本用法可以參閱JavaScript get set訪問器屬性一章節。

訪問器屬性也可以用在原型鏈上，表現與資料屬性有所不同。

首先看一段資料屬性的例子，也許很多馬虎的朋友也沒有注意到其中的一些特點。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(){
  this.webName="螞蟻部落";
}
Antzone.prototype.url="http://www.softwhy.com";
let antzone=new Antzone();
console.log(antzone.url);

程式碼執行效果截圖如下：

物件antzone的url屬性繼承自建構函式的原型物件。

關於原型可以參閱JavaScript prototype 原型一章節。

現在我們修改一下url屬性值，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(){
  this.webName="螞蟻部落";
}
Antzone.prototype.url="http://www.softwhy.com";
let antzone=new Antzone();
antzone.url="baidu.com";
console.log(antzone.hasOwnProperty("url"));

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.url是一個資料屬性，位於原型鏈，被物件例項所繼承。

（2）.當物件例項修改屬性值的時候，實質上會在物件例項自身新增一個對應的屬性，並賦值。

所以不要想當然認為屬性依然繼承自原型鏈，進行上述類似操作的時候一定要特別注意。

關於hasOwnProperty方法可以參閱JavaScript hasOwnProperty()一章節。

如果原型鏈上的屬性是訪問器屬性，那麼將有不同的表現。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(){
  this.webName="螞蟻部落";
}

Antzone.prototype._url="http://www.softwhy.com";
Object.defineProperty(Antzone.prototype, 'url', {
  get: function() {
    return this._url;
  },
  set: function(url) {
    this._url=url;
  }
});

let antzone=new Antzone();
antzone.url="baidu.com";
console.log(antzone.hasOwnProperty("url"));

程式碼執行效果截圖如下：

可以看到如果原型鏈上的屬性是訪問器屬性，那麼不會在物件例項上新增屬性。

如果我們需要保護物件上指定屬性不受類似操作的影響，可以將原型鏈上對應的屬性設定為訪問器屬性。