老生常谈ES6中的类(6)

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

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

【内建对象的继承】

自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稍有不同,主要体现在两个方面

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

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对象来创建自己的派生数组类型,当然也可以继承其他的内建对象

【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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyjypx.html