JavaScript类表示法和'this'关键字

Question

我知道在这个主题上还有其他一些问题，但是他们似乎都没有给出确凿的答案。

我正在构建一个HTML / CSS / JS移动应用程序，并且一直在尝试使用以下样式的符号来定义一些类：

风格A.

var Thing = (function ()
{
    var _instance;

    var _firstName;
    var _lastName;

    function Thing(firstName, lastName)
    {
        _instance = this;

        _firstName = firstName;
        _lastName = lastName;
    }

    Thing.prototype.getMyName = function ()
    {
        return _firstName + " " + _lastName;
    }

    Thing.prototype.speak = function ()
    {
        return ("My name is " + _instance.getMyName());
    }

    return Thing;
}());

这样做的好处是：

• 成员变量是封装的，可以直接引用（例如没有this前缀）。
• 我可以使用_instance变量，因此避免了this身份的歧义。
• 符号相当干净，可读。

我还尝试了以下替代方案：

风格B.

function Thing(firstName, lastName)
{
    this._firstName = firstName;
    this._lastName = lastName;
}

Thing.prototype.getMyName = function()
{
    return this._firstName + " " + this._lastName;
};

Thing.prototype.speak = function()
{
    return "My name is " + this.getMyName();
};

风格C.

class Thing
{
    constructor (firstName, lastName)
    {
        this._firstName = firstName;
        this._lastName = lastName;
    }

    getMyName ()
    {
        return this._firstName + " " + this._lastName;
    }

    speak ()
    {
        return ("My name is " + this.getMyName());
    }
}

但是尽管有这些优点，我发现B和C很难处理，因为this关键字存在问题; 也就是说，根据调用者的上下文， this可以引用类方法中的不同内容。 此外，在这两种情况下，使用我在A中的_instance变量是不可能的，因为所有成员都需要以此为前缀this. 。

但是，正如注释中所指出的， 样式A在创建类的多个实例时不起作用。

什么是写这样的类，但避免问题的最好办法this ？

Answer 1

如果你想避免原型方法与后期绑定this不惜一切代价，你可以使用下面的风格在ES6：

class Thing {
    constructor(firstName, lastName) {
        this.getMyName = () => firstName + " " + lastName;
        this.speak = () => "My name is " + this.getMyName();
    }
}

（你也可以使用一个function的声明，但class都有，它可以防止通话，而利用new自动）

Answer 2

您正在创建一个闭包，然后由Thing构造函数在实例化对象之间共享闭包。 它不会按预期工作。

var elton = new Thing("Elton", "Johnnavartangula");
elton.getMyName(); // <- "Elton Johnnavartangula"
var fenry = new Thing("Fenry", "Honda");
elton.speak(); // <- "My name is Fenry Honda"

在实例化对象之间共享私有部分是另一个主题，可以通过几种方式完成，例如我之前的答案之一

function Source(){
var priv = "secret";
return {gp : function(){return priv},
        sp : function(v){priv = v}
       }
}
sharedProto = Source(); // priv is now under closure to be shared
var p1 = Object.create(sharedProto); // sharedProto becomes o1.__proto__
var p2 = Object.create(sharedProto); // sharedProto becomes o2.__proto__