ES6/ES7 扩展函数并导出扩展

Question

我是 ES6 的新手，仍然 working/looking 它，我想将我的 KUTE.js 库更新到最新最好的 JavaScript 标准。

我基本上可以创建更多函数，分别在 index.js 和 index-lite.js 中导入它们，但我希望我可以利用 extend 来获得更一致和抽象的代码，另外我不想有两次相同的代码。

一个非常简单的示例如下所示：

// main.js
export const tweens = []

// STANDARD FUNCTIONS
export function Tween(el,start,end,ops){
  this.el = el
  this.start = start
  this.end = end
  return {this.el,this.start,this.end,this.ops}
}
Tween.prototype = {
  start : function(){
    tweens.push(this)
  }
}
export function Render(tw){
  tw.el.style.width = `${tw.start + tw.end}px`
}
export function Update(){
  tweens.forEach(function(tw){
    Render(tw)
  })
}
// index-mini.js
import {Tween,Render,Update} from 'main.js'

// EXTENDED FUNCTIONS
export function TweenExtended(el,start,end,ops,extendingArgument){
  this.el = el
  this.start = start
  this.end = end

  // other stuff before returning the object
  this.extendingProperty = `${extendingArgument} Hello there!`;
  doSomeAction();

  return {this.el,this.start,this.end,this.ops}
}
TweenExtended.prototype = {
  start : function(){
    tweens.push(this)
  },
  stop : function(){
    const i = tweens.indexOf(this)
    if (i !== -1) { tweens.splice(i, 1)
  }
}
export function RenderExtended(tw,ops){
  const widthValue = `${tw.start + tw.end}px`
  tw.el.style.width = widthValue
  // take an extended action
  ops.update ? tw.el.innerHTML = widthValue
}
export function UpdateExtended(ops){
  tweens.forEach(function(tw){
    RenderExtended(tw,ops)
  })
}
// index.js
import {TweenExtended,RenderExtended,UpdateExtended} from 'main.js'

现在，看着 Bergi's answer 我只是想不出一种方法来编写以下内容的有效版本

// main.js
// EXTENDED FUNCTIONS
export function TweenExtended extends Tween(el,start,end,ops,extendingArgument){
  // do what Tween does

  // do other other stuff before returning the object
  this.extendingProperty = `${extendingArgument} Hello there!`;
  doSomeAction();

  return {this.el,this.start,this.end,this.ops}
}
TweenExtended.prototype = {
  // only add the additional methods
  stop : function(){
    const i = tweens.indexOf(this)
    if (i !== -1) { tweens.splice(i, 1)
  }
}
export function RenderExtended extends Render(tw,ops){
  // do what parent functions does
  // now do the extended actions
  const widthValue = `${tw.start + tw.end}px`
  ops.update ? tw.el.innerHTML = widthValue
}
export function UpdateExtended extends Update(ops){
  // this probably needs to be rewritwen entirelly
  tweens.forEach(function(tw){
    RenderExtended(tw,ops)
  })
}
// index.js
import {TweenExtended,RenderExtended,UpdateExtended} from 'main.js'

问题：

export function AExtended extends A，正确的语法是什么？
扩展函数 "merge" 是否可以与其父函数一起使用？
如果我要使用类，是否可以执行 "merger"？
如果有以上任何一项，您能否分享一些tip/sample/example？

Answer 1

extends 关键字适用于类，不适用于函数。虽然在您的原始代码中，对象定义在语法上是 function，但如果您想使此代码适应 ES6 标准，则必须切换到 class 语法。

基本上：

class Tween {
  constructor(...args) {
    // whatever you want on instantiation
  }

  start() {
    // whatever it does
  }
}
...
class TweenExtended extends Tween {
  constructor(...args) {
    super(...args) // this calls the constructor of Tween
    // any additional initialization you want
  }

  stop() {
    // you can override the Tween method or leave it be
  }

  start() {
    // you can any new methods you want
  }
}

然后

export default TweenExtended

或

export TweenExtended

希望对您有所帮助。

ES6/ES7 扩展函数并导出扩展

ES6/ES7 extend functions and export extended

javascript

extends

ecmascript-6

es6-class