美文网首页
js实现继承

js实现继承

作者: 飞飞廉 | 来源:发表于2017-11-09 17:11 被阅读0次

    1、
    使用call方法继承属性;
    使用prototype继承方法;

    var Parent=function(name){
            this.name=name || 'parent';
        }
        Parent.prototype.getName=function(){
            return this.name;
        }
        var Child=function(name){
            Parent.apply(this,arguments);//通过apply调用父类的构造函数来进行相同的初始化工作
        }
        Child.prototype=Parent.prototype;
    

    2、这样继承会产生问题,它把父类的原型直接赋值给子类的原型,这就会造成一个问题,就是如果对子类的原型做了修改,那么这个修改同时也会影响到父类的原型,进而影响父类对象,这个肯定不是大家所希望看到的。为了解决这个问题就有了临时构造函数模式。

     var Parent=function(name){
            this.name=name || 'parent';
        }
        Parent.prototype.getName=function(){
            return this.name;
        }
        var Child=function(name){
            Parent.apply(this,arguments);//通过apply调用父类的构造函数来进行相同的初始化工作
        }
        var F=new Function();
        F.prototype=Parent.prototype;
        Child.prototype=new F();
        //通过在父类原型和子类原型之间加入一个临时的构造函数F,切断了子类原型和父类原型之间的联系,这样当子类原型做修改时就不会影响到父类原型。
    

    3、其实可以不使用中间变量F,直接Child.prototype = new Parent();也可以,就是父类构造函数被执行了两次,一次是在子类构造函数中,一次在赋值子类原型时,这是很多余的。

    var Parent=function(name){
            this.name=name || 'parent';
        }
        Parent.prototype.getName=function(){
            return this.name;
        }
        var Child=function(name){
            Parent.apply(this,arguments);//通过apply调用父类的构造函数来进行相同的初始化工作,一次调用
        }
        Child.prototype=new Parent();//二次调用父类构造函数
        Child.prototype.sayHi=function(){
            alert('hi');
        }
        var parent=new Parent('myParent');
        var child=new Child('myChild');
        console.log(parent.getName());
        console.log(child.getName());
        parent.sayHi();//报错。说明子类prototype不会影响父类
        </script>
    

    4、采用逐个赋值的方式

        var Parent=function(name){
            this.name=name || 'parent';
        }
        Parent.prototype.getName=function(){
            return this.name;
        }
        var Child=function(name){
            Parent.apply(this,arguments);//通过apply调用父类的构造函数来进行相同的初始化工作,一次调用
        }
       for(var k in Parent.prototype){
            Child.prototype[k]=Parent.prototype[k];
       }
        Child.prototype.sayHi=function(){
            alert('hi');
        }
        var parent=new Parent('myParent');
        var child=new Child('myChild');
        console.log(parent.getName());
        console.log(child.getName());
        parent.sayHi();//报错。说明子类prototype不会影响父类
    

    参考博文:http://www.cnblogs.com/haoyijing/p/5760586.htm

    相关文章

      网友评论

          本文标题:js实现继承

          本文链接:https://www.haomeiwen.com/subject/orhmmxtx.html