Javascript 类中的实例变量

Question

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

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

如何使用以下语法在 Java脚本中使用实例变量？

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);
}

Answer 1

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

class A {
   property = "value";
}

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

class A {
    property = "value";

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

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

Answer 2

你没有声明属性；只需设置 this._name = name.

@Ryan How would I then access the instance variable in my event listener? this._name just yields undefined.

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

myFunction() {
  var that = this;

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

或者创建一个新函数，它总是使用相同的 this 调用您的函数 Function.prototype.bind:

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);
  });
}

Javascript 类中的实例变量

Instance Variables in Javascript Classes

javascript

oop

constructor

class

instance-variables

Javascript 类 中的实例变量

Instance Variables in Javascript Classes

javascript

oop

constructor

class

instance-variables

Javascript 类中的实例变量