Question

我很难理解在类中如何使用此关键字。

例如，我有一个具有此类方法的类（如果此方法分类为ES7语法）

class something {

 methodA = () => {
 this.something = "Hey"
 }

 methodB = () => {
 this.something = "Yo"
 }
}

[问题] 这将是有效的语法吗？通常，我见过人们在构造函数中声明大多数内容，但是还是ES6，因此他们需要在构造函数中使用this.count = 0;之类的东西……

class Clicker {
  constructor(element) {
    this.count = 0;
    this.elem = element;
    this.elem.addEventListener('click', this.click);

    // logs Clicker { count:0, elem: button#thing} as expected
    console.log(this);
  }

  click= () => {

    console.log(this);
    this.count++;
  }

这个问题的答案对我没有太大帮助"This" within es6 class method

如果在使用此关键字时我的上面的（类问题）错误，有人可以在ES7的类方法内分享有关使用此关键字的任何有趣的文章

Answer 1

您在第一个代码段中使用的语法是类字段，您可以为此指定任何值

class Foo {
    value = 3;
}

几乎等同于

class Foo {
    constructor() {
        this.value = 3;
    }
}

此语法尚未正式发布，但尚处于第3阶段，这意味着它最终可能会包含在该语言中。 https://github.com/tc39/proposal-class-fields

在某些代码库中，借助一些转换工具将其转换为最新的JavaScript到更受支持的javascript（ES 5）

静态属性的一个有趣之处是，您可以使用它来替换方法以更好地处理此问题：

class Foo {
    someMethod = () => {
        console.log(this);
    };
}

与

相似

class Foo {
    constructor() {
        this.someMethod = () => console.log(this);
    }
}

类似于（由于箭头与此相关的作用）

：

class Foo {
    constructor() {
        const method = console.log(this);
        this.someMethod = method.bind(this);
    }
}

这意味着您每次使用该方法时，都将绑定到该方法，并且将引用该实例，而不取决于您如何调用它。

有关此行为在js中的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

在ES7的类方法内部使用此关键字

1 个答案: