javascript 中 class 有属性后为何不能作为对象赋值

JavaScript中的类（或class）是一种为构建对象和继承功能提供清晰、模板化和可复用的结构的语法糖。在ES6之前，JavaScript通过函数和原型链提供继承的机制。ES6中引入了class关键字，它添加了语法设施来创建对象和处理继承，但它并不是一种新的面向对象继承模型。class中的属性和方法不是直接赋值到对象上，而是存储在原型（prototype）上，在实例化时，通过原型链查找这些属性和方法。这种机制保持了JavaScript原型继承的本质。下面，我们将深入探讨为何class属性不能直接作为对象赋值的JavaScript内在机制。

一、类与构造函数

在ES6之前，我们通常使用构造函数来创建一个对象：

function Person(name) {

  this.name = name;
}
Person.prototype.sayHello = function() {
  return 'Hello, ' + this.name;
};
var person = new Person('Alice');
console.log(person.sayHello()); // 输出：Hello, Alice

这里，Person是一个构造函数，我们通过new关键字创建了一个新对象person。这个对象继承了Person.prototype上的所有属性和方法。

二、原型链

JavaScript中的对象有一个内部链接到另一个对象，即“原型对象”。当我们尝试访问对象的一个属性时，如果该对象本身没有这个属性，JavaScript会沿着原型链向上查找，直到找到该属性或到达原型链的末端。

这意味着类的实例共享其原型对象的属性和方法，而不是在每个实例上单独拥有这些属性和方法。这可以节省内存，因为不需要在每个实例上创建相同的函数。

三、ES6的类语法

ES6引入的类语法实际上是构造函数的语法糖，其背后的继承机制仍然是通过原型链实现的。使用class关键字，上面的例子可以改写为：

class Person {

  constructor(name) {
    this.name = name;
  }
  sayHello() {
    return `Hello, ${this.name}`;
  }
}
const person = new Person('Alice');
console.log(person.sayHello()); // 输出：Hello, Alice

在这里，sayHello方法被添加到了Person的原型上，而不是每个Person实例上。

四、类属性和方法的存储

类中的方法（包括构造函数）都是定义在类的原型对象上的，这对于内存的管理更加高效，因为所有的实例都会共享原型上的方法，而不需要在每个实例创建一个新的函数。

然而，直到ES2022正式引入类字段（Class fields）之前，JavaScript中的类并没有本地的类属性（class-properties）的概念。类字段使得在类定义中直接添加实例属性变得可能，无需在构造器中声明：

class Person {

  name = 'Unnamed'; // 这是一个公共字段
  constructor(name) {
    if (name) {
      this.name = name;
    }
  }
  sayHello() {
    return `Hello, ${this.name}`;
  }
}

类字段会在每个类的新实例被创建时，直接作为实例的属性进行设置。

五、为何属性不能直接赋值为对象

类的属性定义在类的原型上的事实导致了其不能直接作为对象赋值的行为。这是因为，假如属性是引用类型（例如数组、函数、对象等），若多个实例引用了这个同一属性，那么一个实例对该属性的修改将影响所有实例。

这就是为什么在早期JavaScript中，如果你想要一个类的每个实例都有自己的一份属性副本，你需要在构造函数内部设置这些属性，而不是将属性定义在原型上。

然而，随着ES2022及之后的版本，你现在可以在类中直接定义属性，并确保每个实例拥有该属性的不同副本，就如上面的类字段例子所示。不过需要注意的是，类字段的标准是相对较新的，因此在一些较早版本的JavaScript运行环境中可能不被支持。

总之，在ES6引入类之后的版本中，属性的行为更加灵活，但最初的设计是基于原型链继承的机制，这解释了为何在旧版本的JavaScript中属性不能直接作为对象赋值。随着语言的发展，新特性逐渐加入，开发者现在能利用更为直观和功能丰富的方式来定义和管理类的属性。

相关问答FAQs：

为什么javascript中的class属性不能直接作为对象赋值？

在javascript中，class是一种特殊的函数，它被用来创建对象的模板。尽管class本身可以看作是一个对象，但是它并不能像普通的对象那样直接进行赋值操作。

为什么class属性不能被赋值，而只能通过实例化对象进行访问？

在javascript中，class属性定义了该类的所有实例共享的行为和状态，相当于原型对象的属性和方法。因此，class的属性只能通过创建该类的实例对象进行访问，从而实现实例与类之间的属性和方法继承关系。

如何将class的属性赋值给对象？

要将class的属性赋值给对象，需要通过实例化该类来创建对象，并使用this关键字在类的构造函数中定义对象的属性。通过构造函数，可以把class的属性赋值给对象，并在实例化过程中对属性进行初始化操作。这样就可以以对象的形式访问和使用class的属性了。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。