深入解析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是非常重要的。
当然,过度使用原型继承也会带来一些问题。实际项目中要灵活运用,可以搭配构造函数等方式组合使用。
