JavaScript 原型：深入理解构造函数和原型继承

2023-12-12 11:06:54

JavaScript 原型：深入理解构造函数和原型继承

茫茫 JavaScript 世界中，原型（prototype）无疑是一个神秘而令人着迷的概念。它就像是一个隐藏在幕后的操控者，默默地影响着 JavaScript 对象的行为。如果你想成为一名合格的 JavaScript 开发者，那么你必须对原型有着深入的了解。

什么是原型？

在 JavaScript 中，每个可构造函数（constructor function）都会默认创建一个原型对象（prototype object）。原型对象是该函数的所有实例共享的一组属性和方法。我们可以通过以下方式访问原型对象：

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

const person = new Person('John');

console.log(person.prototype); // Person.prototype

在上面的代码中，Person.prototype就是Person函数的原型对象。它包含了一个名为name的属性，该属性保存着该实例的名称。

构造函数和原型继承

当我们使用new运算符创建了一个对象时，JavaScript 会自动将该对象的原型设置为构造函数的原型对象。这意味着该对象将继承原型对象的所有属性和方法。

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

const person = new Person('John');

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

在上面的代码中，Person.prototype.greet是一个方法，它允许Person函数的所有实例使用greet()方法来向世界打招呼。

**this **

this关键字是一个非常重要的概念，它在原型继承中扮演着重要的角色。this关键字指向当前正在执行的函数的调用者。在构造函数中，this指向新创建的对象。在实例方法中，this指向调用该方法的对象。

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

const person = new Person('John');

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

在上面的代码中，this.name指向当前正在执行的函数的调用者的name属性。在greet()方法中，this.name指向调用该方法的对象的name属性。

原型链

原型链（prototype chain）是一个非常重要的概念，它是 JavaScript 对象继承的基础。原型链是指一个对象沿着其原型一直向上追溯的原型对象组成的链条。

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

const person = new Person('John');

console.log(person.__proto__); // Person.prototype
console.log(Person.prototype.__proto__); // Object.prototype
console.log(Object.prototype.__proto__); // null

在上面的代码中，person.__proto__指向Person.prototype，Person.prototype.__proto__指向Object.prototype，Object.prototype.__proto__指向null。这意味着person可以访问Person.prototype的所有属性和方法，Person.prototype可以访问Object.prototype的所有属性和方法，Object.prototype可以访问null的所有属性和方法。