站长论坛 - 站长交流社区- SEO交流论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 57|回复: 0

[JavaScript] js四种继承方式

[复制链接]
发表于 2018-9-13 17:22:22 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
js是一个很自由的语言,没有强类型的语言的那种限制,实现一个功能往往有很多做法。继承就是其中的一个,在js中继承大概可以分为四大类,下面开始详细说说js的继承。
1、原型继承
function funcA(){
    this.show=function(){
        console.log("hello");
    }
}
function funcB(){
}
funcB.prototype=new funcA();
var b=new funcB();
b.show();
这里是运用原型链的特性实现,缺点很明显,如果继承的层次比较多的话,修改顶层的原型的方法,会对下面所有的对象产生影响。
2、原型冒充:
function funcA(age){
    this.name="xiaoxiao";
    this.age=age;
    this.show=function(){
        console.log(this.name+this.age)
    }
}
function funcB(){
    this.parent=funcA;
    this.parent(40);
    delete this.parent;
}
var b=new funcB();
b.show();
这个继承的方法就是把funcA中的代码全部拿到funcB中执行一下,可以解释成:
function funcA(age){
    this.name="xiaoxiao";
    this.age=age;
    this.show=function(){
        console.log(this.name+this.age)
    }
}
function funcB(){
    // this.parent=funcA;
    // this.parent(40);
    // delete this.parent;
         //其实上面的过程只不过是把funcA搬过来
    this.name="xiaoxiao";
    this.age=age;
    this.show=function(){
        console.log(this.name+this.age)
    }
}
var b=new funcB();
b.show();
3、call和apply
function funcA() {
    this.show = function(str) {
        console.log(str);
    }
}
function funcB() {
    this.read = function() {}
}
var a = new funcA();
var b = new funcB();
funcA.call(b);//use call
a.show("a");
b.show("b");
call和apply效果是一样的,不过是传参方式上不一样,但是推荐用call,因为apply的效率会低很多。
4、复制继承
function funcA(){
    this.name="hello";
    this.show=function(){
        console.log(this.name);
    }
}
function funcB(){
    this.extend=function(o){
        for(var p in o){
            this[p]=o[p];
        }
    }
}
var a=new funcA();
var b=new funcB();
b.extend(a);
b.show();
这个类似于jquery的extend的方法,原理是把a中的属性遍历到b中。
浏览器, browser, mp4格式, mp4视频, please
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|易采站长站 ( 蒙ICP备14002389-1号 ) |

GMT+8, 2019-12-7 19:57

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表