Javascript最开始只是网景公司为了浏览器可以与网页互动设计出的一种脚本语言,因为那个时候面向对象编程极为盛行,它的设计者Brendan Eich受到了影响,Javascript里面所有的数据都是对象。但正因为是这样,必须有一种机制把对象联系起来,所以Brendan Eich最后设计了继承

new

因为JS只是作为一个脚本语言出生的,Brendan Eich并不想让他过于正式和难以学习,所以没有引入类(class)的概念。
但是他考虑到,C++和Java都使用new命令生成实例,因此他把new命令引入Javascript,用来生成一个实例对象,并且new命令后面跟的不是类,而是构造函数。

举例来说,现在有一个叫做DOG的构造函数,表示狗对象的原型。

  1. function DOG(name) { 
  2. this.name = name;
  3. }

对这个构造函数使用new,就会生成一个狗对象的实例。

  1. var dog1 = new DOG('乐乐');  
  2. alert(dog1.name); // 乐乐

但是,用构造函数生成的实例对象有一个缺点就是不能共享属性和方法。每一个实例对象,都有自己的属性和方法的副本。这不仅无法做到数据共享,也是极大的资源浪费。

原型链继承

JavaScript使用了一套实现方式,继承的对象函数并不是通过复制而来,而是通过原型链继承(通常被称为 原型式继承 —— prototypal inheritance)

每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针. 如果试图引用对象(实例instance)的某个属性,会首先在对象内部寻找该属性,直至找不到,然后才在该对象的原型(instance.prototype)里去找这个属性.

基本思想:将父类的实例作为子类的原型。

  1. function Dog(name) {
  2. this.name = name
  3. this.kind = '金毛'
  4. }
  5. Dog.prototype.wangwang = function() {
  6. alert('汪汪汪')
  7. }
  8. let dog1 = new Dog('乐乐')
  9. dog1
  10. //Dog {name: "乐乐", kind: "金毛"}
  11. dog1.wangwang()
  12. //汪汪汪

这种方法本质是通过将子类的原型指向父类的实例实现的,也就是通过让 dog1.proto__ 指向 Dog.prototype,将父类的实例作为子类的原型,原型对象的所有属性被所有实例共享。

  1. dog2 = new Dog('大黄')
  2. dog1.__proto__===Dog.prototype // true
  3. dog2.__proto__===Dog.prototype // true

要注意的是,如果修改了原型对象所有实例也会收到影响。

  1. Dog.prototype.wangwang = '我不想叫了'
  2. dog2.wangwang
  3. "我不想叫了"

使用了原型链后, 当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止,到查找到达原型链的顶部 - 也就是 Object.prototype - 但是仍然没有找到指定的属性,就会返回 undefined.

优点

  1. 非常纯粹的继承关系,实例是子类的实例,也是父类的实例
  2. 父类新增原型方法/原型属性,子类都能访问到
  3. 简单,易于实现

    缺点

  4. 当原型链中包含引用类型值的原型时,该引用类型值会被所有实例共享;

  5. 在创建子类型时,不能向父类型的构造函数中传递参数;
  6. 不能实现多继承。

借用构造函数

因为原型链中的缺点,我们开始使用一种叫做借用构造函数(constructor stealing)的技术(也叫经典继承)。

基本思想:在子类型构造函数的内部通过call调用父类型构造函数,这是继承中唯一不涉及到prototype的继承。

  1. function Dog(name) {
  2. this.name = name
  3. this.kind = '金毛'
  4. }
  5. Dog.prototype.wangwang = function() {
  6. alert('汪汪汪')
  7. }
  8. function dog(name) {
  9. Dog.call(this,name)
  10. }
  11. let dog1 = new dog('乐乐')
  12. dog1

优点

  1. 保证了原型链中引用类型值的独立,不再被所有实例共享
  2. 子类型创建时也能够向父类型传递参数
  3. 可以实现多继承(call多个父类对象)

    缺点

  4. 实例并不是父类的实例,只是子类的实例

  5. 只能继承父类的实例属性和方法,不能继承原型属性/方法
  6. 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

组合继承

组合继承, 有时候也叫做伪经典继承,指的是将原型链和借用构造函数的技术组合到一块,从而发挥两者之长的一种继承模式。
基本思路: 使用原型链实现对原型属性和方法的继承,通过借用构造函数来实现对实例属性的继承。

  1. function Dog(name) {
  2. this.name = name;
  3. this.kind = ["white", "black"];
  4. }
  5. Dog.prototype.sayName = function() {
  6. alert(this.name);
  7. };
  8. function dog(name, age) {
  9. Dog.call(this, name); //继承实例属性,第一次调用Dog()
  10. this.age = age;
  11. }
  12. dog.prototype = new Dog(); //继承父类方法,第二次调用Dog()
  13. dog.prototype.sayAge = function() {
  14. alert(this.age);
  15. }
  16. var dog1 = new dog("乐乐", 5);
  17. dog1.kind.push("yellow");
  18. console.log(dog1.kind);
  19. dog1.sayName();
  20. dog1.sayAge();
  21. var dog1 = new dog("大黄", 10);
  22. console.log(dog1.kind);
  23. dog1.sayName();
  24. dog1.sayAge();


优点

  1. 可以继承实例属性/方法,也可以继承原型属性/方法
  2. 既是子类的实例,也是父类的实例
  3. 不存在引用属性共享问题
  4. 可传参
  5. 函数可复用

    缺点

  6. 组合继承调用了两次父类构造函数,生成了两份实例, 造成了不必要的消耗,

    class继承

    ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。
    基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

Class 可以通过extends关键字实现继承,子类必须在constructor方法中调用super方法,否则新建实例时会报错。
如果子类没有定义constructor方法,这个方法会被默认添加,代码如下。也就是说,不管有没有显式定义,任何一个子类都有constructor方法。

  1. class ColorPoint extends Point {
  2. }
  3. // 等同于
  4. class ColorPoint extends Point {
  5. constructor(...args) {
  6. super(...args);
  7. }
  8. }

父类的静态方法,也会被子类继承。

  1. class A {
  2. static hello() {
  3. console.log('hello world');
  4. }
  5. }
  6. class B extends A {
  7. }
  8. B.hello() // hello world

上面代码中,hello()A类的静态方法,B继承A,也继承了A的静态方法。