在使用 ES2021 的 Class 进行对象实例化时，有时会遇到 Cannot set property ‘XXX’ of undefined 的错误，这是由于 Class 中的属性未正确初始化所导致的。本文将详细介绍这个问题的原因和解决方法，并提供示例代码以进行演示和实践。
问题原因
在 ES2021 中，我们可以使用 Class 来定义对象的结构和行为，例如：
// javascriptcn.com 代码示例
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHi() {
console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const p = new Person('John', 30);
p.sayHi();在上面的代码中，我们定义了一个 Person 类，该类具有一个构造函数和一个 sayHi 方法。然后我们使用 new 关键字创建了一个 Person 对象，并调用了 sayHi 方法。这段代码可以正常运行，并输出以下结果：
Hi, my name is John and I am 30 years old.
但是，如果我们在定义 Person 类时没有正确初始化它的属性，就会出现 Cannot set property ‘XXX’ of undefined 的错误，例如：
// javascriptcn.com 代码示例
class Person {
constructor(name, age) {
name = name;
age = age;
}
sayHi() {
console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const p = new Person('John', 30);
p.sayHi();在上面的代码中，我们没有使用 this 关键字来初始化 name 和 age 属性，而是直接将参数赋值给了本地变量。这会导致在调用 sayHi 方法时出现 Cannot set property ‘name’ of undefined 的错误，因为 name 属性未被正确初始化。
解决方法
要解决这个问题，我们需要在构造函数中使用 this 关键字来初始化 Class 的属性。例如：
// javascriptcn.com 代码示例
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHi() {
console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const p = new Person('John', 30);
p.sayHi();在上面的代码中，我们使用 this 关键字来初始化 name 和 age 属性，这样在调用 sayHi 方法时就不会出现 Cannot set property ‘name’ of undefined 的错误。
除了使用 this 关键字来初始化属性外，我们还可以使用默认参数来初始化属性。例如：
// javascriptcn.com 代码示例
class Person {
constructor(name = 'Unknown', age = 0) {
this.name = name;
this.age = age;
}
sayHi() {
console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const p1 = new Person();
p1.sayHi(); // Hi, my name is Unknown and I am 0 years old.
const p2 = new Person('John', 30);
p2.sayHi(); // Hi, my name is John and I am 30 years old.在上面的代码中，我们使用了默认参数来初始化 name 和 age 属性，这样在创建对象时如果没有传递参数，就会使用默认值来初始化属性。
总结
在 ES2021 中，使用 Class 进行对象实例化时，必须正确初始化 Class 的属性，否则会出现 Cannot set property ‘XXX’ of undefined 的错误。我们可以使用 this 关键字或默认参数来初始化属性，以确保 Class 的正确运行。
希望本文能够帮助读者解决这个问题，并对 ES2021 的 Class 有更深入的理解和掌握。以下是完整的示例代码：
// javascriptcn.com 代码示例
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHi() {
console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const p1 = new Person();
p1.sayHi(); // Hi, my name is undefined and I am undefined years old.
const p2 = new Person('John', 30);
p2.sayHi(); // Hi, my name is John and I am 30 years old.
class Person2 {
constructor(name = 'Unknown', age = 0) {
this.name = name;
this.age = age;
}
sayHi() {
console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const p3 = new Person2();
p3.sayHi(); // Hi, my name is Unknown and I am 0 years old.
const p4 = new Person2('John', 30);
p4.sayHi(); // Hi, my name is John and I am 30 years old.来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6587fa59eb4cecbf2dd28db9