Javascript类中的实例变量

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

这仍然是一项提案,它看起来如下:

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