javascript 如何在es6类中做`var self = this`?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32583345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 15:29:51  来源:igfitidea点击:

how to do `var self = this` inside es6 class?

javascriptecmascript-6

提问by intekhab

I am running the below code in nodejs

我在 nodejs 中运行以下代码

this.x = 'global x';
class Point {
    constructor(x) {
        this.x = x;
    }
    toString() {
        return this.x;
    }
}
var obj = new Point(1);
obj.toString();// 1 as expected
var a = obj.toString;// Here I can do something like var a = obj.toString.bind(obj); to get rid of the situation. But I am curious to know how can we write `var self = this`;
a();// TypeError: Cannot read property 'x' of undefined

a();throws the error.
How can we do like var self = this;as we used to do in es5to prevent such a situation?

a();抛出错误。
我们怎样才能像var self = this;过去那样es5防止这种情况发生?

采纳答案by Bergi

How can we do like var self = this;as we used to do in ES5?

我们如何才能像var self = this;以前在 ES5 中那样做?

You can do it exactly like you did in ES5 - ES6 is completely backward-compatible after all:

你可以像在 ES5 中那样做——毕竟 ES6 是完全向后兼容的:

class Point {
    constructor(x) {
        this.x = x;
        var self = this;
        this.toString = function() {
            return self.x;
        };
    }
}

However, that's really not idiomatic ES6 (not talking about constinstead of var). You'd rather use an arrow function that has a lexical-scoped this, so that you can avoid this selfvariable completely:

然而,这真的不是惯用的 ES6(不是在谈论const而不是var)。您宁愿使用具有词法作用域的箭头函数this,这样您就可以self完全避免使用此变量:

class Point {
    constructor(x) {
        this.x = x;
        this.toString = () => {
            return this.x;
        };
    }
}

(which could even be shortened to this.toString = () => this.x;)

(甚至可以缩短为this.toString = () => this.x;

回答by Richard

If you don't want to create all your class methods inside the constructor as Bergi suggests (which seems ugly to me) then you can enable ES7 featuresand define your method using arrow syntax:

如果您不想像 Bergi 建议的那样在构造函数中创建所有类方法(这对我来说似乎很难看),那么您可以启用 ES7 功能并使用箭头语法定义您的方法:

class Point 
{
    constructor(x) 
    {
        this.x = x;
    }

    toString = () =>  
    {
        return this.x;
    }
} 

This has the same effect as saying:

这与说的效果相同:

constructor(x)
{
    this.toString = this.toString.bind(this);
}

But it still doesn't allow you to access the dynamic thisand the lexical this(self) in the same function. So this is nota complete answer.

但是它仍然不允许您在同一个函数中访问动态this和词法this( self)。所以这不是一个完整的答案。

I hope someone can edit this answer to show how we can access both types of thisin a class method without defining every method in the class constructor.

我希望有人可以编辑这个答案来展示我们如何可以访问这两种类型的这个类中的方法,无需在类的构造函数定义的所有方法。