深入解析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);
}

• 原型继承的性能

????????通过缓存访问原型的结果可以提高原型访问的性能。

• 与类继承的区别

????????ES6类继承是在原型继承的基础上实现的语法糖。

• 相关设计模式

????????原型模式、混入模式都利用了原型继承实现。

? 结语

? ? ? ?原型继承是JavaScript实现继承的主要方式。理解其工作原理和应用方式对掌握JavaScript是非常重要的。

????????当然,过度使用原型继承也会带来一些问题。实际项目中要灵活运用,可以搭配构造函数等方式组合使用。

?

?