返回

原型与原型链的知识剖析:解密JavaScript中的继承之谜

前端

导言

在JavaScript这个充满魔力的世界中,原型和原型链扮演着至关重要的角色,它们如同看不见的丝线,将一个个对象巧妙地串联起来,构建出一个错综复杂但又井然有序的对象网络。理解原型和原型链,不仅能让我们更好地理解JavaScript的继承机制,更能提升我们对对象关系的掌控能力。

原型的奥秘

原型是每个构造函数的内建属性,它指向一个对象,这个对象被称为该构造函数的原型对象。当我们使用new创建新对象时,该对象会自动继承构造函数的原型对象中的属性和方法。

例如:

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

const person1 = new Person('John');
console.log(person1.name); // 'John'
console.log(person1.__proto__ === Person.prototype); // true

Person.prototype就是Person构造函数的原型对象,person1继承了Person.prototype中的name属性。

原型链的探秘

原型链是一个对象到其原型对象(再到其原型对象的原型对象...)构成的链式结构。当我们访问一个对象的属性时,JavaScript会沿原型链向上查找,直到找到该属性或达到null

例如:

function Employee(name, salary) {
  this.name = name;
  this.salary = salary;
}

Employee.prototype.getBonus = function() {
  return this.salary * 0.1;
};

const employee1 = new Employee('John', 10000);
console.log(employee1.getBonus()); // 1000
console.log(employee1.__proto__ === Employee.prototype); // true
console.log(Employee.prototype.__proto__ === Object.prototype); // true

employee1继承了Employee.prototype中的getBonus方法,而Employee.prototype又继承了Object.prototype中的通用方法。因此,原型链形成了employee1 -> Employee.prototype -> Object.prototype的链式结构。

继承的实现

JavaScript中实现了两种继承方式:原型继承和ES6 class继承。

原型继承 是通过设置子构造函数的原型对象为父构造函数的实例对象来实现的。

function Parent() {}

function Child() {}
Child.prototype = new Parent();

ES6 class继承 是通过extends关键字实现的。

class Parent {}

class Child extends Parent {}

掌握精髓

理解原型和原型链的关键在于:

  • 每个对象都有一个原型,指向其构造函数的原型对象。
  • 原型链向上查找属性,直到找到或达到null
  • JavaScript中实现了原型继承和ES6 class继承。

掌握这些知识,我们将能够熟练地创建和操作JavaScript中的对象,让我们的代码更加优雅和高效。

结言

原型和原型链是JavaScript中不可或缺的概念,它们为对象提供了继承和共享属性的机制。通过深入理解这些知识,我们可以更好地掌握JavaScript的奥妙,写出更具可扩展性、可维护性的代码。在实践中,灵活运用原型和原型链,将帮助我们打造出更出色的应用程序。