5Mi / wumi_blog

for recording improvimg my experience
21 stars 0 forks source link

es原生构造函数的继承 #65

Open 5Mi opened 8 years ago

5Mi commented 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

Naeemo commented 7 years ago

FYI, Babel cannot properly subclass some Built-in classes