上篇文章详细解析了原型、原型链的相关知识点,这篇文章讲的是和原型链有密切关联的继承,它是前端基础中很重要的一个知识点,它对于代码复用来说非常有用,本篇将详细解析JS中的各种继承方式和优缺点进行,希望看完本篇文章能够对继承以及相关概念理解的更为透彻。
本篇文章需要先理解原型、原型链以及call的相关知识:JS基础-函数、对象和原型、原型链的关系
js基础-面试官想知道你有多理解call,apply,bind?
何为继承?维基百科:继承可以使得子类具有父类别的各种属性和方法,而不需要再次编写相同的代码。
继承是一个类从另一个类获取方法和属性的过程。
PS:或者是多个类
JS实现继承的原理记住这个概念,你会发现JS中的继承都是在实现这个目的,差异是它们的实现方式不同。
复制父类的属性和方法来重写子类原型对象。
原型链继承(new): function fatherFn() { this.some = '父类的this属性'; } fatherFn.prototype.fatherFnSome = '父类原型对象的属性或者方法'; // 子类 function sonFn() { this.obkoro1 = '子类的this属性'; } // 核心步骤:重写子类的原型对象 sonFn.prototype = new fatherFn(); // 将fatherFn的实例赋值给sonFn的prototype sonFn.prototype.sonFnSome = '子类原型对象的属性或者方法' // 子类的属性/方法声明在后面,避免被覆盖 // 实例化子类 const sonFnInstance = new sonFn(); console.log('子类的实例:', sonFnInstance); 原型链子类实例 原型链继承获取父类的属性和方法fatherFn通过this声明的属性/方法都会绑定在new期间创建的新对象上。
新对象的原型是father.prototype,通过原型链的属性查找到father.prototype的属性和方法。
理解new做了什么:new在本文出现多次,new也是JS基础中很重要的一块内容,很多知识点会涉及到new,不太理解的要多看几遍。
创建一个全新的对象。
这个新对象的原型(__proto__)指向函数的prototype对象。
执行函数,函数的this会绑定在新创建的对象上。
如果函数没有返回其他对象(包括数组、函数、日期对象等),那么会自动返回这个新对象。
返回的那个对象为构造函数的实例。
构造调用函数返回其他对象返回其他对象会导致获取不到构造函数的实例,很容易因此引起意外的问题!
我们知道了fatherFn的this和prototype的属性/方法都跟new期间创建的新对象有关系。
如果在父类中返回了其他对象(new的第四点),其他对象没有父类的this和prototype,因此导致原型链继承失败。
我们来测试一下,修改原型链继承中的父类fatherFn:
function fatherFn() { this.some = '父类的this属性'; console.log('new fatherFn 期间生成的对象', this) return [ '数组对象', '函数对象', '日期对象', '正则对象', '等等等', '都不会返回new期间创建的新对象' ] }PS: 本文中构造调用函数都不能返回其他函数,下文不再提及该点。
不要使用对象字面量的形式创建原型方法:这种方式很容易在不经意间,清除/覆盖了原型对象原有的属性/方法,不该为了稍微简便一点,而使用这种写法。
有些人在需要在原型对象上创建多个属性和方法,会使用对象字面量的形式来创建:
sonFn.prototype = new fatherFn(); // 子类的prototype被清空后 重新赋值, 导致上一行代码失效 sonFn.prototype = { sonFnSome: '子类原型对象的属性', one: function() {}, two: function() {}, three: function() {} }还有一种常见的做法,该方式会导致函数原型对象的属性constructor丢失:
function test() {} test.prototype = { ... } 原型链继承的缺点
父类使用this声明的属性被所有实例共享
原因是:实例化的父类(sonFn.prototype = new fatherFn())是一次性赋值到子类实例的原型(sonFn.prototype)上,它会将父类通过this声明的属性也在赋值到sonFn.prototype上。
值得一提的是:很多博客中说,引用类型的属性被所有实例共享,通常会用数组来举例,实际上数组以及其他父类通过this声明的属性也只是通过去获取子类实例的原型(sonFn.prototype)上的值。
创建子类实例时,无法向父类构造函数传参,不够灵活。