使用JavaScript的新構造和「這個」衝突

Question

我通常使用簡單對象是這樣的：

var Test = { 

    value: '', // A value 

    init: function(options) { 

     // Set value 
     Test.value = options.value; 

    } 

}; 

問題是，當我想使用該對象不止一次在頁面上。它會覆蓋自己。 E.g：

Test.init({ "value" : "a" }); 

// Test.value is now "a" 

Test.init({ "value" : "b" }); 

// Test.value is now "b" 

這就是爲什麼我打開JavaScript中的新的構造函數，因此我可以保持獨立的構造函數的內容。我對JavaScript構造函數完全陌生，不管這是否是正確的方法，我都不確定。

我現在有它建立這樣運行：使用this.value構造內部時

var first = new Test(); 
first.init({ "value" : "a" }); 

// first.value is now "a" 

var second = new Test(); 
second.init({ "value" : "b" }); 

// second.value is now "a" 

我現在的問題是。

這裏是我的意思的一個例子。你會看到我在init()函數中設置了this.value。但是，當使用它的$.each()函數創建JQuery循環時，this被JQuery覆蓋，因此我無法訪問this.value變量或this.format()函數。

function Test() { 

    this.value = ''; 

} 

Test.prototype = { 

    // Loader 
    init: function(options) { 

     // Set value 
     this.value = options.value; 

     // This outputs fine 
     console.log(this.value); 

     // I'll now create a loop using the JQuery "each" function 
     $('li').each(function() { 

      // This fails because "this" has now been overwritten by JQuery inside this function 
      this.format($(this).attr('data-id'), this.value); 

     }); 

    }, 

    // Format output 
    format: function(id, value) { 

     console.log(id + ' : ' + value); 

    } 

}; 

var first = new Test(); 
first.init({ "value" : "a" }); 

var second = new Test(); 
second.init({ "value" : "b" }); 

下面是當它運行時發生的錯誤的例子：

https://jsfiddle.net/8m46u73k/2/

所以兩個問題：

1. 我要對這個正確的方式？
2. 如何在不使用this的情況下訪問函數和變量？

Answer 1

您需要使用this。

要在回調函數使用this，使用bind()迫使功能始終與正確this叫：

function() { this.whatever; }.bind(this); 

Answer 2

var Test = { 
    value: '', // A value 
    init: function(options) { 
    // Set value 
    Test.value = options.value; 
    } 
}; 

上面的是不是一類。它是一個對象字面值，它更類似於一個類的實例。

這是一類：

function Test(value) { 
    this.value = value; 
} 
var test = new Test(); 

這是在原型，使他們不被複制每次你做它的一個新的實例時方法的類。

function Car(value) { 
    this.value = value; 
} 
Car.prototype.honkHorn = function() { 
    conosle.log("HONK: " + this.value); 
}; 

var car = new Car("I am a car!"); 
car.honkHorn(); // writes "HONK: I am a car!" to the console.