JavaScript高级-----4.继承

2. 继承

2.1 call()

• 可以调用某个函数
• 可以修改函数运行时的this指向（注意是修改此次运行时的this指向，而不是永久的this指向）

<script>
    // call 方法
    function fn(x, y) {
        console.log(this); //修改之前this指向的是window,修改之后this指向的是o这个对象
        console.log(x + y); //3
    }
    var o = {
        name: 'andy'
    };
    // fn();传统的函数调用方法
    // 1. call() 可以调用函数
    fn.call(); //Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

    // 2. call() 可以改变这个函数的this指向 此时这个函数的this 就指向了o这个对象
    fn.call(o, 1, 2); //{name: "andy"}
</script>

2.2 利用构造函数继承父类的属性

ES6之前是利用构造函数继承父类的属性；利用原型对象继承父类的方法。
利用构造函数继承父类的属性的核心方法是：通过call把父类型的this指向子类型的this，这样就可以实现子类型继承父类型的属性。

<script>
    //借用父构造函数继承属性
    //1. 父构造函数
    function Father(uname,age){
        //这里的this原本指向父构造函数的实例对象
        this.uname = uname;
        this.age = age;
    }

    //2. 子构造函数
    function Son(uname, age){
        //这里的this指向子构造函数的对象实例
    }
</script>

现在上述两个构造函数没有任何关系，那么子构造函数如何才可以使用父构造函数的两个属性呢？思路：将父构造函数中的this指向改成子构造函数的实例对象。

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
        // this 指向父构造函数的对象实例father
        console.log(this);
        this.uname = uname;
        this.age = age;
    }


    // 2 .子构造函数 
    function Son(uname, age, score) {
        // this 指向子构造函数的对象实例
        Father.call(this, uname, age); //在调用父类构造方法的同时，将父类的this指向改为son
        this.score = score; //这是子构造函数独有的属性
    }
    var son = new Son('刘德华', 18, 100); //Son {uname: "刘德华", age: 18, score: 100}
    console.log(son); //Son {uname: "刘德华", age: 18, score: 100}

    var farther = new Father('张学友', 20); //父构造函数的this指向还是指向父构造函数的实例对象 Father {uname: "张学友", age: 20}
</script>

在子构造函数中写上Father.call(this, uname, age);这行代码就相当于将父构造函数的代码

console.log(this);
this.uname = uname;
this.age = age;

搬移到子构造函数中。子构造函数就相当于变成了

 // 2 .子构造函数 
    function Son(uname, age, score) {
        // this 指向子构造函数的对象实例
        console.log(this);
        this.uname = uname;
        this.age = age;
        this.score = score; //这是子构造函数独有的属性
    }

2.3 借用原型对象继承父类型方法

之前提到：共有的属性写在构造函数里面，共有的方法写在原型对象里
(1)在父亲的原型对象中添加一个公共方法money()

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    //父构造函数的方法
    Father.prototype.money = function() {
        console.log(1000000);
    }


    // 2 .子构造函数 
    function Son(uname, age, score) {
        Father.call(this, uname, age);
        this.score = score;
    }

    var son = new Son('刘德华', 18, 100);
    console.log(son);
</script>

通过打印儿子可以看出，儿子没有继承父类的money(),儿子只是调用了父亲的构造函数，没有调用父亲的原型对象，所以儿子找不到父亲的money()

(2)若将父构造函数的原型对象赋值给子构造函数的原型对象，如下：

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    //父构造函数的方法
    Father.prototype.money = function() {
        console.log(1000000);
    }


    // 2 .子构造函数 
    function Son(uname, age, score) {
        Father.call(this, uname, age);
        this.score = score;
    }

    //若将父构造函数的原型对象赋值给子构造函数的原型对象，如下
    Son.prototype = Father.prototype;

    var son = new Son('刘德华', 18, 100);
    console.log(son);
</script>

打印儿子，可以发现在儿子的对象原型的指向中(指向Son构造函数的对象原型)果然出现了money方法

（3）再追加子构造函数专门的方法

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    //父构造函数的方法
    Father.prototype.money = function() {
        console.log(1000000);
    }


    // 2 .子构造函数 
    function Son(uname, age, score) {
        Father.call(this, uname, age);
        this.score = score;
    }

    //若将父构造函数的原型对象赋值给子构造函数的原型对象，如下
    Son.prototype = Father.prototype;
    //子构造函数专门的方法
    Son.prototype.exam = function() {
        console.log("考试");
    }

    var son = new Son('刘德华', 18, 100);
    console.log(son);
    //此时再打印一下父构造函数的原型对象
    console.log(Father.prototype);
</script>

此时出现问题：子构造函数的原型对象有从父构造函数中继承过来的money()也有自己独有的exam(),但是父构造函数的原型对象中也有子构造函数原型对象独有的方法exam()

出错原因：Son.prototype = Father.prototype;相当于将父原型对象的地址给子原型对象，即让子原型对象指向父原型对象。此时若修改子原型对象，那么父原型对象回一起被修改。那么正确的继承方法是什么呢？

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
        // this 指向父构造函数的对象实例father

        this.uname = uname;
        this.age = age;
    }
    //父构造函数的方法
    Father.prototype.money = function() {
        console.log(1000000);
    }


    // 2 .子构造函数 
    function Son(uname, age, score) {
        // this 指向子构造函数的对象实例
        Father.call(this, uname, age); //在调用父类构造方法的同时，将父类的this指向改为son
        this.score = score; //这是子构造函数独有的属性
    }
    
    //正确的继承方法
    Son.prototype = new Father(); 
 
    //子构造函数专门的方法
    Son.prototype.exam = function() {
        console.log("考试");
    }

    var son = new Son('刘德华', 18, 100);
    console.log(son); 
    console.log(Father.prototype);
</script>

说明：Son.prototype = new Father();

• 父构造函数创建了一个实例对象，同时将其地址赋值给Son的原型对象，即让Son的原型对象指向这个Father的实例对象
• 而Father的实例对象可以通过自己的对象原型__proto__访问Father的原型对象prototype(链式查找)
• 而Father的原型对象prototype中存放着money这个方法

上述代码console.log(son);的执行结果

console.log(Father.prototype);打印结果如下，父亲的原型对象中没有多添加子类的exam（）

但是打印console.log(Son.prototype.constructor);的时候，发现Son.prototype中的constructor指回的是父亲的构造函数

原因：Son.prototype = new Father();等同于Son.prototype={}说明Son.prototype中的方法完全被覆盖了，Son就没有自己原先的constructor，修改办法：Son.prototype.constructor = Son;如下

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
        // this 指向父构造函数的对象实例father

        this.uname = uname;
        this.age = age;
    }
    //父构造函数的方法
    Father.prototype.money = function() {
        console.log(1000000);
    }


    // 2 .子构造函数 
    function Son(uname, age, score) {
        // this 指向子构造函数的对象实例
        Father.call(this, uname, age); //在调用父类构造方法的同时，将父类的this指向改为son
        this.score = score; //这是子构造函数独有的属性
    }

    Son.prototype = new Father(); 

    //修改办法：如果利用对象的形式修改了原型对象，别忘了用constructor指回原来的构造函数
    Son.prototype.constructor = Son;

    //子构造函数专门的方法
    Son.prototype.exam = function() {
        console.log("考试");
    }

    var son = new Son('刘德华', 18, 100);
    console.log(son); //Son {uname: "刘德华", age: 18, score: 100}
    console.log(Father.prototype);
    console.log(Son.prototype.constructor); //！！！指向了父构造函数
</script>