在 JavaScript 中，类（class）是一种面向对象编程的重要概念。在 ES6 中，引入了类的概念，使得 JavaScript 可以更加方便地进行面向对象编程。而在 ES12 中，类的概念得到了进一步的扩展和完善，其中一个重要的变化就是引入了 class 属性（class fields）的概念。那么，ES12 中的 class 属性和原型对象的区别是什么呢？本文将对这一问题进行详细的介绍和分析。
class 属性和原型对象的概念
在深入了解 class 属性和原型对象的区别之前，我们需要先了解这两个概念的含义。
class 属性
在 ES12 中，class 属性是指类的实例属性，它是在类的内部定义的，而不是在原型对象上定义的。class 属性可以用来定义类的实例属性和类的静态属性。
原型对象
在 JavaScript 中，每个对象都有一个原型对象（prototype）。原型对象是一个普通的对象，它包含了一些属性和方法，这些属性和方法可以被该对象的实例所共享。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 引擎就会去该对象的原型对象中查找，如果原型对象中也没有这个属性或方法，就会继续往上查找，直到找到 Object.prototype，如果还没有找到，就会返回 undefined。
class 属性和原型对象的区别
了解了 class 属性和原型对象的概念之后，我们就可以来看一下它们之间的区别了。
1. 定义位置不同
class 属性是在类的内部定义的，而原型对象是在类的外部定义的。在类的内部，我们可以使用 class 属性来定义类的实例属性和静态属性，而在类的外部，我们可以使用原型对象来定义类的实例方法和静态方法。
2. 访问方式不同
class 属性是可以直接访问的，而原型对象需要通过实例对象来访问。对于类的实例属性和静态属性，我们可以直接通过类名来访问，例如：
// javascriptcn.com 代码示例
class Person {
static count = 0;
name = '';
constructor(name) {
this.name = name;
Person.count++;
}
}
console.log(Person.count); // 0
const p1 = new Person('张三');
console.log(p1.name); // "张三"
console.log(Person.count); // 1
const p2 = new Person('李四');
console.log(p2.name); // "李四"
console.log(Person.count); // 2而对于类的实例方法和静态方法，我们需要先创建类的实例对象，然后通过实例对象来访问，例如：
// javascriptcn.com 代码示例
class Person {
static sayHello() {
console.log('Hello, world!');
}
sayName() {
console.log(`My name is ${this.name}.`);
}
}
Person.sayHello(); // "Hello, world!"
const p = new Person();
p.name = '张三';
p.sayName(); // "My name is 张三."3. 作用范围不同
class 属性只作用于类的实例，而原型对象作用于类的所有实例。对于类的实例属性和静态属性，它们只存在于类的实例中，不会被类的其他实例所共享。而对于类的实例方法和静态方法，它们存在于类的原型对象中，会被所有的类实例所共享。
4. 赋值方式不同
class 属性可以直接赋值，而原型对象需要使用 Object.defineProperty() 或 Object.defineProperties() 方法来赋值。对于 class 属性，我们可以直接在类的内部使用赋值语句来定义，例如：
class Person {
name = '张三';
age = 18;
}而对于原型对象，我们需要使用 Object.defineProperty() 或 Object.defineProperties() 方法来定义，例如：
// javascriptcn.com 代码示例
class Person {}
Object.defineProperty(Person.prototype, 'name', {
value: '张三',
writable: true,
enumerable: true,
configurable: true
});
Object.defineProperty(Person.prototype, 'age', {
value: 18,
writable: true,
enumerable: true,
configurable: true
});总结
在 ES12 中，class 属性和原型对象是两个重要的概念，它们之间有着一些区别。class 属性是在类的内部定义的，可以直接访问，作用于类的实例，可以直接赋值。原型对象是在类的外部定义的，需要通过实例对象来访问，作用于类的所有实例，需要使用 Object.defineProperty() 或 Object.defineProperties() 方法来赋值。了解这些区别可以帮助我们更好地理解和使用类的概念，提高我们的开发效率。
参考链接
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65619ad2d2f5e1655dba3e33