前端面试之ES6中的继承！

前端面试之ES6中的继承！

ES6之前并没有给我们提供 extends继承。我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承。

1 call()

两个作用:

1 调用这个函数!

2 修改函数运行时this的指向！

调用方法 某个方法.call()来调用！

第一个参数：当前调用函数this的指向！

后面的参数就是一些普通参数了!

<script>
        // call 方法
        function fun(a, b) {
            console.log('我被调用了！');
            // 原来的this是指向的是window
            console.log(this) // window
            console.log(a + b);
        }
        var obj = {
            description: '函数fun中的this指向被修改了！由原来的window变成了我！'
        }
        // 1 call() 可以调用函数
        // fun.call()
        // 修改函数fun中this的指向！
        // 第一个参数是当前调用函数this的指向 
        // 也就是新的指向对象！ obj
        // 后面的就是一些普通的参数了！
        fun.call(obj, 3, 6);
    </script>

2 借用构造函数继承父类型属性！

核心原理：通过call()把父类型的this指向子类型的this，这样就可以实现子类型继承父类型的属性！

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

        // 这就是借用父构造函数 改变父构造函数中的this指向！
        // 因为当前的this是写在子构造函数里面的!
        // 所以也就完成了我们的目标 指向子构造函数当中的this!
        // 同时我们也可以使用父构造函数中的
        // 属性和方法了！
Father.call(this, uname, age);
    }

    var son = new Son('lvhang', 23);
    console.log(son);

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

注意点： 我们要继承原型对象的方法不能够通过简单的原型对象赋值的方式来实现！

原因：这样直接赋值会有问题， 如果修改了子原型对象， 父原型对象也会跟着一起变化! 这就是所谓的浅拷贝! 只拷贝了地址！

解决方法：我们把父构造函数的实例化对象赋值给子构造函数的原型对象不就可以了吗! 因为父构造函数的实例化对象也能通过对象原型指回父构造函数的原型对象，就能够使用父构造函数中的方法了！同时，父构造函数中也不会有我们子构造函数的方法了 ！也就完成了我们的目标 ---- 借用父构造函数中的原型对象来实现继承！

<script>
        //  借用父构造函数继承属性！
        // 1 父构造函数
        function Father(uname, age) {
            // 父构造函数中的 this指向父构造函数的对象实例
            this.uname = uname;
            this.age = age;
        }
        // 一些共有的属性放在构造函数中
        // 一些共有的方法！放在原型对象上！
        Father.prototype.Say2 = function () {
            console.log('借用原型对象继承父类型方法！');
        }

        function Son(uname, age) {
            // 子构造函数中的 this指向子构造函数的实例
            Father.call(this, uname, age);
        }
        // Son.prototype = Father.prototype;  这样直接赋值会有问题， 如果修改了子原型对象， 父原型对象也会跟着一起变化! 这就是所谓的浅拷贝! 只拷贝了地址！
        // 新方式 我们把父构造函数的实例化对象赋值给子构造函数的原型！不就可以了吗！
        Son.prototype = new Father();
        // 这个是子构造函数专门的方法！
        Son.prototype.Say = function () {
            console.log('shuo');
        }
        var son = new Son('lvhang', 23);
        console.log(son);
        console.log(Father.prototype);
    </script>

但是，这样还有一个问题， 就是子构造函数的原型对象会被替换成 父构造函数 哈哈哈哈! 是不是感觉又回到了起点!

console.log(Son.prototype.constructor);

没事儿 没事儿！ 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数！

Son.prototype = new Father();
            // 1/如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数！
            Son.prototype.constructor = Son;

这不就指回了我们的子构造函数了吗！