理解 ES7 中非对象属性初始化

在 ES7 中，我们可以使用非对象属性初始化来简化代码的书写。这项特性允许我们在类中直接初始化非对象属性，而不需要在构造函数中进行初始化。

什么是非对象属性初始化？

在 ES6 中，我们可以使用类来定义对象，并在构造函数中初始化对象的属性。例如：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

在 ES7 中，我们可以使用非对象属性初始化来初始化非对象属性。例如：

class Person {
  name = '';
  age = 0;
}

这里我们直接在类的内部定义了 name 和 age 属性，并分别赋予了默认值。这样，在创建对象时，这些属性就已经被初始化了。

非对象属性初始化的优点

非对象属性初始化的优点在于简化了代码的书写。我们不需要在构造函数中手动初始化属性，而是直接在类的内部进行初始化。这样，我们的代码就更加简洁易懂。

另外，使用非对象属性初始化还可以避免一些常见的错误。例如，在构造函数中手动初始化属性时，我们可能会忘记初始化某个属性，或者初始化顺序不正确。而使用非对象属性初始化，这些问题就不会出现了。

如何使用非对象属性初始化？

非对象属性初始化可以用于任何非对象属性的初始化。例如，我们可以使用它来初始化数字、字符串、布尔值等。

class Person {
  name = '';
  age = 0;
  isStudent = false;
}

我们还可以使用非对象属性初始化来初始化数组和对象。

// javascriptcn.com 代码示例
class Person {
  name = '';
  age = 0;
  skills = [];
  address = {
    city: '',
    country: ''
  };
}

需要注意的是，非对象属性初始化只能用于类的属性初始化，不能用于方法的定义。例如：

// javascriptcn.com 代码示例
class Person {
  name = '';
  age = 0;

  // 错误示例：不能使用非对象属性初始化来定义方法
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

示例代码

下面是一个使用非对象属性初始化的完整示例代码：

// javascriptcn.com 代码示例
class Person {
  name = '';
  age = 0;
  skills = [];
  address = {
    city: '',
    country: ''
  };

  constructor(name, age, skills, address) {
    this.name = name;
    this.age = age;
    this.skills = skills;
    this.address = address;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

const person = new Person('Tom', 18, ['JavaScript', 'HTML', 'CSS'], { city: 'Shanghai', country: 'China' });
person.sayHello(); // 输出：Hello, my name is Tom, I'm 18 years old.

总结

非对象属性初始化是 ES7 中的一项特性，它可以用于类的属性初始化，可以让我们的代码更加简洁易懂，避免一些常见的错误。在使用时，需要注意它只能用于属性初始化，不能用于方法的定义。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655eb904d2f5e1655d8dd573