从零开始学_JavaScript_系列(42)——简述js的八种继承方式
2017-06-05 01:07
495 查看
继承方式有以下八种:
prototype:传统原型链继承,要继承的函数的prototype属性,被被继承函数的实例所替代;
apply、call继承:在要继承的函数里,调用被继承的函数,并利用apply和call传参this实现;
Object.assign() 属性合并继承(非原型链),类似2,可以同时合并多个;
Object.create() 以某个对象为原型创建属性继承(原型链继承),类似1,可以设置enumberable等属性;
组合继承:apply或call继承属性,prototype继承函数(主要是让函数复用,多个实例指向同一个函数方法,而不是每个实例都有一个函数方法);
原型式继承:使用继承的函数Father,创建一个新实例
寄生式继承:类似上面,声明一个Test函数,参数是被继承的函数的实例。这个函数里做了什么事情呢?首先在这个实例上用6的方式将这个实例添加到Fun的原型链上,然后再在Fun的实例f上添加各种属性,最后将f返回。相当于做了一个封装,无论丢什么对象,都会添加同样的属性和方法。
组合寄生继承:(下面细说)
上面8种方式里,其中1,2,5,6,7,8可以参考这个链接重新理解JS的6种继承方式,而3是es6的新增方法,4是es5的新增方法。
寄生组合继承:
简单来说,我把属性放在Father函数中,把方法放在Father函数的prototype上;
然后我创建一个空的函数Fun,让Father的prototype成为这个空函数的原型链(prototype);
此时,就相当于这个Fun拥有了被继承的函数的方法;
然后再var fun = new Fun(),那么这个实例自然也有Father的方法;
此时,fun的属性为:一个空对象,他的
我们再让fun的constructor属性(构造函数属性)指向Father;
于是我们有了一个这样的对象:
拥有一个constructor属性,指向Father;
原型链上有Father的prototype方法;
有没有发现,这个和函数的prototype属性的构成很像;
于是将这个对象作为Child的prototype。
此时Child的原型链上有了从Father继承来的方法;
在Child里,以call或者apply的方式调用Father函数,于是Child继承了Father的属性;
此时Child既继承了Father的属性(call或apply),又继承了Father的方法(prototype),而因为方法在原型链上,因此Child的实例都共用同一个Father的方法。
prototype:传统原型链继承,要继承的函数的prototype属性,被被继承函数的实例所替代;
apply、call继承:在要继承的函数里,调用被继承的函数,并利用apply和call传参this实现;
Object.assign() 属性合并继承(非原型链),类似2,可以同时合并多个;
Object.create() 以某个对象为原型创建属性继承(原型链继承),类似1,可以设置enumberable等属性;
组合继承:apply或call继承属性,prototype继承函数(主要是让函数复用,多个实例指向同一个函数方法,而不是每个实例都有一个函数方法);
原型式继承:使用继承的函数Father,创建一个新实例
let father = new Father(),创建一个空函数Fun,将father作为空函数Fun的原型链,然后用空函数Fun创建一个新的实例
let f = new Fun(){},将其他要继承的属性,依次添加到f这个对象上,形成继承。
寄生式继承:类似上面,声明一个Test函数,参数是被继承的函数的实例。这个函数里做了什么事情呢?首先在这个实例上用6的方式将这个实例添加到Fun的原型链上,然后再在Fun的实例f上添加各种属性,最后将f返回。相当于做了一个封装,无论丢什么对象,都会添加同样的属性和方法。
组合寄生继承:(下面细说)
上面8种方式里,其中1,2,5,6,7,8可以参考这个链接重新理解JS的6种继承方式,而3是es6的新增方法,4是es5的新增方法。
寄生组合继承:
简单来说,我把属性放在Father函数中,把方法放在Father函数的prototype上;
然后我创建一个空的函数Fun,让Father的prototype成为这个空函数的原型链(prototype);
此时,就相当于这个Fun拥有了被继承的函数的方法;
然后再var fun = new Fun(),那么这个实例自然也有Father的方法;
此时,fun的属性为:一个空对象,他的
__proto__属性里有fun1和fun2方法(原因参照上面的7.1和7.2);
我们再让fun的constructor属性(构造函数属性)指向Father;
于是我们有了一个这样的对象:
拥有一个constructor属性,指向Father;
原型链上有Father的prototype方法;
有没有发现,这个和函数的prototype属性的构成很像;
于是将这个对象作为Child的prototype。
此时Child的原型链上有了从Father继承来的方法;
在Child里,以call或者apply的方式调用Father函数,于是Child继承了Father的属性;
此时Child既继承了Father的属性(call或apply),又继承了Father的方法(prototype),而因为方法在原型链上,因此Child的实例都共用同一个Father的方法。
相关文章推荐
- 从零开始学_JavaScript_系列(20)——js系列<7>(函数原型的两种声明方式、函数的作用域)
- (转)js(javascript) 继承的5种实现方式
- 从零开始学_JavaScript_系列(16)——js系列<5>(正则表达式)
- javascript(js)创建对象的模式与继承的几种方式
- 从零开始学_JavaScript_系列(一)初步概念、工具选择、简单内容输出、加载js文件
- 【js基础】javascript中几种常见的继承方式。
- 从零开始学_JavaScript_系列(64)——class的继承(1)基本概念、继承构造函数和class
- 从零开始学_JavaScript_系列(15)——js系列<3>(转为字符串,截取字符串)
- 从零开始学_JavaScript_系列(35)——继承与遍历的对照表
- 从零开始学_JavaScript_系列(18)——dojo(7)(dojo中类的继承)
- javascript继承学习系列之五:其他方式
- 从零开始学_JavaScript_系列(15)——js系列<4>(数值、字符串、对象、数组、函数、日期的基本方法)
- js(javascript) 继承的5种实现方式
- JavaScript面向对象(三)——继承与闭包、JS实现继承的三种方式
- 从零开始学_JavaScript_系列(56)——Generator函数(4)简写,this与继承
- 从零开始学_JavaScript_系列(19)——js系列<6>闭包
- 从零开始学_JavaScript_系列(65)——class的继承(2)super、extends与多重继承
- 演示OOP中的封装、继承在JavaScript中的书写方式(另附JS反射的例子)
- 从零开始学_JavaScript_系列(八)——js系列<2>(事件触发顺序、文本读取、js编写ajax、输入验证、下拉菜单)
- [原]JavaScript必备知识系列-继承的实现方式