关于程序员:JavaScript原型原型对象原型链系列详解三

4次阅读

共计 2580 个字符，预计需要花费 7 分钟才能阅读完成。

在 JavaScript 中，对象之间的继承是通过原型链来实现的。每个对象都有一个指向原型对象的外部链接，也就是 [[Prototype]] 属性。这个链接的作用是如果对象自身没有某个属性或办法，就会去它的原型对象上找，如果还没有，就会去原型对象的原型对象上找，以此类推，直到找到为止。这就造成了原型链。

在 JavaScript 中，咱们能够通过构造函数来创立一个对象，每个构造函数都有一个 prototype 属性，它指向一个对象，这个对象就是新对象的原型对象。通过 new 关键字调用构造函数时，会创立一个新的对象，并将它的原型对象指向构造函数的 prototype 属性所指向的对象。

上面是一个例子：

// 定义一个构造函数
function Person(name) {this.name = name;}

// 定义构造函数的原型对象
Person.prototype.sayHello = function() {console.log(`Hello, my name is ${this.name}`);
};

// 创立一个对象
const person = new Person('John');

// 调用对象的办法
person.sayHello(); // 输入 "Hello, my name is John"

在这个例子中，Person 构造函数有一个 prototype 属性，指向一个对象，这个对象有一个 sayHello 办法。当咱们通过 new 关键字调用 Person 构造函数时，会创立一个新对象 person，并将它的原型对象指向 Person.prototype 所指向的对象。

因而，当咱们调用 person.sayHello() 办法时，JavaScript 引擎会首先查找 person 对象自身是否有 sayHello 办法，如果没有，就会去它的原型对象 Person.prototype 上查找，如果还没有，就会去 Person.prototype 的原型对象 Object.prototype 上查找，以此类推，直到找到为止。

上面是一个原型链的示意图：

        +-------------+
        |   Object    |
        +-------------+
               ^
               |
        +-------------+
        |  Prototype  |
        +-------------+
               ^
               |
        +-------------+
        |  Prototype  |
        +-------------+
               ^
               |
        +-------------+
        |  Prototype  |
        +-------------+
               ^
               |
        +-------------+
        |   Person    |
        +-------------+
               ^
               |
        +-------------+
        |  Prototype  |
        +-------------+
               ^
               |
        +-------------+
        |  Prototype  |
        +-------------+
               ^
               |
           +-------+
           |  john |
           +-------+

以上代码示例展现了一个简略的原型链，其中：

Object 是所有对象的基类，也是原型链的终点；
每个对象都有一个 Prototype 属性，指向它的原型对象；
原型对象也有一个 Prototype 属性，指向它的原型对象；
原型对象最终指向 Object.prototype；
通过原型链的形式，子类能够拜访父类原型上的属性和办法；
在上述示例中，john 对象通过原型链能够拜访到 Person.prototype 和 Object.prototype 上的属性和办法。

接下来咱们来看一个理论的例子，更好地了解原型链的实现。

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

Person.prototype.sayHello = function() {console.log("Hello, my name is" + this.name);
};

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

// 设置 Student 的原型对象为 Person 的实例
Student.prototype = new Person();

Student.prototype.sayMajor = function() {console.log("My major is" + this.major);
};

var student1 = new Student("Alice", "Mathematics");

student1.sayHello(); // "Hello, my name is Alice"
student1.sayMajor(); // "My major is Mathematics"

在这个例子中，咱们定义了 Person 和 Student 两个构造函数，并且让 Student 的原型对象指向 Person 的一个实例。这个实例就形成了一个原型链，它蕴含了 Student.prototype、Person.prototype 和 Object.prototype 三个节点，形成了一个链式构造。

当咱们调用 student1.sayHello() 办法时，JavaScript 引擎首先在 student1 实例中查找 sayHello() 办法，发现没有找到，于是它持续在 Student.prototype 中查找，依然没有找到，接着在 Person.prototype 中查找，这次找到了 sayHello() 办法并调用。当调用完 sayHello() 办法后，程序继续执行 student1.sayMajor() 办法，这次 JavaScript 引擎会在 student1 实例中查找 sayMajor() 办法，没有找到，接着在 Student.prototype 中查找，找到了 sayMajor() 办法并调用。

这个例子展现了原型链的理论利用，通过原型链，咱们能够在子类中拜访父类的属性和办法，并且能够在子类中扩大新的属性和办法。原型链也是 JavaScript 中继承的根底实现机制之一。

最初再给出一个简略的总结：原型链是由原型对象形成的链式构造，JavaScript 引擎在查找属性或办法时会沿着原型链逐级查找，直到找到或者查找到顶层为止。

为不便宽广前端技术爱好者，整合了前端技术相干常识和资源，且有很多福利能够支付：Gitee

如有转载需要，请分割：Gitee

本文由 mdnice 多平台公布

正文完