Question

我正在学习es6 js，并找到了一种声明类并使用其方法的方法。

但有一件事令人困惑，我想知道。

class myGender {
 var gender = "male";
 printMyGender(){
  console.log(gender);
 }
}

const gender = new myGender();
gender.printMyGender();

在上面的代码中，我收到错误，为什么我无法在同一个班级和其他场景中访问性别变量

class myGender {
   constructor(){
   this.gender = "male";
   }
   printMyGender(){
   console.log(this.gender);
   }
 }

  const gender = new myGender();
  gender.printMyGender();

这就像魅力一样！。

Answer 1

在javascript中，变量和属性之间存在巨大差异。变量使用var, let, const声明，然后您可以使用赋值运算符（=）为它们赋值。变量是当前范围的一部分（{和}之间的所有内容），它们与对象无关。属性是对象的一部分。它们不会被声明，它们在将值分配给它们之后就存在，直到它们被删除。所以实际上你不需要初始化它们。但是，这可能会导致一些非常有趣的行为：

class Counter {
   increase(){
     this.count += 1;
   }
}

const count = new Counter;
count.increase()
console.log(count.count); //NaN

因此，最好在构造函数中初始化它们：

class Counter {
   constructor(){
     this.count = 0;
   }
   increase(){
     this.count += 1;
   }
}

为了美化这一点并使其更熟悉其他语言的开发人员，对于类属性，有一个提案（可能是未来的功能）：

class Counter {

   count = 0;

   increase(){
     this.count += 1;
   }
}

然而，这只是上面代码的语法糖。

Answer 2

好吧，在es6或es2015中，你必须在构造函数或你创建的任何其他函数中定义变量，并且需要使用this来访问它们，

然而，在即将发布的ecma脚本版本或类似于typescript的语言中，可能允许声明类似外部函数的变量

Answer 3

使用ES6类时，不能使用var，let或const声明变量，但可以定义实例变量和静态变量。

基本的区别在于，不能在类之外访问实例变量而不创建该类的实例，而在静态变量的情况下，您只需通过className.staticVariable访问。

在失败的代码中，它应该是：

class myGender {
 gender;

 constructor() {
  this.gender = "male"; 
 }

 printMyGender(){
  console.log(this.gender);
 }
}

const gender = new myGender();
gender.printMyGender(); // `male`

对于静态变量：

class myGender {
 static gender = "female";

 printMyGender(){
  console.log(this.gender);
 }
}

console.log(myGender.gender); // `female`

ES6中类中的变量和函数声明

3 个答案: