首页 > web前端 > js教程 > javascript如何实现继承?总结js实现继承的几种方法

javascript如何实现继承?总结js实现继承的几种方法

零下一度
发布: 2017-05-08 10:28:20
原创
1743 人浏览过

顾之前学到的知识,大体上可以分为两类:

  1. 基于构造器工作的模式。

  2. 基于对象的工作模式。

  3. 是否使用原型

  4. 是否执行属性拷贝。

  5. 两者都有(执行原型属性拷贝)

下面我们把之前的知识都来回顾一下:

1.原型链法(仿传统):

child.prototype = new Parent();
登录后复制

所属模式:基于构造函数的模式,使用原型链模式。

技术注解:默认继承机制,我们可以将方法与属性集中可重用的部分迁移到原型链中,而将不可重用的那部分属性与方法设置成自身的属性。

2.仅从原型继承法:

Child.prototype = Parent.prototype
登录后复制

所属模式:基于构造函数的工作模式,原型拷贝模式(不存在原型链,所有对象共享一个原型)。

技术注解:由于该模式在构建继承关系上不需要新建对象实例,所以在效率上会有较好的表现。

     原型链上的查询也比较快,因为这里根本不存在链。

     缺点在于,对子对象的修改会影响父对象,因为子对象只是父对象的一个引用

3.临时构造器法:

function extend(Child, parent){    var F = fucntion(){};
    F.prototype = Parent.prtotype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;  
}
登录后复制

所属模式:基于构造函数的工作模式,使用原型链模式。

技术注解:此模式不同于1号模式,她只继承父对象的原型属性,而对父对象的自身属性(也就是被添加到父级构造函数中this的属性)则不予继承。

     另外,此模式还提供了访问父对象的方式。(即通过usber属性)。

4.原型属拷贝法:

function extend2(Child, Parent){    var p = Parent.prototype;    var c = Child.prototype;    for(var i  in p){
        c[i] = p[i];
    }
    c.uber = p;
}
登录后复制

所属模式:基于构造器工作模式,属性拷贝模式,使用原型模式

技术注解:将父对象原型中的内容全部转化为子对象的原型属性。

     无需为继承单独创建对象实例。

     原型链本身也更短。

5.全属性拷贝法:

function extendCopy(p){    var c = {};    for(var i in p){
        c[i] = p[i];
    }
    c.uber  = p;    return c;
}
登录后复制

所属模式:基于对象的工作模式,属性拷贝模式。

技术注解:非常简单,没有使用原型属性。

6.深拷贝法:

function deepCopy(Parent, Child){
    Child = Child || {};    for(var i in Parent){        if(Parent.hasOwnProprty(i)){             if(typeof Parent[i] === 'Object'){
                 Child[i] = Array.isArray(p[i]) ? [] : {};
                 deepcopy(Parent[i], Child[i]);  
             }else{
                 Child[i] = Parent[i]
             }
        }
    }    return Child;
}
登录后复制

所属模式:基于对象的工作模式,属性拷贝模式。

技术注解:与5相同,但所有对象都是值传递。

7.原型继承法:

function object(o){    function F(){};
    F.prototype = o;    return new F();
}
登录后复制

所属模式:基于对象工作模式,基于原型链模式。

技术注解:丢开仿类机制,直接在对象之间构建继承关系。

发挥原型固有优势。

8.扩展与增强模式:

function objectPlus(o, stuff){    var n;    function(){};
    F.prototype = o;
    n = new F();
    n.uber = o;    for(var i in stuff){
        n[i] = stuff[i]
    }    return n;
}
登录后复制

所属模式:基于对象工作模式,使用原型链模式,属性拷贝模式。

技术注解:该方法实际上是原型继承与原型拷贝的混合应用,她通过一个函数一次性的完成对象的继承与扩展。

9.多重继承法:

function multi(){    var n = {}, stuff, j = 0;
    len = arguments.length;    for(j=0;j<len;j++){
        stuff = argument[j];        for(var i in stuff){
            n[i] = stuff[i];
        }
    }    return n;
}
登录后复制

所属模式:基于对象工作模式,属性拷贝模式。

技术注解:一种混合插入式继承实现。

   她会按照父对象的继承顺序依次对她们进行属性全拷贝。

10.寄生继承法:

function parasite(victim){    var that = object(victim);
    that.more = 1;    return that;
}
登录后复制

所属模式:基于对象工作模式,使用原型链模式。

技术注解:该方法通过一个类似于构造器的函数来创建对象。

     该函数会执行相应的对象拷贝,并对其进行扩展,然后返回该拷贝。

11.构造器借用法:

function Child{
    Parent.apply(this, arguments);
}
登录后复制

所属模式:基于构造器的工作模式。

技术注解:该方法只能继承父对象的自身属性(也就是构造函数里的this.属性、方法)。

     可以与方法一相结合。

     她便于我们的子对象继承某个对象的具体属性时,该方式是最简单的方式。

12.构造器借用与属性拷贝法:

function Child(){
    Parent.apply(this, argument);
}
extend2(Child, Parent);
登录后复制

所属模式:基于构造器的工作模式,使用原型链模式,属性拷贝模式。

技术注解:她允许我们在不重复使用调用对象构造器的情况下同时继承自身属性和原型属性。

额,持续更新了这么多天,大概也就这么多了,能力有限,多多包涵!

【相关推荐】

1. 免费js在线视频教程

2. JavaScript中文参考手册

3. php.cn独孤九贱(3)-JavaScript视频教程

以上是javascript如何实现继承?总结js实现继承的几种方法的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板