继承

1.继承的介绍

    
    继承:让一个对象执行另外一个对象的方法
    构造函数的继承:实例继承了构造函数的原型上的属性和方法

    function Fn(){
        this.name = "admin"
    }
    Fn.prototype.age=16;
    Fn.prototype.show=function(){
        console.log(this.name)
    }
    var f1=new Fn()
    var f2=new Fn()
    console.log(f1)//Fn {name: "admin"}
    console.log(f2)//Fn {name: "admin"}
    f1.show();      //admin
    f2.show();      //admin
2.继承-改变this的指向
    函数的方法:
    函数的方法:
    bind()
        多个参数:
            第一个是this指向
            后面的就是实参,传给形参
        执行结束后,得到修改之后的新函数

    call()
        多个参数
            第一个是this指向
            后面的就是实参,传给形参
        会自动执行改变了this的函数

    apply()
        两个参数
            第一个是this指向
            第二个参数是数组,数组里面是实参,传给形参
        会自动执行改变了this的函数


    继承:修改this指向。
    优点:可以继承多个构造函数;缺点:只能继承构造函数,不能继承原型

    function Parent(car){
        this.car = car;
        this.show = function(){
            console.log(this.car)
        }
    }
    Parent.prototype.init = function(){
        console.log(1)
    }
    function Parent2(car){
        this.show2 = function(){
            console.log("parent2")
        }
    }
    function Parent3(car){
        this.show3 = function(){
            console.log("parent3")
        }
    }

    function Child(car){
        Parent.call(this,car)
        Parent2.call(this)
        Parent3.call(this)
        // Parent.apply(this,[car])
        // Parent.bind(this,car)()
    }

    var p = new Parent("大众");
    var c = new Child("桑塔纳");

    
    // c.init()
    p.show()//大众
    p.init()//1
    c.show()//桑塔纳
    c.show2()//没有传参进去就打印parent2
    c.show3()//没有传参进去就打印parent3
3 原型继承1
    // 继承:原型对象的继承。
    // 优点:可以继承原型;缺点:只能继承原型,不能继承构造函数;不方便传参
    function Parent(){}
    Parent.prototype.show = function(car){
        this.car = car
        console.log(this.car)
    }
    

    function Child(){}

    // Child.prototype = Parent.prototype;
    // 因为原型对象是对象,所以注意深浅拷贝的影响
    for(var i in Parent.prototype){
        Child.prototype[i] = Parent.prototype[i]
    }
    Child.prototype.show = function(){
        console.log("斯柯达")
    }

    var p = new Parent();
    var c = new Child();

    p.show("大众")//大众
    c.show("桑塔纳")//斯柯达
 3 原型继承2
    // 继承:原型链的继承。
    // 优点:可以继承原型;缺点:只能继承原型,不能继承构造函数;不方便传参
    function Parent(){}
    Parent.prototype.show = function(car){
        this.car = car
        console.log(this.car)
    }

    function Child(){}
    //Child.prototype指向new出来的实例constructor: ƒ Child()
    // console.log(Child.prototype) 
    Child.prototype = new Parent();
    Child.prototype.show = function(){
        console.log("hahaha")
    }
    
    var p = new Parent();
    var c = new Child();
    p.show("大众")
    c.show("桑塔纳")
    console.log(p)//Parent{car:"大众"}
    console.log(c)//对象访问属性就近原则,不采用深拷贝也可以实现

    // c.__proto__.show()
          // ↑:Child.prototype
    // c.__proto__        .        __proto__.show()
          // ↑:Child.prototype        ↑:Parent.prototype
                // ↑:加了一个show
4. 混合继承      
    构造函数写属性,原型上写方法
    // 继承:混合继承。
    // 优点:既可以继承构造函数,又继承原型;缺点:麻烦
    function Parent(car){
        this.car = car;
        this.show()
    }
    Parent.prototype.show = function(){
        console.log(this.car)
    }

    function Child(car){
        Parent.call(this,car)
    }
    // 原型继承,采用深拷贝;传参了必须用这个
    for(var i in Parent.prototype){
        Child.prototype[i] = Parent.prototype[i]
    }

    // 原型链继承原型时:注意参数,Parent的参数
    // Child.prototype = new Parent();
    //现在没有传参
    Child.prototype.show = function(){
        console.log("hahah")//改写,不影响父级
    }

    
    var p = new Parent("大众");
    var c = new Child("桑塔纳");
posted @ 2019-05-21 15:39  进击的三三  阅读(107)  评论(0编辑  收藏  举报