博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
面试--js实现继承的几种方式
阅读量:6968 次
发布时间:2019-06-27

本文共 2717 字,大约阅读时间需要 9 分钟。

基于原型的继承

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]

转载地址:http://xjssl.baihongyu.com/

你可能感兴趣的文章
编译原理作业
查看>>
进程和多线程的概念及线程的优点
查看>>
SpringMVC (四)MultiActionController
查看>>
Linux服务器上搭建Centos7.0+Apache+php+Mysql网站
查看>>
HDOJ 1308.Is It A Tree?
查看>>
CentOS7 yum方式安装 MongoDB 3.4 复制集
查看>>
BP expects to restart drilling in Gulf in H2
查看>>
python通过range函数计算一组数的和的代码
查看>>
获取Android控件的宽和高
查看>>
2013-12-04(datePicker插件的使用)
查看>>
我的友情链接
查看>>
好记性不如烂笔头,今天起坚持每周一篇博文
查看>>
Linux面试题1
查看>>
Hadoop问题汇总
查看>>
初识Hibernate框架
查看>>
System Center 2012 SP1系列之SCO篇-(1)Orchestrator 安装
查看>>
第三只眼睛看美国
查看>>
数据库服务器事故总结
查看>>
什么是socket
查看>>
jquery学习笔记
查看>>