美文网首页
JS的面向对象的编程思想2-构造函数的继承(阮一峰)

JS的面向对象的编程思想2-构造函数的继承(阮一峰)

作者: 人才辈出阿卡姆 | 来源:发表于2017-07-08 15:58 被阅读0次

    在开发中:有可能构造函数B要是用构造函数A中的一些方法和属性。这个时候要使用继承来拓展B

    //创建一个构造函数Obj
    function Obj(){
        this.country="中国";
        this.state="广东"
    }
    
    //创建一个人的构造函数
    function Person(name,age,sex){
        this.name=name;
        this.age=age;
        this.sex=sex;
    }
    

    1:使用 call apply来实现

    //    function Person1(name,age,sex){
    //    Obj.call(this,arguments) //在这个Person的构造函数中添加这一段代码 这里有一个疑问是arguments
          不写的话也可以使用,但是我这里创建的时候如果想修改 Obj里面的属性怎么办?比如我想修改一个国  
          家为加拿大的?
    //     this.name=name;
    //     this.age=age;
    //     this.sex=sex;
    //    }
    //    var oneman=new Person1('韩梅',20,'女');
    //    console.log(oneman); //Person1 {country: "中国", state: "广东", name: "韩梅", age: 20, sex: "女"}
    

    2:改写prototype的指向

    //    Person.prototype=new Obj(); //这里把Person这个构造函数的原型指向了一个Obj的实例。(复杂数据
          类型:内存上的指针改变)Person上就带有了Obj的属性和方                                  法,但这个时候我
          们要是new Person就相当与new Obj 没有name age sex这些属性
    //    Person.prototype.constructor=Person;
    //    var aa=new Person('李磊',30,'男');
    //    console.log(aa); //Person {name: "李磊", age: 30, sex: "男"} 发现在属性上并没有 country和state
    //    console.log(aa.state); // 广东  但是能打印出来。也就是说他是存在的~但是存在在原型链上,不暴露在
          外面
    

    3.接下来阮一峰又给了一个坑~

    //从性能上来考虑country和state在Person上并不要求他做修改。那么也就不需要创建Obj的实例消耗内存,
       把它放到原型链上就可以
    //    function Obj(){};
    //    Obj.prototype.country="中国";
    //    Obj.prototype.state="广东";
    //    console.log(Obj.prototype.constructor);
    //    Person.prototype=Obj.prototype;
    //    console.log(Person.prototype.constructor);
    //    Person.prototype.constructor=Person;   //这里改变了原型的构造函数指向,重新指向了Person
    //    var bb=new Person('赵洋',30,'男的');
    //    console.log(bb);
    //    console.log(Obj.prototype.constructor); //function Person(name,age,sex){}  为什么Obj的构造函数成了Person? 
    答案:因为在复杂数据类型中 他们指向了同一个内存地址,Person重新设定constroctor后 同一个内存地址的Obj.prototypr也发生了改变。 生活中的例子是这两个人合租在一个房间里面,A改变了房间内的布局,B回来的时候看到的还是原来的房间布局么???
    

    4.利用空对象做为容器、桥梁

    function Objj(){ }
    Objj.prototype.country="中国";
    Objj.prototype.state="广东";
    //    var F = function(){};
    //    F.prototype = Objj.prototype;
    //    Person.prototype = new F();
    //    Person.prototype.constructor = Person;
    
    //    console.log(Objj.prototype.constructor); // function Objj(){ }
    //    var aaa=new Person('ni',50,'boy')
    //    console.log(aaa.country);
    //上面这段代码的核心在于 如何让两个prototype不指向通一个内存地址。那我们就在内存里面开辟一个新的地址来作为中转站,不影响其他地址。结果就是创建一个实例,因为实例对象开辟了新的内存地址 相当于第2个方法     下面开始把上面的代码封装一下
    function extend (Child,Parent){
        var F=function(){};
        F.prototype=Parent.prototype;
        Child.prototype=new F();
        Child.prototype.constructor=Child;
        Child.uber=Parent.prototype; //保存父级原型链上的属性和方法 以便与后期在Child中进行操作
    }
    
    //5.拷贝继承 也就是遍历以后重新赋值
    function entend2(Child,Parent){
        var a=Child.prototype;
        var b=Parent.prototype;
        for(var i in b){
            a[i]=b[i]
        }
    }
    //如果Child的原型链上有和Parent原型链上相同的属性或者方法 会被Parent给替换掉
    Person.prototype.state='正确';
    entend2(Person,Objj);
    var ccc=new Person('报告大王',100,'妖精');
    console.log(ccc.state);  //广东
    

    相关文章

      网友评论

          本文标题:JS的面向对象的编程思想2-构造函数的继承(阮一峰)

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