您的位置:首页
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
相关文章推荐
- ES6里关于数字的拓展
- ES6下关于对象继承的新方法
- ES6中关于数据类型的拓展:Symbol类型
- ES6里关于类的拓展(一)
- 【C++的探索路11】继承与派生之拓展篇--多形式派生以及派生类指针转换
- 关于ES5中的prototype与ES6中class继承的比较
- 关于继承,不同继承方式,对于派生类成员以及基类的可见性
- ES6里关于字符串的拓展
- ES6里关于正则表达式的拓展
- ES6里关于函数的拓展(二)
- ES6里关于模板字面量的拓展
- (转)关于继承,不同继承方式,对于派生类成员以及基类的可见性
- ES6里关于函数的拓展(一)
- ES6里关于作用域的拓展:块级作用域
- 关于继承,不同继承方式,对于派生类成员以及基类的可见性
- 关于基类派生类的继承访问权限
- 关于多继承的派生类中数据成员的偏移量
- ES6里关于函数的拓展(三)
- 关于Java继承
- 派生类StudentB对基类StudentA的继承