ES6躬行记(21)——类的继承

简介:   ES6的继承依然是基于原型的继承,但语法更为简洁清晰。通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的People是父类(即基类或超类)。

  ES6的继承依然是基于原型的继承,但语法更为简洁清晰。通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的People是父类(即基类或超类)。


class People {
  constructor() {
    this.age = 28;
  }
  getAge() {
    return this.age;
  }
  static getName() {
    return "strick";
  }
}
class Man extends People {
  constructor() {
    super();
  }
}
var man = new Man();
Man.getName();          //"strick"
man.getAge();           //28


  由上面的代码可知,子类能继承父类的静态方法和原型方法,而诸如访问器属性、生成器等父类的其它成员也是能继承的。不仅如此,extends关键字右侧继承的不单单是类,还可以是函数、内置对象,甚至是表达式,只要其计算结果合法就行。而合法与否的衡量准则,就是ES6对父类的要求,必须是含构造函数的对象,即能与new运算符组合的对象,像空的对象字面量({})、null、undefined和生成器等都是不允许的。

  在Man类的构造函数中调用了一次super()方法,这是为了能更方便的操作父类而引入的新特性。而super是个特殊的关键字,在类中拥有双重身份,既是方法也是对象,关于对象身份的用法在第5篇中曾有过介绍。


一、super


  当super作为方法使用时,有以下六个注意点。

(1)super()方法相当于父类的构造函数。

(2)只有在子类的构造函数中才能调用super()方法。

(3)如果子类显式地定义了构造函数,那么必须调用super()方法,否则会报错。

(4)如果子类没有定义构造函数,那么会自动调用super()方法。

(5)当子类的构造函数显式地返回一个对象时,就能避免调用super()方法。

(6)在使用this之前,必须先调用super()方法。

1)第五个注意点

  下面用一个示例来描述第五个注意点,限于篇幅省略了父类People的声明。在子类Man的构造函数中注释了super()方法,并将其返回结果改成了一个空对象,这段代码能够正确执行。

class Man extends People {
  constructor() {
    //super();
    return {};
  }
}

2)第六个注意点

  关于第六个注意点,之所以要这么限制,主要和this的初始化有关。调用super()方法不仅能执行父类的构造函数,还能初始化父类的this。而ES6对两个类的this的初始化顺序做了规定,先父类,再子类,因此super()方法要在使用this之前调用。还有一点要注意,就是子类的this会合并父类的this的属性和方法,如下代码所示,在父类People中初始化的自有属性age,能在子类Man中访问。


class People {
  constructor() {
    this.age = 28;
  }
}
class Man extends People {
  constructor() {
    super();
    console.log(this.age);      //28
  }
}
var man = new Man();


3)对象身份

  当super作为对象使用时,在不同的位置,其指向将不同,具体分为两种情况,如下所列。

(1)如果在子类的原型方法中使用super,那么super指向父类的原型。

(2)如果在子类的静态方法中使用super,那么super指向父类。

  下面是一个演示super指向的示例,父类People包含两对同名方法,一个是原型方法,另一个是静态方法;子类Man包含两个只读的访问器属性,其中name是静态的访问器属性。


class People {
  getAge() {
    return 28;
  }
  static getAge() {
    return 30;
  }
  getName() {
    return "freedom";
  }
  static getName() {
    return "strick";
  }
}
class Man extends People {
  get age() {
    return super.getAge();
  }
  static get name() {
    return super.getName();
  }
}
var man = new Man();
man.age;               //28
Man.name;              //"strick"


  由两个访问器属性的读取结果可知,super的指向符合所列的两种情况。注意,像下面这样使用super,会抛出语法错误,因为此处的super无法明确说明自己的身份到底是方法还是对象。

class Man extends People {
  getName() {
    console.log(super);
  }
}


二、表达式


  ES6允许extends关键字的右侧是一个表达式,这使得子类的继承更加灵活,能动态地选择父类,下面用一个示例演示表达式的妙用。


function getPeople(gender) {
  return gender == 1 ? Man : Woman;
}
class Man { }
class Woman { }
class Person extends getPeople(1) { }
var person = new Person();
person instanceof Man;         //true
person instanceof Woman;       //false


  在代码中先声明三个类,其中Man和Woman是父类,Person是子类,再调用能根据参数返回不同类的getPeople()函数,得到的返回值是Man类。通过instanceof运算符的计算结果可知,Person类继承的正是Man类。

1)mixin

  类的这个特性还能解决无法多重继承的问题,如下所示。


function mixin(...objects) {
  function middle() {}
  Object.assign(middle.prototype, ...objects);
  return middle;
}
var man = {
  getMan() {
    return "男";
  }
};
var woman = {
  getWoman() {
    return "女";
  }
};
class Person extends mixin(man, woman) { }
var person = new Person();
person.getMan();          //"男"
person.getWoman();        //"女"


  在代码中先初始化两个对象:man和woman,然后调用mixin()函数,将两个对象的方法合并到内部函数middle()的原型上,最后让Person类继承middle()函数,这样就能调用两个对象中的方法了。

  这种将多个对象或类合并成一个,间接实现多重继承的作法叫做类的模板,也叫抽象子类或mixin(混合)。


三、内置对象


  在ES5时代,像Array、Error等内置对象是不能被继承的,而ES6突破了这个限制,因为ES6的子类能通过this访问父类的内部属性和方法,这样就能继承内置对象的所有功能。以数组为例,模拟的子类无法自动更新length属性,而ES6的子类就不会有这个问题,如下所示。

class List extends Array { }
var list = new List();
list.length;        //0
list.push("a");
list.length;        //1

四、Symbol.species


  在内置对象中,有些方法能返回自己的实例,例如数组的map()、slice()等。当子类继承了内置对象后,这类方法的返回值会被替换成子类的实例,具体如下所示。

class List extends Array { }
var list = new List(1, 2),
  segment = list.slice(0, 1);   //List [1]
segment instanceof List;        //true

  接下来简单分析一下这其中的缘由。在每个内置对象中,都有一个静态的只读访问器属性(类似于下面的代码),其名称是内置符号Symbol.species,返回值是this。

class Array {
  static get [Symbol.species]() {
    return this;
  }
}

  当调用内置对象中的方法时,如果返回值是实例,那么就会先访问Symbol.species属性,确定要实例化哪个类。而根据ES6的规则可知,当子类调用父类的静态方法时,方法中的this指向的是子类,从而就能证明子类在调用内置对象的某些方法时,能得到自身的实例。

  如果想要内置对象的这些方法仍然返回它们自身的实例,那么就需要在子类中也声明一个相同的只读访问器属性,并返回相应的内置对象,以此屏蔽父类中的同名属性。下面的代码和上一个示例类似,只是给子类增加了Symbol.species属性。


class List extends Array {
  static get [Symbol.species]() {
    return Array;
  }
}
var list = new List(1, 2),
  segment = list.slice(0, 1);   //[1]
segment instanceof List;        //false


五、new.target


  元属性new.target曾在第14篇中做过讲解,本节会介绍元属性在父类中的行为,如下所示。

class People {
  constructor() {
    new.target === People;     //false
    new.target === Man;        //true
  }
}
class Man extends People { }
var man = new Man();


  在上面的代码中,Man是子类,People是父类,在父类的构造函数中对new.target做了两次比较,从两次的比较结果中可知,此时的new.target指向的是子类。

 

相关文章
|
18天前
|
设计模式 安全 Java
面向对象编程的精髓:Java设计模式 - 原型模式(Prototype)完全参考手册
【4月更文挑战第7天】原型模式是OOP中的创建型设计模式,用于通过复制现有实例创建新实例,尤其适用于创建成本高或依赖其他对象的情况。它包括Prototype接口、ConcretePrototype实现和Client客户端角色。优点是性能优化、避免子类化和动态增加产品族。实现包括定义原型接口、实现具体原型和客户端调用克隆方法。最佳实践涉及确保克隆正确性、选择深拷贝或浅拷贝及考虑线程安全。但需注意克隆方法管理、性能开销和循环引用等问题。在Java中,实现Cloneable接口和覆盖clone方法可实现原型模式。
|
4月前
|
Python
跟我从0学Python——类的继承和多态
类的继承和多态 —— 面向对象编程的扩展与灵活性
|
2天前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承通过原型链实现共享,节省内存,但不支持私有属性。
13 0
|
4月前
|
设计模式
二十三种设计模式全面解析-原型模式(Prototype Pattern)详解:创造对象的奇妙之道
二十三种设计模式全面解析-原型模式(Prototype Pattern)详解:创造对象的奇妙之道
|
5月前
ES6系列笔记-面向对象/继承
ES6系列笔记-面向对象/继承
20 1
|
8月前
_proto__ 、prototype傻傻分不清楚?
_proto__ 、prototype傻傻分不清楚?
|
8月前
|
存储 安全 编译器
【巧妙继承】C++玩转继承的神级技巧
【巧妙继承】C++玩转继承的神级技巧
|
JavaScript 前端开发 容器
这一次带你彻底搞懂JS继承
这一次带你彻底搞懂JS继承
112 2
|
9月前
类的继承学习记录
类的继承学习记录
44 0
类的继承学习记录
ES6躬行记(20)——类
  ES6正式将类(Class)的概念在语法层面标准化,今后不必再用构造函数模拟类的行为。而ES6引入的类本质上只是个语法糖(即代码更为简洁、语义更为清晰),其大部分功能(例如继承、封装和复用等)均可在ES5中实现,只不过现在能用更符合面向对象的语法来操作类。但诸如接口、protected修饰符等一些面向对象常用的语法,ES6没有给出相关标准。