JavaScript高级之继承

Posted 小小白学计算机

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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. 语法糖:语法糖就是一种便捷写法. 简单理解, 有两种方法可以实现同样的功能, 但是一种写法更加清晰、方便,那么这个方法就是语法糖

以上是关于JavaScript高级之继承的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript笔试题(js高级代码片段)

javascript之继承

无敌秘籍之 — JavaScript手写代码

《javascript高级程序设计》学习笔记 | 8.3.继承

新年在家学java之基础篇-高级类的特性

48个值得掌握的JavaScript代码片段(上)