Question

我主要使用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);
}

Answer 1

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

class A {
   property = "value";
}

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

class A {
    property = "value";

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

如果您今天要使用此语法，则需要使用Babel之类的转录器。

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

或使用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类中的实例变量

2 个答案: