6种JavaScript继承方式及优缺点

时间: 2020-01-06阅读: 54标签: 继承

友情提示:想要更好的理解JS继承方式,须了解构造函数、原型对象、实例化对象、原型链等概念


第一种:原型链继承
利用原型链的特点进行继承

function Parent(){
    this.name = 'web前端';
    this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
    console.log(this.name);
}
function Son(){};
Son.prototype = new Parent();
son1 = new Son();
son1.Say();

以上例子解释:
①创建一个叫做Parent的构造函数,暂且称为父构造函数,里面有两个属性name、type
②通过Parent构造函数的属性(即原型对象)设置Say方法,此时,Parent有2个属性和1个方法
③创建一个叫做Son的构造函数,暂且称为子构造函数   
④设置Son的属性(即原型对象)值为父构造函数Parent的实例对象,即子构造函数Son继承了父构造函数Parent,此时Son也有2个属性和1个方法
⑤对Son构造函数进行实例化,结果赋值给变量son1,即son1为实例化对象,同样拥有2个属性和1个方法
⑥输出son1的Say方法,结果为"web前端"
优点:可以实现继承
缺点:
①因为Son.prototype(即原型对象)继承了Parent实例化对象,这就导致了所有Son实例化对象都一样,都共享有原型对象的属性及方法。代码如下:

son1 = new Son();
son2 = new Son();
son1.type.push('VUE');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','VUE']

结果son1、son2都是['JS','HTML','CSS','VUE']
②Son构造函数实例化对象无法进行参数的传递


第二种:构造函数继承
通过构造函数call方法进行继承,直接来看代码:

function Parent(){
    this.name = 'web前端';
    this.type = ['JS','HTML','CSS'];
}
function Son(){
    Parent.call(this);
}
son1 = new Son();
son1.type.push('VUE');
console.log(son1.type);//['JS','HTML','CSS','VUE']
son2 = new Son();
console.log(son2.type);//['JS','HTML','CSS']

以上例子解释:
①创建父级构造函数Parent,有name、type两个属性
②创建子级构造函数Son,函数内部通过call方法调用父级构造函数Parent,实现继承
③分别创建构造函数Son的两个实例化对象son1、son2,对son1的type属性新增元素,son2没有新增,结果不一样,说明实现了独立
优点:
①实现实例化对象的独立性;
②还可以给实例化对象添加参数

function Parent(name){
    this.name = name;
}
function Son(name){
    Parent.call(this,name);
}
son1 = new Son('JS');
console.log(son1);//JS
son2 = new Son('HTML');
console.log(son2);//HTML

缺点:
①方法都在构造函数中定义,每次实例化对象都得创建一遍方法,基本无法实现函数复用
②call方法仅仅调用了父级构造函数的属性及方法,没有办法调用父级构造函数原型对象的方法


第三种:组合继承
利用原型链继承和构造函数继承的各自优势进行组合使用,还是看代码:

function Parent(name){
    this.name = name;
    this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
    console.log(this.name);
}
function Son(name){
    Parent.call(this,name);
}
Son.prototype = new Parent();
son1 = new Son('张三');
son2 = new Son('李四');
son1.type.push('VUE');
son2.type.push('PHP');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','PHP']
son1.Say();//张三
son2.Say();//李四

以上例子解释:
①创建一个叫做Parent的构造函数,里面有两个属性name、type
②通过Parent构造函数的属性(即原型对象)设置Say方法,此时,Parent有2个属性和1个方法
③创建子级构造函数Son,函数内部通过call方法调用父级构造函数Parent,实现继承
④子构造函数Son继承了父构造函数Parent,此时Son也有2个属性和1个方法
⑤分别创建构造函数Son的两个实例化对象son1、son2,传不同参数、给type属性新增不同元素、调用原型对象Say方法
优点:
①利用原型链继承,实现原型对象方法的继承
②利用构造函数继承,实现属性的继承,而且可以参数
组合函数基本满足了JS的继承,比较常用
缺点:
无论什么情况下,都会调用两次父级构造函数:一次是在创建子级原型的时候,另一次是在子级构造函数内部


第四种:原型式继承
创建一个函数,将参数作为一个对象的原型对象

function fun(obj) {
    function Son(){};
    Son.prototype = obj;
    return new Son();
}        
var parent = {
    name:'张三'
}
var son1 = fun(parent);
var son2 = fun(parent);
console.log(son1.name);//张三
console.log(son2.name);//张三

以上例子解释:
①创建一个函数fun,内部定义一个构造函数Son
②将Son的原型对象设置为参数,参数是一个对象,完成继承
③将Son实例化后返回,即返回的是一个实例化对象
优缺点:跟原型链类似


第五种:寄生继承
在原型式继承的基础上,在函数内部丰富对象

function fun(obj) {
    function Son() { };
    Son.prototype = obj;
    return new Son();
}
function JiSheng(obj) {
    var clone = fun(obj);
    clone.Say = function () {
        console.log('我是新增的方法');
    }
    return clone;
}
var parent = {
    name: '张三'
}
var parent1 = JiSheng(parent);
var parent2 = JiSheng(parent);
console.log(parent2.Say==parent1.Say);// false

以上例子解释:
①再原型式继承的基础上,封装一个JiSheng函数
②将fun函数返回的对象进行增强,新增Say方法,最后返回
③调用JiSheng函数两次,分别赋值给变量parent1、parent2
④对比parent1、parent2,结果为false,实现独立
优缺点:跟构造函数继承类似,调用一次函数就得创建一遍方法,无法实现函数复用,效率较低

这里补充一个知识点,ES5有一个新的方法Object.create(),这个方法相当于封装了原型式继承。这个方法可以接收两个参数:第一个是新对象的原型对象(可选的),第二个是新对象新增属性,所以上面代码还可以这样:

function JiSheng(obj) {
    var clone = Object.create(obj);
    clone.Say = function () {
        console.log('我是新增的方法');
    }
    return clone;
}
var parent = {
    name: '张三'
}
var parent1 = JiSheng(parent);
var parent2 = JiSheng(parent);
console.log(parent2.Say==parent1.Say);// false


第六种:寄生组合继承
利用组合继承和寄生继承各自优势
组合继承方法我们已经说了,它的缺点是两次调用父级构造函数,一次是在创建子级原型的时候,另一次是在子级构造函数内部,那么我们只需要优化这个问题就行了,即减少一次调用父级构造函数,正好利用寄生继承的特性,继承父级构造函数的原型来创建子级原型。

function JiSheng(son,parent) {
    var clone = Object.create(parent.prototype);//创建对象
    son.prototype = clone;      //指定对象
    clone.constructor = son;     //增强对象
}
function Parent(name){
    this.name = name;
    this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
    console.log(this.name);
}
function Son(name){
    Parent.call(this,name);
}
JiSheng(Son,Parent);
son1 = new Son('张三');
son2 = new Son('李四');
son1.type.push('VUE');
son2.type.push('PHP');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','PHP']
son1.Say();//张三
son2.Say();//李四

以上例子解释:
①封装一个函数JiSheng,两个参数,参数1为子级构造函数,参数2为父级构造函数
②利用Object.create(),将父级构造函数原型克隆为副本clone
③将该副本作为子级构造函数的原型
④给该副本添加constructor属性,因为③中修改原型导致副本失去默认的属性
优缺点:
组合继承优点、寄生继承的有点,目前JS继承中使用的都是这个继承方法

吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/7426

JavaScript 构造函数的继承

继承是 OO 语言中的一个最为人津津乐道的概念。许多 OO 语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。如前所述,由于函数没有签名,在 ECMAScript 中无法实现接口继承

纯手写实现js继承

继承在前端逻辑操作中是比较常见的,今天我们就从零开始写一个js的继承方式,在es5中继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上Parent.call(this)

CSS inherit是继承,那initial和unset呢?

所有CSS都支持几个全局属性值,分别是: inherit , initial 和 unset 。其中 inherit 是继承的意思,IE8(标准版)开始支持,不是从IE9开始支持的,网上一些文档是错误的。

深入JS继承

对于灵活的js而言,继承相比于java等语言,继承实现方式可谓百花齐放。方式的多样就意味着知识点繁多,当然也是面试时绕不开的点。撇开ES6 class不谈,传统的继承方式你知道几种?每种实现原理是什么,优劣点能谈谈吗

css无继承性的属性有哪些?

继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。CSS继承是指设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此属性。但并不是所有的属性都可以继承

ES5 的构造函数原型链继承

构造函数,就是专门用来生成实例对象的函数。一个构造函数,可以生成多个实例对象,这些实例对象都有相同的结构。为了与普通函数区别,构造函数名字的第一个字母通常大写。

Js继承总结

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。如果让原型对象指向另一个类型的实例.....有趣的事情便发生了.

javascript实现继承有几种方式?

javascript实现继承的方式有哪些?下面本篇文章就来给大家介绍一下javascript实现继承的几种方式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

Js对象继承

JavaScript对象继承的方法有很多,这里总结一下几种比较常用的方法。使用call/apply和Object.create()第一种方法使用call或apply方法,改变了 this 的指向而实现继承,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行

Js实现继承的几种方法及其优缺点

要搞懂JS继承,我们首先要理解原型链:每一个实例对象都有一个__proto__属性(隐式原型),在js内部用来查找原型链;每一个构造函数都有prototype属性(显示原型),用来显示修改对象的原型

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全