掌握JS对象的用法与原型，探寻复杂数据类型的奥秘

2023-09-26 12:51:40

在JavaScript中，对象是一种复杂的数据类型，可以存储多个键值对，并通过属性和方法来访问和操作数据。对象的使用非常广泛，从简单的用户数据到复杂的数据结构，都能通过对象来实现。

对象的两种声明方式

在JavaScript中，有两种声明对象的方式：

对象初始化器方式

const person = {
  name: "John Doe",
  age: 30,
  city: "New York",
};

构造函数方式

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

const person = new Person("John Doe", 30, "New York");

对象的属性和方法

对象的属性是对象中存储的数据，可以通过点号(.)或方括号([])来访问。对象的方法是对象中定义的函数，可以通过点号(.)或方括号([])后跟括号()来调用。

console.log(person.name); // "John Doe"
console.log(person["age"]); // 30

person.greet(); // "Hello, my name is John Doe."

对象的原型

在JavaScript中，每个对象都有一个原型，原型是一个特殊的对象，它存储着对象的共有属性和方法。当访问一个对象的属性或方法时，JavaScript会先在该对象中查找，如果找不到，就会在对象的原型中查找。

console.log(person.toString()); // "[object Object]"

// Object.prototype.toString()

删除对象的属性

可以使用delete操作符来删除对象的属性。

delete person.age;
console.log(person.age); // undefined

对象的继承

JavaScript中的对象支持继承，这意味着一个对象可以继承另一个对象的属性和方法。

function Student(name, age, city, major) {
  Person.call(this, name, age, city);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);

const student = new Student("Jane Doe", 25, "Boston", "Computer Science");

console.log(student.name); // "Jane Doe"
console.log(student.age); // 25
console.log(student.city); // "Boston"
console.log(student.major); // "Computer Science"

实例：几个实例明白JS对象用法与原型

1. 简单对象

const person = {
  name: "John Doe",
  age: 30,
  city: "New York",
};

2. 对象的属性和方法

console.log(person.name); // "John Doe"
console.log(person["age"]); // 30

person.greet(); // "Hello, my name is John Doe."

3. 对象的原型

console.log(person.toString()); // "[object Object]"

// Object.prototype.toString()

4. 删除对象的属性

delete person.age;
console.log(person.age); // undefined

5. 对象的继承

function Student(name, age, city, major) {
  Person.call(this, name, age, city);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);

const student = new Student("Jane Doe", 25, "Boston", "Computer Science");

console.log(student.name); // "Jane Doe"
console.log(student.age); // 25
console.log(student.city); // "Boston"
console.log(student.major); // "Computer Science"