您的位置:首页

ES6里关于类的拓展(二):继承与派生类

2017-12-07 22:47 253 查看

继承与派生类

  在ES6之前,实现继承与自定义类型是一个不小的工作。严格意义上的继承需要多个步骤实现

function Rectangle(length, width) {
this.length = length;
this.width = width;
}
Rectangle.prototype.getArea = function() {
return this.length * this.width;
};
function Square(length) {
Rectangle.call(this, length, length);
}
Square.prototype = Object.create(Rectangle.prototype, {
constructor: {
value:Square,
enumerable: true,
writable: true,
configurable: true
}
});
var square = new Square(3);
console.log(square.getArea()); // 9
console.log(square instanceof Square); // true
console.log(square instanceof Rectangle); // true


  Square继承自Rectangle,为了这样做,必须用一个创建自Rectangle.prototype的新对象重写Square.prototype并调用Rectangle.call()方法。JS新手经常对这些步骤感到困惑,即使是经验丰富的开发者也常在这里出错

  类的出现让我们可以更轻松地实现继承功能,使用熟悉的extends关键字可以指定类继承的函数。原型会自动调整,通过调用super()方法即可访问基类的构造函数

class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}
getArea() {
return this.length * this.width;
}
}
class Square extends Rectangle {
constructor(length) {
// 与 Rectangle.call(this, length, length) 相同
        super(length, length);
}
}
var square = new Square(3);
console.log(square.getArea()); // 9
console.log(square instanceof Square); // true
console.log(square instanceof Rectangle); // true


  这一次,square类通过extends关键字继承Rectangle类,在square构造函数中通过super()调用Rectangle构造函数并传入相应参数。请注意,与ES5版本代码不同的是,标识符Rectangle只用于类声明(extends之后)

  继承自其他类的类被称作派生类,如果在派生类中指定了构造函数则必须要调用super(),如果不这样做程序就会报错。如果选择不使用构造函数,则当创建新的类实例时会自动调用super()并传入所有参数

class Square extends Rectangle {
// 没有构造器
}
// 等价于:
class Square extends Rectangle {
constructor(...args) {
super(...args);
}
}


  示例中的第二个类是所有派生类的等效默认构造函数,所有参数按顺序被传递给基类的构造函数。这里展示的功能不太正确,因为square的构造函数只需要一个参数,所以最好手动定义构造函数

  注意事项

  使用super()时有以下几个关键点

  1、只可在派生类的构造函数中使用super(),如果尝试在非派生类(不是用extends声明的类)或函数中使用则会导致程序抛出错误

  2、在构造函数中访问this之前一定要调用super(),它负责初始化this,如果在调用super()之前尝试访问this会导致程序出错

  3、如果不想调用super(),则唯一的方法是让类的构造函数返回一个对象

1、类方法遮蔽

  派生类中的方法总会覆盖基类中的同名方法。比如给square添加getArea()方法来重新定义这个方法的功能

class Square extends Rectangle {
constructor(length) {
super(length, length);
}
// 重写并屏蔽 Rectangle.prototype.getArea()
getArea() {
return this.length * this.length;
}
}


  由于为square定义了getArea()方法,便不能在square的实例中调用Rectangle.prototype.getArea()方法。当然,如果想调用基类中的该方法,则可以调用super.getArea()方法

class Square extends Rectangle {
constructor(length) {
super(length, length);
}
// 重写、屏蔽并调用了 Rectangle.prototype.getArea()
getArea() {
return super.getArea();
}
}


  以这种方法使用Super,this值会被自动正确设置,然后就可以进行简单的方法调用了

2、静态成员继承

  如果基类有静态成员,那么这些静态成员在派生类中也可用。JS中的继承与其他语言中的继承一样,只是在这里继承还是一个新概念

class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}
getArea() {
return this.length * this.width;
}
static create(length, width) {
return new Rectangle(length, width);
}
}
class Square extends Rectangle {
constructor(length) {
// 与 Rectangle.call(this, length, length) 相同
super(length, length);
}
}
var rect = Square.create(3, 4);
console.log(rect instanceof Rectangle); // true
console.log(rect.getArea()); // 12
console.log(rect instanceof Square); // false


  在这段代码中,新的静态方法create()被添加到Rectangle类中,继承后的Square.create()与Rectangle.create()的行为很像

  注意:虽然是Square.create(),但是还是return的new Rectangle(length, width);,所以他是Rectangle的实例,这点需要注意。

3、派生自表达式的类

  ES6最强大的一面或许是从表达式导出类的功能了。只要表达式可以被解析为一个函数并且具有[[Construct]属性和原型,那么就可以用extends进行派生

function Rectangle(length, width) {
this.length = length;
this.width = width;
}
Rectangle.prototype.getArea = function() {
return this.length * this.width;
};
class Square extends Rectangle {
constructor(length) {
super(length, length);
}
}
var x = new Square(3);
console.log(x.getArea()); // 9
console.log(x instanceof Rectangle); // true


  Rectangle是一个ES5风格的构造函数,Square是一个类,由于Rectangle具有[[Construct]]属性和原型,因此Square类可以直接继承它

  extends强大的功能使类可以继承自任意类型的表达式,从而创造更多可能性,例如动态地确定类的继承目标

function Rectangle(length, width) {
this.length = length;
this.width = width;
}
Rectangle.prototype.getArea = function() {
return this.length * this.width;
};
function getBase() {
return Rectangle;
}
class Square extends getBase() {
constructor(length) {
super(length, length);
}
}
var x = new Square(3);
console.log(x.getArea()); // 9
console.log(x instanceof Rectangle); // true


  getBase()函数是类声明的一部分,直接调用后返回Rectangıe(这还是挺有趣的),此示例实现的功能与之前的示例等价。由于可以动态确定使用哪个基类,因而可以创建不同的继承方法

let SerializableMixin = {
serialize() {
return JSON.stringify(this);
}
};
let AreaMixin = {
getArea() {
return this.length * this.width;
}
};
function mixin(...mixins) {
var base = function() {};
Object.assign(base.prototype, ...mixins);
return base;
}
class Square extends mixin(AreaMixin, SerializableMixin) {
constructor(length) {
super();
this.length = length;
this.width = length;
}
}
var x = new Square(3);
console.log(x.getArea()); // 9
console.log(x.serialize()); // "{"length":3,"width":3}"


  这个示例使用了mixin函数代替传统的继承方法,它可以接受任意数量的mixin对象作为参数。首先创建一个函数base,再将每一个mixin对象的属性值赋值给base的原型,最后minxin函数返回这个base函数,所以Square类就可以基于这个返回的函数用extends进行扩展。由于使用了extends,因此在构造函数中需要调用super()

  Square的实例拥有来自AreaMixin对象的getArea()方法和来自SerializableMixin对象的serialize方法,这都是通过原型继承实现的,mixin()函数会用所有mixin对象的自有属性动态填充新函数的原型。如果多个mixin对象具有相同属性,那么只有最后一个被添加的属性被保留

  注意:在extends后可以使用任意表达式,但不是所有表达式最终都能生成合法的类。如果使用null或生成器函数会导致错误发生,类在这些情况下没有[[Consturct]]属性,尝试为其创建新的实例会导致程序无法调用[[Construct]]而报错

4、内建对象的继承

  自JS数组诞生以来,一直都希望通过继承的方式创建属于自己的特殊数组。在ES5中这几乎是不可能的,用传统的继承方式无法实现这样的功能

// 内置数组的行为
var colors = [];
colors[0] = "red";
console.log(colors.length); // 1
colors.length = 0;
console.log(colors[0]); // undefined
// 在 ES5 中尝试继承数组
function MyArray() {
Array.apply(this, arguments);
}
MyArray.prototype = Object.create(Array.prototype, {
constructor: {
value: MyArray,
writable: true,
configurable: true,
enumerable: true
}
});
var colors = new MyArray();
colors[0] = "red";
console.log(colors.length); // 0
colors.length = 0;
console.log(colors[0]); // "red"


  这段代码最后console.log()的输出结果与预期不符,MyArray实例的length和数值型属性的行为与内建数组中的不一致,这是因为通过传统JS继承形式实现的数组继承没有从Array.apply()或原型赋值中继承相关功能

  ES6类语法的一个目标是支持内建对象继承,因而ES6中的类继承模型与ES5稍有不同,主要体现在两个方面:

  (1)在ES5的传统继承方式中,先由派生类型(如MyArray)创建this的值,然后调用基类型的构造函数(如Array.apply()方法)。这也意味着,this的值开始指向MyArray的实例,但是随后会被来自Array的其他属性修饰

  (2)ES6中的类继承则与之相反,先由基类(Array)创建this的值,然后派生类的构造函数(MyArray)再修改这个值。所以一开始可以通过this访问基类的所有内建功能,然后再正确地接收所有与之相关的功能

class MyArray extends Array {
// 空代码块
}
var colors = new MyArray();
colors[0] = "red";
console.log(colors.length); // 1
colors.length = 0;
console.log(colors[0]); // undefined


  MyArray直接继承自Array,其行为与Array也很相似,操作数值型属性会更新length属性,操作length属性也会更新数值型属性。于是,可以正确地继承Array对象来创建自己的派生数组类型,当然也可以继承其他的内建对象

5、Symbol.species属性

  内建对象继承的一个实用之处是,原本在内建对象中返回实例自身的方法将自动返回派生类的实例。所以,如果有一个继承自Array的派生类MyArray,那么像slice()这样的方法也会返回一个MyArray的实例

class MyArray extends Array {
// 空代码块
}
let items = new MyArray(1, 2, 3, 4),
subitems = items.slice(1, 3);
console.log(items instanceof MyArray); // true
console.log(subitems instanceof MyArray); // true


  正常情况下,继承自Array的slice()方法应该返回Array的实例,但是在这段代码中,slice()方法返回的是MyArray的实例。在浏览器引擎背后是通过Symbol.species属性实现这一行为

  Symbol.species是诸多内部Symbol中的一个,它被用于定义返回函数的静态访问器属性。被返回的函数是一个构造函数,每当要在实例的方法中(不是在构造函数中)创建类的实例时必须使用这个构造函数。以下这些内建类型均己定义Symbol.species属性

Array
ArrayBuffer
Map
Promise
RegExp
Set
Typed arrays


  列表中的每个类型都有一个默认的symbol.species属性,该属性的返回值为this,这也意味着该属性总会返回构造函数

// 几个内置类型使用 species 的方式类似于此
class MyClass {
static get [Symbol.species]() {
return this;
}
constructor(value) {
this.value = value;
}
clone() {
return new this.constructor[Symbol.species](this.value);
}
}


  在这个示例中,Symbol.species被用来给MyClass赋值静态访问器属性。这里只有一个getter方法却没有setter方法,这是因为在这里不可以改变类的种类。调用this.constructor[Symbol.species]会返回MyClass,clone()方法通过这个定义可以返回新的实例,从而允许派生类覆盖这个值

class MyClass {
static get [Symbol.species]() {
return this;
}
constructor(value) {
this.value = value;
}
clone() {
return new this.constructor[Symbol.species](this.value);
}
}
class MyDerivedClass1 extends MyClass {
// 空代码块
}
class MyDerivedClass2 extends MyClass {
static get [Symbol.species]() {
return MyClass;
}
}
let instance1 = new MyDerivedClass1("foo"),
clone1 = instance1.clone(),
instance2 = new MyDerivedClass2("bar"),
clone2 = instance2.clone();
console.log(clone1 instanceof MyClass); // true
console.log(clone1 instanceof MyDerivedClass1); // true
console.log(clone2 instanceof MyClass); // true
console.log(clone2 instanceof MyDerivedClass2); // false


  在这里,MyDerivedClass1继承MyClass时未改变Symbol.species属性,由于this.constructor[Symbol.species]的返回值是MyDerivedClass1,因此调用clone()返回的是MyDerivedClass1的实例;MyDerivedClass2继承MyClass时重写了Symbol.species让其返回MyClass,调用MyDerivedClass2实例的clone()方法时,返回值是一个MyClass的实例。通过Symbol.species可以定义当派生类的方法返回实例时,应该返回的值的类型

  数组通过Symbol.species来指定那些返回数组的方法应当从哪个类中获取。在一个派生自数组的类中,可以决定继承的方法返回何种类型的对象

class MyArray extends Array {
static get [Symbol.species]() {
return Array;
}
}
let items = new MyArray(1, 2, 3, 4),
subitems = items.slice(1, 3);
console.log(items instanceof MyArray); // true
console.log(subitems instanceof Array); // true
console.log(subitems instanceof MyArray); // false


  这段代码重写了MyArray继承自Array的Symbol.species属性,所有返回数组的继承方法现在将使用Array的实例,而不使用MyArray的实例

  一般来说,只要想在类方法中调用this.constructor,就应该使用Symbol.species属性,从而让派生类重写返回类型。而且如果正从一个已定义Symbol.species属性的类创建派生类,那么要确保使用那个值而不是使用构造函数

6、在类的构造函数中使用new.target

  new.target及它的值根据函数被调用的方式而改变。在类的构造函数中也可以通过new.target来确定类是如何被调用的。简单情况下,new.target等于类的构造函数

class Rectangle {
constructor(length, width) {
console.log(new.target === Rectangle);
this.length = length;
this.width = width;
}
}
// new.target 就是 Rectangle
var obj = new Rectangle(3, 4); // 输出 true


  这段代码展示了当调用new Rectangle(3.4)时等价于Rectangle的new.target。类构造函数必须通过new关键字调用,所以总是在类的构造函数中定义new.target属性,但是其值有时会不同

class Rectangle {
constructor(length, width) {
console.log(new.target === Rectangle);
this.length = length;
this.width = width;
}
}
class Square extends Rectangle {
constructor(length) {
super(length, length)
}
}
// new.target 就是 Square
var obj = new Square(3); // 输出 false


  Square调用Rectangle的构造函数,所以当调用发生时new.target等于Square。这一点非常重要,因为每个构造函数都可以根据自身被调用的方式改变自己的行为

// 静态的基类
class Shape {
constructor() {
if (new.target === Shape) {
throw new Error("This class cannot be instantiated directly.")
}
}
}
class Rectangle extends Shape {
constructor(length, width) {
super();
this.length = length;
this.width = width;
}
}
var x = new Shape(); // 抛出错误
var y = new Rectangle(3, 4); // 没有错误
console.log(y instanceof Shape); // true


  在这个示例,每当new.target是Shape时构造函数总会抛出错误,这相当于调用new Shape()时总会出错。但是,仍可用Shape作为基类派生其他类,示例中的Rectangle便是这样。super()调用执行了Shape的构造函数,new.target与Rectangle等价,所以构造函数继续执行不会抛出错误

  注意:因为类必须通过new关键字才能调用,所以在类的构造函数中,new.target属性永远不会是undefined
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: