在前端开发中，对象是一个非常重要的概念。对象可以看做是一组属性的集合，这些属性描述了对象的特征和行为。JavaScript中的几乎所有内容都是对象，从简单的字符串和数字到复杂的函数和类。在本文中，我们将深入探讨对象的基础知识，并介绍如何在浏览器中使用watch()方法来监视对象属性的变化。
对象的基础知识
创建对象
在JavaScript中，有多种创建对象的方式。其中一种常见的方式是使用字面量语法：
const person = {
name: 'Alice',
age: 30,
sayHello() {
console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
}
};在上面的例子中，我们创建了一个包含三个属性的对象：name、age和sayHello。注意sayHello()方法的定义方式与普通函数不同，这是因为它是一个对象的方法。
另一种创建对象的方式是使用构造函数。例如，我们可以创建一个Person类：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
---------------- -- ---- -- ------------ --- --- ----------- ----- -------
-
-
----- ----- - --- --------------- ----在上面的例子中，我们使用class语法定义了一个Person类，并通过new关键字创建了一个名为alice的Person对象。
访问属性
一旦我们创建了一个对象，就可以访问它的属性。有两种方式来访问对象属性：
- 使用点符号：
console.log(person.name); // 'Alice' person.age = 31; person.sayHello(); // 'Hi, my name is Alice and I'm 31 years old.'
- 使用方括号和字符串：
console.log(person['name']); // 'Alice' person['age'] = 31; person['sayHello'](); // 'Hi, my name is Alice and I'm 31 years old.'
第二种方法允许我们使用变量来访问属性：
const propName = 'name'; console.log(person[propName]); // 'Alice'
删除属性
要从对象中删除属性，可以使用delete关键字：
delete person.age; console.log(person.age); // undefined
请注意，删除一个不存在的属性不会产生错误：
delete person.height; // 不会产生错误
枚举属性
可以使用for...in循环枚举对象的属性：
for (const propName in person) {
console.log(`${propName}: ${person[propName]}`);
}监视对象属性的变化
在浏览器中，可以使用Object.prototype.watch()和Object.prototype.unwatch()方法来监视对象属性的变化。这些方法已经被标记为废弃，但在某些情况下仍然有用。
watch()
watch()方法接受两个参数：要监视的属性名称和回调函数。每当该属性的值发生变化时，回调函数就会被调用：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
---------- -
---------------- -- ---- -- ------------ --- --- ----------- ----- -------
-
--
------------------- ---------- --------- --------- -- -
------------------------ ------- ---- ----------- -- --------------
---
---------- - --- -- ---------- ------- ---- -- -- ---注意回调函数接收三个参数：属性名称、旧值和新值。
unwatch()
要停止监视属性的变化，可以使用unwatch()方法：
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/10741) ，转载请注明来源 [https://www.javascriptcn.com/post/10741](https://www.javascriptcn.com/post/10741)
