ES5之前得继承

本文介绍了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 借用原型对象继承父类型方法
一般情况下,对象的方法都在构造函数的原型对象中设置,通过构造函数无法继承父类方法。
核心原理:

  1. 将子类所共享的方法提取出来写到父类方法身上,让子类的原型对象 = new 父类()
  2. 本质:子类原型对象等于是实例化父类,因为父类实例化之后另外开辟空间,就不会影响原来父类原型对象
  3. 将子类的 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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值