面试--js实现继承的几种方式

baiy 发布于2019-08-21 16:56 / 3281人阅读

摘要：基于原型的继承原型上的属性被共享了不是我们所需要的这种继承会有如下的缺点如果父类包含有引用类型的属性所有的子类就会共享这个属性。

基于原型的继承

  function father() {
        this.faName = "father";
        this.names=["11","22"]
    }
    father.prototype.getfaName = function() {
        console.log(this.faName);
    };
    function child() {
        this.chName = "child";
    }
    child.prototype = new father();
    child.prototype.constructor = child;
    child.prototype.getchName = function() {
        console.log(this.chName);
    };
    var c1=new child();
    c1.names.push("sasa");
    var c2=new child();
    console.log(c2.names)   //原型上的names属性被共享了 不是我们所需要的

这种继承会有如下的缺点：
1、如果父类包含有引用类型的属性所有的子类就会共享这个属性。
2、在创建子类的实例时不能向父类的构造函数传递参数

组合式继承

原型继承+构造函数的继承

 function father(name) {
        this.faName = "father";
    }
    father.prototype.getfaName = function() {
        console.log(this.faName);
    };
    function child(args) {
        this.chName = "child";
        father.apply(this,[]); //第二次调用父类构造函数
    }
    child.prototype = new father(); //第一次调用父类构造函数
    child.prototype.constructor = child;
    child.prototype.getchName = function() {
        console.log(this.chName);
    };

子类继承父类的属性，一组在子类实例上，一组在子类原型上（在子类原型上创建不必要的多余的属性）

寄生组合实现继承

 function father(name) {
        this.faName = "father";
    }
    father.prototype.getfaName = function() {
        console.log(this.faName);
    };
    function object(o) {    //创建一个原型为o的新对象
        function F() {};
        F.prototype = o;
        return new F();
    }
    /**
     * 通用方法实现子类继承父类
     * @param  {function} child  子类构造函数
     * @param  {function} father 被继承的父类构造函数
     */
    function inheritPrototype(child, father) {
        var prototype = object(father.prototype); //创建一个指定原型的对象
        prototype.constructor = child; //增强对象
        child.prototype = prototype; //子类的原型等于该对象
    }
    function child(args) {
        this.chName = "child";
        father.apply(this,[]);   //调用父类的构造函数可以通过args传递参数
    }
    inheritPrototype(child, father); //子类的原型等于new 空函数(), 而new 空函数()出来的对象的原型等于父类的原型
    child.prototype.getchName = function() {
        console.log(this.chName);
    };
    console.log( child.prototype.isPrototypeOf(new child()) ); //true
    console.log(new child() instanceof child); //true

优点：1.只调用一次父类的构造函数,避免了在子类原型上创建不必要的，多余的属性

  2.原型链保持不变

es6实现的继承

   class father{
        constructor(name){
            this.name=name
            this.names=[1,2,3]
        }
        getname(){
            console.log(this.name);
        }
    }
    class child extends father{
        constructor(name){
            super(name);
        }
        sayHello(){
            console.log("sayHello");
        }
        static hh(){
            console.log("hh")
        }
    }
    var cc=new child("juanjuan");
    cc.sayHello();
    cc.getname();  //juanjuan
    child.hh();  //hh
    cc.names.push("wqwq");
    var c1=new child("sasasa");
    console.log(c1.names)  //[1,2,3]

云服务器 GPU云服务器 js继承的几种方式服务器请求的几种方式 java创建对象的几种方式 js的几种数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88921.html

2018年5月前端面试题

摘要：在上家公司裸辞之后，经过一段时间休整，月中下旬面试了一些公司，由于本人框架使用的是，所以面试题涉及到框架的都是，现将面试题整理一下列举常用的特性。事件冒泡以及事件捕获。其他前端分页和后端分页优缺点。包含多个子节点及孙节点，遍历。在上家公司裸辞之后，经过一段时间休整，5月中下旬面试了一些公司，由于本人框架使用的是vue，所以面试题涉及到框架的都是vue，现将面试题整理一下： es6 ...

wwolf 2019-08-26 11:55 评论0 收藏0
2018年5月前端面试题

摘要：在上家公司裸辞之后，经过一段时间休整，月中下旬面试了一些公司，由于本人框架使用的是，所以面试题涉及到框架的都是，现将面试题整理一下列举常用的特性。事件冒泡以及事件捕获。其他前端分页和后端分页优缺点。包含多个子节点及孙节点，遍历。在上家公司裸辞之后，经过一段时间休整，5月中下旬面试了一些公司，由于本人框架使用的是vue，所以面试题涉及到框架的都是vue，现将面试题整理一下： es6 ...

Lavender 2019-08-02 10:35 评论0 收藏0
【面试系列】番外：关于糯米面试

摘要：番外关于糯米面试结果总而言之一句话糯米的面试挂了过程把面试过程中面试官的问题分享一下有几种数据类型。将一个字符串转化为数字，将数字转化为字符串。获取当前网址并从中截取信息。究其愿意还是对字符串和数组的操作不熟练，我决定深刻反思。番外：关于糯米面试结果总而言之一句话：糯米的面试挂了过程把面试过程中面试官的问题分享一下： js有几种数据类型。将一个字符串转化为数字，将数字转化...

PiscesYE 2019-08-29 11:09 评论0 收藏0
【面试系列】番外：关于糯米面试

摘要：番外关于糯米面试结果总而言之一句话糯米的面试挂了过程把面试过程中面试官的问题分享一下有几种数据类型。将一个字符串转化为数字，将数字转化为字符串。获取当前网址并从中截取信息。究其愿意还是对字符串和数组的操作不熟练，我决定深刻反思。番外：关于糯米面试结果总而言之一句话：糯米的面试挂了过程把面试过程中面试官的问题分享一下： js有几种数据类型。将一个字符串转化为数字，将数字转化...

Rocture 2019-08-01 15:38 评论0 收藏0
【面试系列】番外：关于糯米面试

摘要：番外关于糯米面试结果总而言之一句话糯米的面试挂了过程把面试过程中面试官的问题分享一下有几种数据类型。将一个字符串转化为数字，将数字转化为字符串。获取当前网址并从中截取信息。究其愿意还是对字符串和数组的操作不熟练，我决定深刻反思。番外：关于糯米面试结果总而言之一句话：糯米的面试挂了过程把面试过程中面试官的问题分享一下： js有几种数据类型。将一个字符串转化为数字，将数字转化...

iKcamp 2019-08-20 10:29 评论0 收藏0