这次,彻底弄清js的继承方式
【这次,彻底弄清js的继承方式】关于js继承的文章一直以来是数不胜数,每隔一段时间就会复习一下,感觉明白了,但是过段时间又忘记了。有人说ES6的class不是用的挺好的吗,还需要去了解ES5及之前的继承原理做什么。别的不说,读一读vue2.0的源码,class继承有他的局限性,不利于代码的分层和模块的拆分,基于原型链去拓展方法可以很好地拆分功能模块,极大的提高代码的复用性。
本文是基于《JavaScript高级程序设计(第三版)》做的总结,有兴趣的话,去读一读,它就像前端开发者的实用手册一般,遇到不懂的知识点去查一查,翻一翻,逐步地填充自己的知识盲点,形成系统的知识体系。
首先创造一个超类型的构造函数Super
,他拥有自己的静态属性name
,以及原型链方法getSuper
。再创造一个子类构造函数Sub
。下面我们将使用6种方法去分析如何让Sub
继承Super
,并讨论下各自的优劣。
1.原型链继承
function Super() {
this.name = ["super"];
}
Super.prototype.getSuper = function () {
return this.name;
}function Sub() {}
Sub.prototype = new Super();
var sub1 = new Sub();
sub1.name.push("sub1");
var sub2 = new Sub();
sub2.name.push("sub2");
console.log(sub2.getSuper())//["super", "sub1", "sub2"]
将
Sub
的原型对象Sub.prototype
指向Super
的实例,然后创建两个Sub
的实例sub1
、sub2
。这样我们可以在Sub
中继承Super
的属性name
以及原型链方法getSuper
,然而在sub1
中修改name
时,sub2
的name
也受到了影响。将子类的原型对象指向超类型的实例的方法称作是原型链继承。这种继承方式的缺点是:
- 超类型的属性会被所有实例共享
- 子类的实例不能向超类型构造函数传参
function Super(name) {
this.name = name
}
Super.prototype.getSuper = function () {
return this.name;
}function Sub(name) {
Super.call(this, name);
}var sub1 = new Sub("Tom");
// console.log(sub1.getSuper()) //Uncaught TypeError
console.log(sub1.name)//Tomvar sub2 = new Sub();
console.log(sub2.name)//undefinedvar sup = new Super()
console.log(sup.getSuper())//undefined
在
Sub
中使用call
去调用Super
时,继承了Super
的所有静态属性。在实例sub1
、sub2
中,各自对name
的修改也互不影响,做到了属性不共享,同时子类的实例也能向超类型构造函数传参。而这种方式的缺点也显而易见:- 不能继承原型链方法:
console.log(sub1.getSuper()) //Uncaught TypeError
function Super(name) {
this.name = name
}
Super.prototype.getSuper = function () {
return this.name;
}function Sub(name) {
Super.call(this, name);
//第二次调用
}
Sub.prototype = new Super();
//第一次调用
Sub.prototype.constructor = Sub;
var sub1 = new Sub("Tom");
console.log(sub1.getSuper()) //Tom
console.log(sub1.name)//Tom
console.log(sub1 instanceof Sub)//true
console.log(sub1 instanceof Super)//truevar sub2 = new Sub();
console.log(sub2.name)//undefined
在子类
Sub
中,我们仍然使用call
去继承超类型的属性,同时也使用原型链的继承方式去继承原型链的方法和属性。这样我们弥补了以上两种继承方式的三种不足。唯一美中不足的是:- 调用了两次超类型的构造函数
Sub.prototype = new Super()
时,调用了一次超类型构造函数,第二次是在实例化Sub new Sub()
,然后在Sub
内使用call
方法时,又调用了一次超类型构造函数。并且在之后的每次实例化子类sub1
、sub2
...的过程中,都会调用超类型的构造函数,这种方式显然不是我们愿意看见的。以上三种继承方式通属于函数式继承。
-------------------------------- 分界线 -----------------------------------
在没有必要兴师动众地创建构造函数,而只想让一个对象与另一个对象保持类似的情况下,原型式继承是完全可以胜任的。什么是原型式继承呢?
4.原型式继承
先来看一个函数:
function object(o) {
function F() { }
F.prototype = o;
return new F();
}
首先创造了一个临时的构造函数
F
,将F
的原型指向传进来的对象,再返回F
的实例。等等,是不是和原型链继承很类似?这样,我们就完成了一次对对象的浅拷贝。来看一个例子:function object(o) {
function F() { }
F.prototype = o;
return new F();
}var person = {
name: "Nicholas",
friends: ["Sherlly", "Van"]
}// 在传入一个参数的情况下,Object.create()和object()相同
// var people1 = Object.create(person);
var people1 = object(person);
people1.name = "Greg";
people1.friends.push("Rob")var people2 = object(person);
people2.name = "Linda";
people2.friends.push("Barbie")console.log(person.name)//Nicholas
console.log(person.friends)//["Sherlly", "Van", "Rob", "Barbie"]
原型式继承和原型链继承类似,区别是一个是对对象进行复制,另一个是对构造函数进行继承。缺点也是一致的:
- 属性会被共享
基于4,高级程序设计中还介绍了一种关于对象复制的方式:寄生式继承。实质是基于4的一层封装,来看下代码:
function object(o) {
function F() { }
F.prototype = o;
return new F();
}function createAnother(o) {
var clone = object(o)
clone.sayHi = function () {
console.log("hi")
}
return clone;
}var person = {
name: "Nicholas",
friends: ["Sherlly", "Van"]
}var anotherPerson = createAnother(person);
anotherPerson.sayHi()
关于这段篇幅的介绍比较少,本质上就是说,可以通过这种方式实现子类方法
sayHi
的复用。通过createAnother
创造出来的对象,都拥有sayHi
方法。这种封装方式和工厂模式类似。-------------------------------- 分界线 -----------------------------------
在前三种方法中,我们学会了对构造函数属性,和原型链上属性及方法的继承。唯一不足的是需要调用两次超类型的构造函数。在4、5方法中,我们学会了,对于对象的拷贝式继承。所以,是时候迎来我们的终极解决方案了:寄生组合式继承。
6.寄生组合式继承
思考一下,在方式3-组合继承中,如果我们需要优化一次调用,那一定是第一次调用,对于原型链继承的优化,怎么优化呢?方式4-原型式继承恰巧满足我们的需要。
Sub.prototype = new Super()
,实质上就是完成一次对超类型原型对象的拷贝,看代码:function object(o) {
function F() { }
F.prototype = o;
return new F();
}function inheritPrototype(subType, superType) {
var clone = object(superType.prototype);
//复制超类型的原型对象
clone.constructor = subType;
//将构造函数指向子类型
subType.prototype = clone;
}function Super(name) {
this.name = name
}
Super.prototype.getSuper = function () {
return this.name;
}function Sub(name) {
Super.call(this, name);
//第二次调用
}// 优化前:
// Sub.prototype = new Super();
//第一次调用
// Sub.prototype.constructor = Sub;
// 优化后:
inheritPrototype(Sub, Super);
var sub1 = new Sub("Tom");
console.log(sub1.getSuper()) //Tom
console.log(sub1.name)//Tom
console.log(sub1 instanceof Sub)//true
console.log(sub1 instanceof Super)//truevar sub2 = new Sub();
console.log(sub2.name)//undefined
我们封装了
inheritPrototype
这样一个函数,首先利用object
(或Object.create()
)复制出超类型的原型对象,然后将原型对象的构造函数指向自身(抄完了别忘了把名字改成自己的:clone.constructor = subType
,constructor
相当于一张身份证,身份证上的名字一定得是自己),最后将拷贝出来的对象塞给子类的原型对象。至此,完成了子类对超类型的原型对象的继承。总结
让我们来总结一下,结合方式一的原型链继承和方式二的构造函数继承,衍生出方式三的组合继承。为了优化组合继承,引入了方式四原型式继承,最终得到方式六寄生组合式继承。这么理解,思路是不是清晰了很多?
-------------------------------- 完结 -----------------------------------
补充,有几个概念需要关注下,后续更新:
- 构造函数、原型对象、实例三种关系
- 拓展原型链的方法: new、Object.create、Object.setPrototypeOf、__ proto__
推荐阅读
- 眼观耳听美食的日子
- 这次,我想先完成一个承诺
- 陷入父母的心理战,孩子被彻底打败
- 【图解】9张图彻底搞懂堆排序
- 〈藏头诗二〉找一找这次有你的
- 2020-11-27期中考试反思
- 让未来现在就来
- 我们的五一假期
- 网络|一文彻底搞懂前端监控
- 会演讲的黑天鹅