使用 JavaScript 新构造函数和"this"冲突

Question

我通常使用这样的简单对象：

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

问题是当我想在页面上多次使用该对象时。它覆盖自身。例如：

Test.init({ "value" : "a" });
// Test.value is now "a"
Test.init({ "value" : "b" });
// Test.value is now "b"

这就是为什么我在 JavaScript 中转向新的构造函数，这样我就可以将构造函数的内容分开。我对 JavaScript 构造函数完全陌生，这是否是正确的方法，我不确定。

我现在已将其设置为像这样运行：

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"

我现在的问题是在构造函数中使用this.value时。

这是我的意思的一个例子。您将看到我在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.