深入理解JavaScript中的对象

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

深入理解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版)

本文标题为:深入理解JavaScript中的对象

基础教程推荐