js继承的实现

下面是小结的js四种方式实现的继承

<script>
        <!--继承-->
        <!--方式一:原型链-->
        function Parent(idea) {
            this.idea=idea;
            this.arr=[1]
        }
        Parent.prototype.give=function () {
            alert(JSON.stringify(this.arr));
        };

        function Son(name,age) {
            this.name=name;
            this.age=age;
        }
        Son.prototype=new Parent("心境");

        var son1=new Son();
        var son2=new Son();
        son1.give();//[1]
        son2.arr.push(2);
        son1.give();[1,2]
        //缺点:原型共用,当son2中的arr修改后,所有实例中的arr都会被修改;
        //优点:简单容易理解

        <!--方式二:构造函数模式-->
        function Parent(idea) {
            this.idea=idea;
            this.arr=[1];
            this.give=function () {
                alert(JSON.stringify(this.arr));
            };
        }

        function Son(name,age,idea) {
            this.name=name;
            this.age=age;
            Parent.call(this,idea)
        }

        var son1=new Son("","","心境1");
        var son2=new Son("","","心境2");
        son1.give();//[1]
        console.log(son1.idea);//心境1
        console.log(son2.idea);//心境2
        son2.arr.push(2);
        son1.give();//[1]
        //优点:解决子类实例共享父类引用属性的问题
        //缺点:无法实现函数复用,每个实例都有一个新的函数,内存性能问题

        <!--方式三:组合继承模式-->
        function Parent(idea) {
            this.idea=idea;
            this.arr=[1];
        }
        Parent.prototype.give=function () {
            alert(JSON.stringify(this.arr));
        };

        function Son(name,age,idea) {
            this.name=name;
            this.age=age;
            Parent.call(this,idea)
        }
        Son.prototype=new Parent();

        var son1=new Son("","","心境1");
        var son2=new Son("","","心境2");
        son1.give();//[1]
        console.log(son1.idea);//心境1
        console.log(son2.idea);//心境2
        son2.arr.push(2);
        son1.give();//[1]
        //优点:不存在引用属性共享问题;函数不可用
        //缺点:子类原型上有一份多余的父类实例属性;

        <!--方式四:寄生组合继承模式-->
        function dealPrototy(obj) {
            var F=function () {};
            F.prototype=obj;
            return new F();
        }

        function Parent(idea) {
            this.idea=idea;
            this.arr=[1];
        }
        Parent.prototype.give=function () {
            alert(JSON.stringify(this.arr));
        };

        function Son(name,age,idea) {
            this.name=name;
            this.age=age;
            Parent.call(this,idea)
        }
        var proto=dealPrototy(Parent.prototype);//*
        proto.constructor=Parent;//*
        Son.prototype=proto;//*

        var son1=new Son("","","心境1");
        var son2=new Son("","","心境2");
        son1.give();//[1]
        console.log(son1.idea);//心境1
        console.log(son2.idea);//心境2
        console.log(son2 instanceof Son);//心境2
        son2.arr.push(2);
        son1.give();//[1]
        //优点:解决了子类原型上有一份多余的父类实例属性(组合模式存在的问题)
    </script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 JS作为面向对象的弱类型语言,继承也是非常强大的特性之一,那么如何在JS实现继承呢? JS继承的实现方式 既...
    她是我的bug阅读 365评论 0 1
  • 1. 原型链继承 原型链继承是我们用的最多的一种继承方式,就是让一个子类的原型指向父类的实例即可。 有人不禁要问为...
    蓝瘦额香菇阅读 683评论 0 1
  • 继承 继承我们在这里只说常用的3种 1.原型链继承记住3句话 每个实例都包含一个指向原型对象的指针 每个原型对象都...
    想回到童年阅读 102评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,602评论 25 708
  • 文—小猪姑娘二三事 刚离开校园生活的我们,眼里总是充满了太多的不安,也许这就是我们说的所谓迷茫。 我们也总是会不安...
    小猪姑娘二三事阅读 273评论 2 2