JavaScript 是一种以对象为基础的编程语言，操作数据时，实际都是在处理对象。可以使用简单的数据类型（如字符串、数字和布尔值）来实现一些功能，但深入了解 JavaScript 对象的运作，将使你能够编写更强大和灵活的代码。
对象基础
JavaScript 中，对象是由一组键（或属性）和值组成的无序集合。每个键值对都可以被视为一个属性，键是字符串，而值可以是任意数据类型，包括其他对象、函数、数组等。
创建对象
有几种方法可以创建 JavaScript 对象：
使用对象字面量
这是最简单和常用的方式来创建对象。通过花括号 {} 来包含属性。
const person = {
name: 'Xianyu',
age: 23,
job: 'Student'
};
console.log(person);使用 new Object()
可以使用构造函数 Object 来创建一个空对象。
const person = new Object();
person.name = 'Xianyu';
person.age = 23;
person.job = 'Student';
console.log(person);使用构造函数
定义构造函数并通过 new 关键字创建对象实例。
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
}
const alice = new Person('Xianyu', 23, 'Student');
console.log(Xianyu);使用 Object.create()
使用 Object.create() 方法创建一个对象，直接指定其原型。
const personPrototype = {
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
const john = Object.create(personPrototype);
john.name = 'Xianyu';
john.age = 23;
john.greet(); // 输出: Hello, my name is Xianyu对象属性和方法
属性是对象的关键组成部分，方法则是对象的属性但其值是一个函数。通过使用 . 或 [] 可以访问这些属性和方法。
点表示法和括号表示法
在 JavaScript 中，访问对象的属性和方法有两个主要的方式：点表示法和括号表示法。这两种方式各有优缺点，在不同的场景中可以灵活使用。
点表示法
点表示法是最常用的访问对象属性的方法。在这种方式中，你可以通过对象的名称，后面跟一个点，随后是你想要访问的属性名或方法名。这种方式的语法简单明了，易于阅读。
const person = {
name: 'Xianyu',
age: 23,
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
console.log(person.name); // 输出: Xianyu
console.log(person.age); // 输出: 23
person.greet(); // 输出: Hello, my name is Xianyu例子中对象 person 有两个属性 name 和 age，以及一个方法 greet。通过点表示法成功访问了这些属性和方法。需要注意的是，点表示法的属性名必须是有效的标识符（identifier）。其他情况下，例如属性名中包含空格或特殊字符，就不能使用点表示法。
括号表示法
括号表示法在处理属性名包含特殊字符或空格时非常有用。你可以在方括号中放入属性名，并且属性名必须用引号（单引号或双引号）括起来。
const person = {
'first name': 'Xianyu',
age: 23,
greet: function() {
console.log(`Hello, my name is ${this['first name']}`);
}
};
console.log(person['first name']); // 输出: Xianyu
console.log(person['age']); // 输出: 23
person.greet(); // 输出: Hello, my name is Xianyu此例中属性 'first name' 由于包含空格，使用了括号表示法。而括号表示法的另一个优势在于，你可以使用变量作为属性名，使得动态属性访问成为可能：
const propertyName = 'age';
console.log(person[propertyName]); // 输出: 23例子里通过将变量 propertyName 的值设为字符串 'age'，能够动态地访问对象 person 的属性。
点表示法更为简洁且易于书写，适合大多数情况下的属性访问，而括号表示法则提供了更大的灵活性，尤其是在处理动态属性或复杂属性名时。通过理解这两种访问方式的差异，开发者可以更有效地操作对象，从而编写出更清晰、可维护的代码。
设置对象成员
我们可以通过多种方式为对象添加、更新或删除属性。这些操作可以帮助我们动态管理对象的数据。下面详细介绍这些操作，包括添加属性、更新属性和删除属性。
添加属性
要为对象添加新属性，可以直接通过赋值的方式来完成。只需指定对象名、接着是点表示法或括号表示法，以及要添加的属性名，然后给它赋一个值。以下是一个示例：
const person = {
name: 'Xianyu',
age: 30
};
// 新增一个属性 'job'
person.job = 'Student';
console.log(person.job); // 输出: Student为对象 person 添加了一个属性 job，并赋值为 'Student'。你可以看到，新增的属性可以随时访问并且有效。
更新属性
对于已经存在的属性，我们可以通过简单地赋新值来更新它。要更新现有属性，同样可以使用点表示法或括号表示法进行操作：
// 更新 'age' 属性的值
person.age = 25;
console.log(person.age); // 输出: 25更新了 person 对象中age 属性的值，将其从 23 修改为 25。
删除属性
在某些情况下，可能需要删除对象的某个属性。可以使用 delete 运算符来实现这一点。这个运算符会删除指定对象上所有的属性，如果属性存在，删除后将返回 undefined。
// 删除 'job' 属性
delete person.job;
console.log(person.job); // 输出: undefined我们使用 delete 来移除 person 对象的 job 属性。删除后，任何对该属性的访问将返回 undefined，表示该属性不再存在于对象中。
可以看到，JavaScript 允许我们通过直观简便的方式来管理对象的属性。新属性可以很容易地添加，现有属性可以轻松更新，甚至可以根据需求删除。这种灵活性使得在应用程序中动态管理对象的状态变得非常简单有效。
“this”的含义
关键字 this 是一个非常重要的概念，它代表当前执行代码的上下文或对象。this 的具体值取决于函数被调用时的环境和上下文，使其在不同情况下具有不同的含义。以下是 this 的几个关键应用场景。
全局上下文中的 this
全局上下文指的是没有任何函数封闭的代码块。在这个上下文中（尤其是在非严格模式下），this 的值指向全局对象。在浏览器中，这个全局对象是 window。
console.log(this === window); // 输出: true如上在全局范围内，this 的值确实指向 window，这意味着通过 this 关键字，可以访问全局作用域的变量和函数。
对象方法中的 this
当 this 在对象的方法中使用时，它指向调用该方法的对象。这使得方法可以访问对象的其他属性和方法，保持对象的上下文。
const person = {
name: 'Xianyu',
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
person.greet(); // 输出: Hello, my name is Xianyugreet 方法被定义在 person 对象中。调用 person.greet() 时，this 指向 person，因此能正确访问 person 的 name 属性，输出 "Hello, my name is Xianyu"。
构造函数中的 this
构造函数中this 指向正在被创建的新对象的实例。当我们使用 new 关键字来调用构造函数时，this 会指向那个新创建的对象。
function Person(name) {
this.name = name; // `this` 指向新创建的对象
}
const alice = new Person('Xianyu');
console.log(alice.name); // 输出: XianyuPerson 是一个构造函数。使用 new Person('Xianyu') 创建新对象 alice 时，this 就指向这个新的对象实例，并将 name 属性设
其他上下文中的 this
this 关键字的行为可能会更加复杂，尤其是在事件处理、回调函数或使用 setTimeout 之类的异步调用中。以下是一些常见的说明：
- 事件处理器中的
this：当this被使用在事件处理器中时，通常指向触发事件的元素。
const button = document.createElement('button');
button.textContent = 'Click Me';
button.addEventListener('click', function() {
console.log(this.textContent); // 输出: Click Me
});
document.body.appendChild(button);- 使用箭头函数：箭头函数不会创建自己的
this 绑定，而是捕获封闭上下文的 this 值，因此，箭头函数中的 this 是父作用域的 this。
const person = {
name: 'Xianyu',
greet: function() {
const innerGreet = () => {
console.log(`Hello, my name is ${this.name}`);
};
innerGreet();
}
};
person.greet(); // 输出: Hello, my name is Xianyu构造函数介绍
构造函数是用于创建对象的特殊类型的函数。它们的命名约定是以大写字母开头，并通过 new 关键字调用。
定义构造函数
function Car(make, model) {
this.make = make;
this.model = model;
}
const myCar = new Car('Hong Qi', 'E-HS9');
console.log(myCar.make); // Hong Qi原型对象
在构造函数中，可以使用 prototype 属性定义共享的方法。
Car.prototype.start = function() {
console.log(`Starting the ${this.make} ${this.model}`);
};
myCar.start(); // Starting the Hong Qi E-HS9继承
通过原型链，可以实现简单的继承。
function ElectricCar(make, model, battery) {
Car.call(this, make, model); // 调用父构造函数
this.battery = battery;
}
ElectricCar.prototype = Object.create(Car.prototype);
ElectricCar.prototype.constructor = ElectricCar;
const myElectricCar = new ElectricCar('Tesla', 'Model S', '100kWh');
console.log(myElectricCar); // ElectricCar {make: 'Tesla', model: 'Model S', battery: '100kWh'}
myElectricCar.start(); // Starting the Tesla Model S使用对象总结
可以看到JavaScript 对象不仅是数据的集合，还能够提供更灵活的方式来处理数据和行为。日常开发中无时无刻不在使用对象——无论是原生的对象，还是通过构造函数和原型创建的对象。
对象在 JavaScript 生态中的重要性
- 封装：对象可以将数据和操作封装在一起，使代码更具组织性。
- 复用：通过构造函数和原型方法，能够创建多个对象实例，减少重复代码。
- 联机性：可以通过添加方法和属性轻松扩展对象。
日常开发中的对象操作
JavaScript 开发中，对象常用于以下场景：
- API 请求：响应数据通常以对象形式返回。
- 事件处理：事件回调中的
event 对象包含事件相关的信息。 - 状态管理：使用对象对应用不同状态进行管理，状态管理库（如 Redux）背后核心思想。
如有表述错误及不足之处还望各位佬指正补充。
标签：Web,console,name,对象,前端,JavaScript,person,log,属性 From： https://blog.csdn.net/LEECOO666/article/details/143191752