【问题标题】:JavaScript ES2015 dynamic inheritance with browserify and babelifyJavaScript ES2015 动态继承与 browserify 和 babelify
【发布时间】:2016-05-29 19:56:17
【问题描述】:

有没有办法在 ES2015 中使用 Browserify 和 Babelify 进行动态继承?

我需要用额外的功能“构造器”包装一个类“前身”,我不知道前身会是什么,所以我不知道参数的数量或关于它的执行的任何信息。

通常,对于 JS 中的动态继承,我会这样做:

function Constructor() {
  Predecessor.apply(this, arguments); // <<-- this is what I'm trying to do.
}
Constructor.prototype = Object.create(Predecessor.prototype);
Constructor.prototype.constructor = Constructor;

当我尝试使用 ES2015 时:

class Constructor extends Predecessor {
  constructor() {
    super(arguments);
  }
}

super(arguments) 转换为:

var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Singleton).call(this, args));

所以,Predecessor 的执行方式类似于:new Predecessor([arguments]);(数组中的数组)。

  1. 我尝试删除 super 并直接使用Predecessor.apply(this, arguments);,但它会引发错误(必须调用super)。另外,我不想执行 Predecessor 两次。
  2. 出于沮丧,我尝试了super.apply(arguments),但它当然不起作用(引发捆绑错误)。
  3. 我什至尝试了 eval(知道它的所有副作用)但没有成功,这是一个过于复杂的解决方案,甚至不喜欢它。

我不想强迫开发者说所有的参数都将包含在一个数组中,所以:

  1. 我的最后一个资源是假设最大数量的参数:

看起来很糟糕,绝对不是最佳做法:

class Constructor extends Predecessor {
  constructor(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z) {
    super(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z);
  }
}

我当然不喜欢。

那么,它只是 Babelify/Babel 还是 ES2015 中不允许这样做?我可以做些什么来改善这一点(为 Babelify 做贡献)?还是我应该回到旧的实现?

如果你想知道我的编译过程:

{
  // ...
  "scripts": {
    "dist": "./node_modules/browserify/bin/cmd.js ./src/index.js -o ./dist/bundle.js -t [ babelify --presets [ es2015 ] ]",
    // ...
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.9.0",
    "babelify": "^7.3.0",
    "browserify": "^13.0.1",
    // ...
  }
}

【问题讨论】:

  • "删除 super 会引发错误("super must be called")" - 那是 known Babel bug,它应该可以工作。

标签: javascript inheritance browserify babeljs


【解决方案1】:

所以Predecessor 会像你这样执行:new Predecessor([arguments]): array within array

嗯,这就是你写的:super(arguments) 将整个对象传递给一个参数。你需要写super(...arguments) 来传递参数。或者更好的是,在 ES6 中不要再使用 arguments object 而是使用其他参数:

class Constructor extends Predecessor {
  constructor(...args) {
    super(...args);
  }
}

(或者如果您不执行任何其他操作,则直接省略 constructor 方法,因为这是默认行为)。

【讨论】:

  • 我不知道这是可能的
猜你喜欢
  • 1970-01-01
  • 2016-04-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-22
  • 2016-10-21
相关资源
最近更新 更多