深入解析JavaScript中的原型继承

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

✨ 前言

原型继承是JavaScript中的一种非常重要的继承方式。理解原型继承对于JavaScript开发非常关键。

本文将详细介绍原型继承的实现原理、使用方式以及优缺点,帮助大家全面理解这一核心知识点。

✨ 正文

原型继承的工作原理

JavaScript对象都有一个内置的__proto__属性,指向创建该对象的构造函数的原型对象prototype。当访问一个对象的属性时,如果这个对象没有该属性,就会继续在__proto__这条原型链上查找,这就是原型继承的工作原理。

举例来说:

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

Animal.prototype.walk = function() {
  console.log(`${this.name} is walking!`);
}

let dog = new Animal('Dog');
dog.walk(); // Dog is walking!

这里dog继承了Animal.prototype上的walk方法。

原型继承的实现

实现原型继承常用的两种模式:

构造函数+原型方法
对象创建+指定原型

第一种通过构造函数创建对象实例,原型上定义共享方法:

function Super() {}
Super.prototype.foo = function() {}

function Sub() {}
Sub.prototype = new Super();

let sub = new Sub();
sub.foo(); // 原型方法

第二种是创建对象并指定其原型:

let superObj = {
  foo: function() {}
};

let subObj = Object.create(superObj); 
subObj.foo(); // 原型方法

原型继承的优缺点

原型继承的主要优点包括:

父类方法可以被复用
实现了接口继承
符合OOP中继承的思想

缺点主要有:

父类属性被所有实例共享
不能实现多继承
来源不清晰,调试困难

深度解析

除了原型继承的基本内容,这里我再介绍几个更深入的点:

原型链

原型对象也可以有原型,这样会形成一个原型链,用于模拟继承等功能，原型对象自己也是一个对象,拥有自己的原型,这样就可以形成一个原型链:

function Super() {}
function Sub() {}

Sub.prototype = new Super(); 
Sub.prototype.constructor = Sub;

let sub = new Sub();

这里Sub.prototype原型对象继承自Super,就形成了原型链。

instanceof

通过实例的__proto__链来判断构造函数的原型是否存在于该链中,实现instanceof操作，instanceof通过检查对象的原型链中是否存在构造函数的prototype来判断关系:

function Foo() {}
let foo = new Foo();

foo instanceof Foo; // true

原型污染

直接修改原型对象会影响所有实例,需要防止原型被污染，直接修改原型对象会影响所有实例:

function Foo() {}
let foo1 = new Foo();
let foo2 = new Foo();

Foo.prototype.test = 'Hello';

foo1.test; // 'Hello'
foo2.test; // 'Hello'

需要利用Object.create()避免直接修改原型对象。

寄生组合式继承

结合构造函数继承和原型继承的优点,实现更优雅的继承方式。

function Super() {
  this.superValue = 'hello';
} 

Sub.prototype = Object.create(Super.prototype); 
Sub.prototype.constructor = Sub;

function Sub() {
  Super.call(this);
}