Open 5Mi opened 8 years ago
原生构造函数是指语言内置的构造函数,通常用来生成数据结构。ECMAScript的原生构造函数大致有下面这些。
以前,这些原生构造函数是无法继承的,比如,不能自己定义一个Array的子类。
function FakeArray(){ Array.apply(this,arguments); } FakeArray.prototype = []; FakeArray.prototype.constructor = FakeArray; FakeArray.prototype.push = function(){ console.log('监听数组') Array.prototype.push.apply(this,arguments); } let list = [1,2,3] let fakelist = new FakeArray(...list); console.log(fakelist)
上面代码定义了一个继承Array类。但是,这个类的行为与Array完全不一致。
是因为子类无法获得原生构造函数的内部属性,通过Array.apply()或者分配给原型对象都不行。原生构造函数会忽略apply方法传入的this,也就是说,原生构造函数的this无法绑定,导致拿不到内部属性。
ES5是先新建子类的实例对象this,再将父类的属性添加到子类上,由于父类的内部属性无法获取,导致无法继承原生的构造函数。比如,Array构造函数有一个内部属性[[DefineOwnProperty]],用来定义新属性时,更新length属性,这个内部属性无法在子类获取,导致子类的length属性行为不正常。
ES6允许继承原生构造函数定义子类,因为ES6是先新建父类的实例对象this,然后再用子类的构造函数修饰this,使得父类的所有行为都可以继承
class FakeArray extends Array{ push(...args){ console.log('我被改变啦'); return super.push(...args); } } var list = [1, 2, 3]; var arr = new FakeArray(...list); console.log(arr.length) arr.push(3); console.log(arr)
这意味着,ES6可以自定义原生数据结构(比如Array、String等)的子类,这是ES5无法做到的。
extends关键字不仅可以用来继承类,还可以用来继承原生的构造函数。因此可以在原生数据结构的基础上,定义自己的数据结构。下面就是定义了一个带版本功能的数组。
class VersionedArray extends Array { constructor() { super(); this.history = [[]]; } commit() { this.history.push(this.slice()); } revert() { this.splice(0, this.length, ...this.history[this.history.length - 1]); } } var x = new VersionedArray(); x.push(1); x.push(2); x // [1, 2] x.history // [[]] x.commit(); x.history // [[], [1, 2]] x.push(3); x // [1, 2, 3] x.revert(); x // [1, 2]
上面代码中,VersionedArray结构会通过commit方法,将自己的当前状态存入history属性,然后通过revert方法,可以撤销当前版本,回到上一个版本。除此之外,VersionedArray依然是一个数组,所有原生的数组方法都可以在它上面调用
from here
FYI, Babel cannot properly subclass some Built-in classes
原生构造函数是指语言内置的构造函数,通常用来生成数据结构。ECMAScript的原生构造函数大致有下面这些。
以前,这些原生构造函数是无法继承的,比如,不能自己定义一个Array的子类。
上面代码定义了一个继承Array类。但是,这个类的行为与Array完全不一致。
是因为子类无法获得原生构造函数的内部属性,通过Array.apply()或者分配给原型对象都不行。原生构造函数会忽略apply方法传入的this,也就是说,原生构造函数的this无法绑定,导致拿不到内部属性。
ES5是先新建子类的实例对象this,再将父类的属性添加到子类上,由于父类的内部属性无法获取,导致无法继承原生的构造函数。比如,Array构造函数有一个内部属性[[DefineOwnProperty]],用来定义新属性时,更新length属性,这个内部属性无法在子类获取,导致子类的length属性行为不正常。
ES6允许继承原生构造函数定义子类,因为ES6是先新建父类的实例对象this,然后再用子类的构造函数修饰this,使得父类的所有行为都可以继承
这意味着,ES6可以自定义原生数据结构(比如Array、String等)的子类,这是ES5无法做到的。
extends关键字不仅可以用来继承类,还可以用来继承原生的构造函数。因此可以在原生数据结构的基础上,定义自己的数据结构。下面就是定义了一个带版本功能的数组。
上面代码中,VersionedArray结构会通过commit方法,将自己的当前状态存入history属性,然后通过revert方法,可以撤销当前版本,回到上一个版本。除此之外,VersionedArray依然是一个数组,所有原生的数组方法都可以在它上面调用
from here