Javascript 属性总结

在 Javascript 语言中，对象、类、元素都有自己的属性。Javascript 是一种非常灵活的语言，声明或创建属性有多种方式，这里整理一下 Javascript 中属性的创建或声明方式。

动态为已有对象添加属性

这里的对象指已经实例化的对象，包括内存对象 Object、函数、元素、全局对象比如 document。为对象添加属性，只要直接赋值就好。

$('#A').property1 = 1; document.property2 = 'hello'; function test() { .... } test.property3 = 'OK'; let obj = { 'property4': 'test-value' }; obj.propterty5 = 'test again';

这样就为这个已经存在的对象添加了一个额外的属性，这个属性值可以在使用中再次修改。但是这个属性只针对这个已经创建的实例对象，如果为对象所属的类都添加属性，该怎么办？

为类添加属性

比如为所有 DIV 元素添加一个新的实例属性，可以使用原型添加。

HTMLDivElement.prototype.property1 = 'world'; console.log($('Div1').prperoty1);

注意原型类不建议添加引用类型的属性，如数组、对象等。否则所有实例对象共享这一个值，这和静态属性没什么两样。静态属性可以直接在类名上添加。

HTMLDivElement.prototype2 = 'OK'; console.log(HTMLDivElement.prototype2);

如果为类添加可以有 getter 和 setter 逻辑的属性，可以用Object.defineProperty或Object.defineProperties方法。

Object.defineProperty(HTMLDivElement.prototype, 'property3', { get() { return this.getAttribute('property3'); }, set(value) { this.setAttribute('property3'); } });

因为必须有一个地方保存这个属性的值，所以用了自定义标签属性。

在 Javascript 中，有一个每一个对象都有的属性，叫hasOwnPrperty，用于判断属性是不是原生属性。

$('#Div1').hasOwnProperty('property3');

Object.defineProperty方法本质是也是为原型添加属性，所以用这个方法添加的属性都不是原生属性，只有在类中定义的属性才是原生属性，

在类中定义属性

在 Javascript 类定义属性的方式也有好几种，先看代码，然后分别解释。

class MyClass { constructor() { this.property1 = 0; MyClass.property4 = 'HELLO'; } get property2() { return this.#property3; } set property2(value) { MyClass.#property5 += 1; this.#property3 = value; } #property3 = ''; static property4 = 'WORLD'; static #property5 = 0; }

各个属性变量的解释如下：

• property1属性在构造器中使用this关键词定义，没有 getter 和 setter 逻辑。
• property2在构造器通过get和set关键词定义，分别有 getter 和 seter 逻辑，但是需要将值保存在某一个地方，这里用了一个私有变量#property3，还记不记得上一节中用的是标签属性。
• property3是私有变量，赋值和使用都必须带符号#，如this.#property3，仅能在定义类的各种逻辑中使用，不能在类定义外使用，包括原型扩展。
• property4是静态变量，须使用类名引用MyElement.property4。
• property5是静态私有变量，也需要使用类型引用MyElement.#property5，而且也仅能类定义的各种逻辑中使用。
• 在类中定义的实例属性均为原生属性，如property1和property2，私有属性访问不到，静态属性不算。

属性名命名规则

其实没什么可重点强调的，跟变量的规则是一样的，只能包含英文字母、数字、下划线_和美元符号$，而且不能以数字开头。更多变量的问题请参照上一篇笔记。

（本文完）