Javascript 类中的实例变量答案

【问题标题】：Instance Variables in Javascript ClassesJavascript 类中的实例变量
【发布时间】：2017-04-01 04:21:49
【问题描述】：

我主要使用 PHP 和 Java 编写代码，但偶尔也会在项目的前端工作并使用 JavaScript。我通常创建与下面不同的对象，但我遇到了这个，它引起了我的兴趣，因为语法与我通常编程的相似。

我四处寻找，试图弄清楚如何使用下面的语法在 JavaScript 类中使用实例变量。我尝试通过name;、_name;、var name; 或所有这些以前的变量声明实例变量并添加= null;，但我的控制台中仍然出现错误。错误大多是my-file.js:2 Uncaught SyntaxError: Unexpected identifier。我只是想通过我的构造函数设置我的实例变量。

如何使用下面的语法在 JavaScript 中使用实例变量？

class MyClass {
  var _name;

  constructor(name) {
    _name = name;
    alert("Hello world, from OO JS!");
    this.myFunction();
  }

  myFunction() {
    document.getElementById("myElement").addEventListener("click", function() {
        console.log("Ant's function runs. Hello!");
    });
  }
}

window.onload = function() {
  var person = "John Smith";
  var myClass = new MyClass(person);
}

【问题讨论】：

使用this关键字：this._name = name;
你没有声明属性；只需设置this._name = name;。
@Ryan 然后我将如何访问事件侦听器中的实例变量？ this._name 只会产生 undefined。

标签： javascript class oop constructor instance-variables

【解决方案1】：

这仍然是proposal，它看起来如下：

class A {
   property = "value";
}

顺便说一句，当您想要访问类属性（即自己的对象属性）时，您仍然需要使用this.property：

class A {
    property = "value";

    constructor() {
        console.log(this.property);
    }
}

如果您现在想使用这种语法，您需要使用像 Babel 这样的转译器。

【讨论】：

【解决方案2】：

你不声明属性；只需设置this._name = name。

@Ryan 然后我将如何访问事件侦听器中的实例变量？ this._name 只会产生 undefined。

每个函数调用* 都使用自己的this 运行；你的事件监听器是一个函数。您可以在事件侦听器外部分配var that = this;，并在其中访问that：

myFunction() {
  var that = this;

  document.getElementById("myElement").addEventListener("click", function() {
    console.log(that._name);
  });
}

或者创建一个新函数，使用Function.prototype.bind 始终使用相同的this 调用您的函数：

myFunction() {
  document.getElementById("myElement").addEventListener("click", function() {
    console.log(this._name);
  }.bind(this));
}

或者使用 ES6 的箭头函数，它们使用定义它们的位置 this 的值（词法 this）：

myFunction() {
  document.getElementById("myElement").addEventListener("click", () => {
    console.log(this._name);
  });
}

【讨论】：

超级有帮助。感谢您的解释。