深入理解JavaScript中的对象

什么是JavaScript中的对象

在JavaScript中，对象是一种复合数据类型，可以将它们看作是键值对的集合，其中每个键都是字符串类型，每个值可以是任何数据类型，包括更多的对象。JavaScript中的对象有两种基本类型：内置对象和自定义对象。
内置对象指的是在JavaScript中已经定义好的对象，例如Math、Date、Array和Object等。
自定义对象则是由开发人员定义的对象，可以使用构造函数创建，也可以使用对象字面量创建。

对象字面量

对象字面量是一种创建对象的简便方式，无需构造函数。

let person = {
  name: 'Tom',
  age: 18,
  sayName: function () {
    console.log(this.name);
  }
};
person.sayName(); // 输出Tom

构造函数和原型

使用构造函数创建对象时，每个实例都可以具有自己的属性和方法。然而，这样创建的对象也会存在内存浪费问题，因为每个实例对象都需要拥有它们各自的属性。为了解决这个问题，JavaScript提供了原型机制。
在JavaScript中，每个构造函数都有一个prototype属性，该属性允许向该对象添加属性和方法。通过向原型添加方法和属性，每次创建新的对象时都可以共享这些属性和方法，从而减少内存占用。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function () {
  console.log(this.name);
};
let person1 = new Person('Tom', 18);
let person2 = new Person('Jerry', 19);
person1.sayName(); // 输出Tom
person2.sayName(); // 输出Jerry

继承

JavaScript中的继承是通过原型链来实现的，每个对象都有一个内部指针[[Prototype]]指向其原型对象。

function Person(name) {
  this.name = name;
}
Person.prototype.sayName = function () {
  console.log(this.name);
};
function Student(name, grade) {
  this.name = name;
  this.grade = grade;
}
Student.prototype = new Person();
Student.prototype.sayGrade = function () {
  console.log(this.grade);
};
let student1 = new Student('Tom', 3);
student1.sayName(); // 输出Tom
student1.sayGrade(); // 输出3

在该示例中，Student对象的原型是Person类型的实例，因此Student对象可以继承Person对象的属性和方法。同时，可以将Student对象的属性和方法添加到原型中，这样可以让所有的Student对象都共享这些属性和方法。

ES6中的class

ES6引入了class关键字，用于创建类和对象，使继承更直观。

class Person {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}
class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
  sayGrade() {
    console.log(this.grade);
  }
}
let student1 = new Student('Tom', 3);
student1.sayName(); // 输出Tom
student1.sayGrade(); // 输出3

在该示例中，Person是父类，Student是子类，使用extends关键字继承了Person的属性和方法，使用super关键字调用了父类的构造函数。

结论

JavaScript中的对象是非常重要的概念，理解对象的构造函数、原型和继承等概念是JavaScript开发的关键。
对象字面量和构造函数都可以用来创建对象，前者简单易用，后者可以使用原型机制减少内存占用。
ES6中的class语法糖大大简化了面向对象的编程，使继承更加直观。

参考文献

• MDN | 深入理解JavaScript中的对象和对象模型
• JavaScript高级程序设计（第3版）