一文带你纵览JavaScript原型与原型链：面试官必问的重难点

2023-12-05 17:55:57

原型与原型链是 JavaScript 中一个重要的概念，也是面试官经常会问到的重难点。理解它们对于编写出高效、可维护的代码非常重要。

在 ES6 之前，我们创建实例并不是通过类（class），而是直接使用构造函数来实现的。通过 new 函数名 来实例化对象的函数叫做构造函数。构造函数在被调用时会创建一个新的对象，并把这个对象作为函数的执行上下文。

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

const person1 = new Person('John', 30);
console.log(person1.name); // John
console.log(person1.age); // 30

每个构造函数都有一个 prototype 属性，它指向一个对象。这个对象就是该构造函数的原型对象。原型对象包含着该构造函数的所有实例共有的属性和方法。

console.log(Person.prototype);
// {constructor: ƒ}

每个对象都有一个 __proto__ 属性，它指向该对象的原型对象。

console.log(person1.__proto__);
// {constructor: ƒ}

原型链是指从一个对象沿着 __proto__ 属性向上追溯的链条。它一直追溯到 Object.prototype 对象，Object.prototype 对象是所有对象的根原型对象。

console.log(Object.prototype);
// {}

原型链的存在使得 JavaScript 实现了继承。子构造函数可以通过 prototype 属性继承父构造函数的原型对象，从而继承父构造函数的所有属性和方法。

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

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

const student1 = new Student('Mary', 20, 'A');
console.log(student1.name); // Mary
console.log(student1.age); // 20
console.log(student1.grade); // A

原型与原型链是 JavaScript 中非常重要的概念。理解它们对于编写出高效、可维护的代码非常重要。

代码重用

原型和原型链可以帮助我们实现代码重用。我们可以将公共的属性和方法放在原型对象中，这样所有继承该原型对象的实例都可以使用这些属性和方法。

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

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

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

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

const person1 = new Person('John', 30);
const student1 = new Student('Mary', 20, 'A');

person1.greet(); // Hello, my name is John and I am 30 years old.
student1.greet(); // Hello, my name is Mary and I am 20 years old.