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__