小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发,等相关电商工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

W X:xiaomi168527

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云
精品推荐
  • 什么是闭包?js闭包的2个最大用途以及注意事项

    什么是闭包?js闭包的2个最大用途以及注意事项

    各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。简单的说,闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因……
    199人已经看过了
您的位置:首页 > 前端开发 > Javascript > 原生JS

原型链继承、冒充继承、Object.create()继承

分类: 原生JS35个赞

继承:多个子类对象可以共用父类对象的成员属性和成员方法(代码重用--重复使用);

原型链继承


核心原理:B.prototype = new A();

作用:能够继承A构造函数以及原型链上的所有成员。

子类对象 能够继承 父类对象以及父类对象的原型对象的成员(整个原型链上的成员)

缺点:缺点:子对象自身的constructor属性丢失了, 变成了父类构造函数

破坏了原型链(将子类自身的constructor丢了)

    //定义父类构造函数
    function A(){
        this.age = 10;
    }
    A.prototype.say = function(){
        console.log(100);
    }
    //定义子类构造函数
    function B(){

    }
    //设置子类构造函数的原型对象 = 父类构造函数的实例对象
    B.prototype = new A();  //会将B的实例对象自己的constructor属性丢了
    // B.prototype.constructor = B;

    var b = new B();
    console.log(b.age);
    b.say();

    console.log(b.constructor);


冒充继承

实现方式:在子类构造函数中,调用父类构造函数的(call, apply, bind)方法,使用子类构造函数的this去冒充父类构造函数的this。

父类.call(子类的对象, 其他参数);  //意思是让子类的对象,去代替父类中的this。

优点:不会丢失子类对象的constructor属性

缺点:只能继承父类构造函数中设置的成员,不能继承父类原型对象上的成员

相关知识点:改变js函数中的this指向的三种方法

//父类构造函数
    function A(){
        this.age = 10;
        this.say = function(){
            console.log(100);
        }
    }
    //子类构造函数
    function B(){
        //将B中的this,传给A,使A中的this指向B的this。
        A.call(this);
    }

    var b = new B();
    console.log(b.age);
    b.say();


    缺点:这种实现继承的方式,是不能继承父类原型对象上的成员

    function A(){
        this.age = 10;
    }
    A.prototype.say = function(){
        console.log(100);
    }
    function B(){
        A.call(this);
    }
    var b = new B();
    console.log(b.age);
    b.say();//报错



Object.create()继承


var 新对象 = Object.create(原型对象); 该方法就是用于创建新对象并指定原型对象的。所以就可以直接使用create方法实现继承。


特点:父类构造函数以及其原型链上的成员都能继承。

适合场景:新的对象 没有直接对应的一个自定义构造函数

适用于继承一个现有的对象,但是没有直接定义的构造函数

注意:Object.create()是IE9才开始支持的。


不指定原型对象(不继承),参数可以为null。  即  var obj = Object.create(null);

function A(){
        this.age = 10;
    }
    A.prototype.say = function(){
        console.log(100);
    }

    var obj = Object.create(new A());

    console.log(obj.age);
    obj.say();

    //或者
/*
    var obj = Object.create({
        age:10,
        say:function(){
            console.log(100);
        }
    });
    console.log(obj.age);
    obj.say();
*/


小米技术社区

本站内容均为小米原创,转载请注明出处:小米技术社区>> 原型链继承、冒充继承、Object.create()继承