探秘 JavaScript 对象原型的红宝书

2023-09-16 18:55:38

JavaScript 对象原型的内幕

JavaScript 的对象原型是一个非常重要的概念，它决定了对象之间的继承关系，也是面向对象编程的基础。在 JavaScript 中，每个对象都有一个原型，原型对象也是一个对象，它包含了一组属性和方法，这些属性和方法可以被继承到它的子对象中。

构造函数和 new 操作符

在 JavaScript 中，构造函数是一个特殊的函数，它用于创建一个新的对象。当我们使用 new 操作符调用一个构造函数时，会发生以下几个步骤：

创建一个新的对象。
将构造函数的作用域赋值给新的对象（因此 this 就指向了这个对象）。
指向这个构造函数中的代码。
返回了新的对象。

例如，我们有一个 Person 构造函数，如下所示：

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

当我们使用 new 操作符调用 Person 构造函数时，会创建一个新的 Person 对象，并将 name 和 age 属性赋值给这个对象。

const person1 = new Person('John', 30);
const person2 = new Person('Mary', 25);

this 指向

在 JavaScript 中，this 指向当前正在执行的函数所属的对象。在构造函数中，this 指向新创建的对象。因此，我们可以通过 this 来访问和修改新创建的对象的属性和方法。

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

  this.greet = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  };
}

const person1 = new Person('John', 30);
person1.greet(); // Hello, my name is John and I am 30 years old.

继承

在 JavaScript 中，继承是指子对象从父对象继承属性和方法的能力。在 JavaScript 中，继承是通过原型链来实现的。每个对象都有一个原型对象，原型对象也是一个对象，它包含了一组属性和方法，这些属性和方法可以被继承到它的子对象中。

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

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

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

const student1 = new Student('John', 30, 'Computer Science');
student1.greet(); // Hello, my name is John and I am 30 years old.
console.log(student1.major); // Computer Science

在上面的示例中，Student 构造函数继承了 Person 构造函数的属性和方法。当我们创建一个新的 Student 对象时，Student 构造函数会调用 Person 构造函数来初始化 name 和 age 属性。然后，Student 构造函数会将 major 属性赋值给新的 Student 对象。