JS中【对象】知识点总结

JavaScript中的对象是一种复合值：它可以存储多个键值对，并且可以包含各种类型的数据和复杂的结构。对象在JavaScript中非常重要，几乎所有的数据类型都可以通过对象来表示。以下是关于JavaScript对象的详细讲解：

1. 对象的创建

对象字面量

对象字面量是创建对象最常见的方式，通过花括号 {} 和键值对的方式定义对象的属性和方法。

const person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log('Hello!');
  }
};

使用构造函数

可以使用构造函数和 new 关键字创建对象，构造函数可以带有参数，用来初始化对象的属性。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const john = new Person('John', 30);

使用Object.create()

Object.create() 方法基于指定的原型对象创建一个新对象。

const proto = { greet: function() { console.log('Hello!'); } };
const obj = Object.create(proto);

2. 对象的属性和方法

属性的定义

对象的属性可以是数据属性或访问器属性。

• 数据属性：直接存储一个值的属性。

  const person = {
    name: 'John'
  };
  

• 访问器属性：通过 getter 和 setter 函数来进行属性值的获取和设置。

  const person = {
    firstName: 'John',
    lastName: 'Doe',
    get fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
    set fullName(name) {
      const parts = name.split(' ');
      this.firstName = parts[0];
      this.lastName = parts[1];
    }
  };
  

方法

对象中的函数称为方法，可以通过对象来调用。

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

person.greet(); // Hello, John!

3. 原型和原型链

原型

每个JavaScript对象都有一个原型对象（prototype），它可以是另一个对象或者 null。

• 原型对象：对象的原型可以包含属性和方法，它可以被对象实例共享。

  function Person(name) {
    this.name = name;
  }
  
  Person.prototype.greet = function() {
    console.log(`Hello, ${this.name}!`);
  };
  
  const john = new Person('John');
  john.greet(); // Hello, John!
  

原型链

原型链是JavaScript中对象之间的链接关系，每个对象都有一个原型，通过原型链可以访问到继承自原型对象的属性和方法。

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a noise.`);
};

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

const dog = new Dog('Rex');
dog.speak(); // Rex makes a noise.

4. 对象的操作

属性的访问和修改

可以使用点运算符或者方括号来访问和修改对象的属性。

const person = { name: 'John' };
console.log(person.name); // John
person.name = 'Doe';
console.log(person.name); // Doe

属性的删除和检查

使用 delete 操作符可以删除对象的属性，使用 in 操作符可以检查对象是否包含某个属性。

delete person.name;
console.log('name' in person); // false

5. 对象的遍历

for...in 循环

for...in 循环可以遍历对象的可枚举属性（包括继承的）。

const person = {
  name: 'John',
  age: 30
};

for (let key in person) {
  console.log(key, person[key]);
}
// Output:
// name John
// age 30

Object.keys()、Object.values() 和 Object.entries()

这些方法可以分别获取对象的键、值和键值对数组。

const keys = Object.keys(person); // ['name', 'age']
const values = Object.values(person); // ['John', 30]
const entries = Object.entries(person); // [['name', 'John'], ['age', 30]]

6. 对象的扩展与合并

Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，并返回目标对象。

const target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }

展开运算符（Spread Operator）

展开运算符可以用来复制对象或者合并对象。

const person = { name: 'John', age: 30 };
const copy = { ...person }; // { name: 'John', age: 30 }

7. ES6 类

ES6 引入了类（class）语法，它是基于原型的面向对象编程的语法糖。

class Person {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

const john = new Person('John');
john.greet(); // Hello, John!

以上是关于JavaScript中对象的主要知识点和使用技巧。对象是JavaScript编程中非常基础和重要的概念，理解它们的原理和使用方式对于编写复杂的JavaScript程序至关重要。