原型上的JavaScript和默認值

Question

我是JavaScript的新手。 我已經做了很多谷歌搜索，但未能找到我尋找的答案 - 可能是因為我使用了錯誤的術語。

前幾天，我正在閱讀有關創建JavaScript組件的基本教程： http ： //callmenick.com/post/javascript-objects-building-javascript-component-part-2

本教程的一部分涉及一組默認選項，這些選項分配給類型的原型鏈：

SimpleAlert.prototype.options = {
  wrapper : document.body,
  type : "default",
  message : "Default message."
}

如果用戶在構造期間提供SimpleAlert類型，則可以使用不同的參數創建SimpleAlert類型 - 否則使用默認選項。

SimpleAlert構造函數看起來像這樣：

function SimpleAlert( options ) {
this.options = extend( {}, this.options ); // Why?
extend( this.options, options );
// start the functionality...
}

而extend函數定義為：

function extend( a, b ) {
for( var key in b ) { 
  if( b.hasOwnProperty( key ) ) {
    a[key] = b[key];
  }
}
return a;
}

我對這段代碼的理解是：

創建新的SimpleAlert對象涉及用戶傳入自己的options對象。 假設我通過{ test : "Testing" }傳遞options參數。 然后， extend函數訪問this.options （我相信它是指原型的options實例，因為范圍中沒有定義其他options變量），並且基本上將所有內容從共享實例復制到空{}對象，然后分配共享this.options實例。

然后，用戶提供的options （在我的情況下{ test : "Testing" } extend到this.options共享實例中（基本上將我的額外test字段復制到共享實例中）

但實際上，似乎共享實例在此示例中不受影響 - 意味着SimpleAlert.prototype.options聲明保持不變，以便SimpleAlert每個新實例都可以訪問它（這是我想要的）

然而，在我的實驗中，我發現改變this.options導致原型值被修改......我確定無論我做錯了什么都很容易修復，但我看不到它。 這是一個例子：

    var Animal = function(ovr) {
        if (arguments.length > 0)
        {
        this.options.mode = ovr;
        }

    };

    Animal.prototype.options = { mode: "Test" }; / I want this to be default for all instances created

    var test = new Animal("Override"); // set this test obj to use "Overide"
    console.log(test.options.mode); // outputs Override as expected
    var again = new Animal();
    console.log(again.options.mode); // also outputs Override (I want it to say "Test")

謝謝您的幫助！

Answer 1

正如您在代碼中已經建議的那樣，它缺少“復制”操作，因此您正在修改原型上的共享對象。

var Animal = function(ovr) {
    if (arguments.length > 0) {
        // Copy whatever is on this.options to a blank object,
        // then assign this.options to be that newly copied object, so
        // the prototype object is masked by the instance object.
        this.options = Object.assign({}, this.options);
        this.options.mode = ovr;
    }
};

這可能有助於理解實例屬性如何“掩蓋”原型：

var Foo = function() {
    console.log('a', this.x);
    this.x = 100;
    console.log('b', this.x);
    delete this.x;
    console.log('c', this.x);
};

Foo.prototype.x = 1;

new Foo();