JS实现继承的几种方式样例

原型链继承

// 原型链继承;
    var M = function(name) {
        this.name = name;
    };
    M.prototype.say = function() {
        console.log(this.name)
    }

    var B = function() {

    };
    // 子类的原型是父类的实例
    B.prototype = new M("ad");
    var a = new B();
    // 原型链继承,a的实例找say方法,向上找B.prototype,B本身没有,由于B.prototype=new M("ad");建立的联系,所以继续向上找say方法,从而打印a.say
    console.log(a.__proto__ == B.prototype)
    console.log(B.prototype.__proto__ == M.prototype)
    console.log(a.say())


构造继承

// 构造继承,在子类的构造函数中继承父类的构造函数
    var C = function(name, age) {
        // call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj;
        M.call(this, name);
        this.age = age;
    }
    C.prototype.say = function() {
        console.log(this.name, this.age);
    }
    var D = new C("wyh", "18");
    D.say();

实例继承

// 实例继承
    var E = function(name) {
        var e = new M(name);
        return e;
    }

    var F = new E("wyh");
    F.say();

拷贝继承

 // 拷贝继承
    var G = function(name) {
        var F = new M(name);
        // 枚举 复制拷贝,实现多继承
        for (var key in F) {
            G.prototype[key] = F[key];
        };
    }

    var H = new G("wyh");
    H.say();

组合继承

// 组合继承

    var I = function(name) {
        M.call(this, name);
    }
    // 因重写原型而失去constructor属性,所以要对constrcutor重新赋值
    I.prototype.constructor=I;
    I.prototype = new M();
    var J = new I("wyh2")
    J.say();

寄生组合继承

// 寄生组合实例;创造一个副本或者虚拟类,防止实例构造两次
    var J = function(name) {
        M.call(this, name);
    };
    // 方式一
    (function() {
        // 创建一个没有实例方法的类
        var Super = function() {};
        Super.prototype = M.prototype;
        //将实例作为子类的原型
        J.prototype = new Super();
    })();
    // 方式二 创建副本
    // var protoType=Object.create(M.prototype);
  // protoType.constructor=M;
  // J.prototype=protoType;


    var K=new J("wyh");
    K.say();
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值