ES5之前得继承

浩哥学习编程之路

于 2021-06-12 18:05:00 发布

阅读量85

点赞数

分类专栏： js

原文链接：https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4

版权

js 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中ES6之前通过构造函数+原型对象实现的组合继承，包括call()方法的应用、构造函数继承父类型属性和原型对象继承父类型方法。通过实例演示了如何借用构造函数和原型来模拟继承过程。

摘要由CSDN通过智能技术生成

一.ES6之前并没有给我们提供 extends 继承。我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承。
1.call() 调用这个函数, 并且修改函数运行时的 this 指向

fun.call(thisArg, arg1, arg2, ...)

thisArg ：当前调用函数 this 的指向对象
arg1，arg2：传递的其他参数

代码演示

       // call 方法
        function fn(x, y) {
            console.log('我想喝手磨咖啡');
            console.log(this);
            console.log(x + y);
        }
        var o = {
            name: 'andy'
        };
        // fn();
        // 1. call() 可以调用函数
        // fn.call();
        // 2. call() 可以改变这个函数的this指向 此时这个函数的this 就指向了o这个对象
        fn.call(o, 1, 2);

2.借用构造函数继承父类型属性
核心原理：通过 call() 把父类型的 this 指向子类型的 this ，这样就可以实现子类型继承父类型的属性。
代码演示

 // 借用父构造函数继承属性
        // 1. 父构造函数
        function Father(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        // 2 .子构造函数 
        function Son(uname, age, score) {
            // this 指向子构造函数的对象实例
            Father.call(this, uname, age) //这句话得意思是把父构造函数中得this指向子构造函数中this
        }
        var son = new Son('hh', 18, 100);
        console.log(son);

3 借用原型对象继承父类型方法
一般情况下，对象的方法都在构造函数的原型对象中设置，通过构造函数无法继承父类方法。
核心原理：

将子类所共享的方法提取出来写到父类方法身上，让子类的原型对象 = new 父类()
本质：子类原型对象等于是实例化父类，因为父类实例化之后另外开辟空间，就不会影响原来父类原型对象
将子类的 constructor 从新指向子类的构造函数
代码演示

 <script>
        // 定义一个父亲
        function Father(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        Father.prototype.showing = function() {
            console.log(this.uname);
        }
        var father1 = new Father('hh', 20);
        father1.showing();
        // 定义一个儿子
        function Son(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        // 原型继承 子类得原型 继承 父类得实例
        Son.prototype = new Father();
        // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
        Son.prototype.constructor = Son
        var son1 = new Son('ah', 21);
        son1.showing()
    </script>