JavaScript高级之继承

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

2.1 call()

调用这个函数, 并且修改函数运行时的 this 指向

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

  1. thisArg :当前调用函数 this 的指向对象
  2. arg1,arg2:传递的其他参数
    在这里插入图片描述

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

核心原理: 通过 call() 把父类型的 this 指向子类型的 this ,这样就可以实现子类型继承父类型的属性
在这里插入图片描述

	// 父类
    function Person(name, age, sex) {
    
    
      this.name = name;
      this.age = age;
      this.sex = sex;
    }
    // 子类
    function Student(name, age, sex, score) {
    
    
      Person.call(this, name, age, sex);  // 此时父类的 this 指向子类的 this,同时调用这个函数
      this.score = score;
    }
    var s1 = new Student('zs', 18, '男', 100);
    console.dir(s1); 

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

一般情况下,对象的方法都在构造函数的原型对象中设置,通过构造函数无法继承父类方法

核心原理:

  1. 将子类所共享的方法提取出来,让子类的 prototype 原型对象 = new 父类()
  2. 本质:子类原型对象等于是实例化父类,因为父类实例化之后另外开辟空间,就不会影响原来父类原型对象
  3. 将子类的 constructor 从新指向子类的构造函数

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. 类的本质

  1. class本质还是function.
  2. 类的所有方法都定义在类的prototype属性上
  3. 类创建的实例,里面也有__proto__ 指向类的prototype原型对象
    4.所以ES6的类它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
    5.所以ES6的类其实就是语法糖.
  4. 语法糖:语法糖就是一种便捷写法. 简单理解, 有两种方法可以实现同样的功能, 但是一种写法更加清晰、方便,那么这个方法就是语法糖

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44827418/article/details/120038337