Question

我是ES6的新手，仍在研究/学习ES6，我想将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，正确的语法是什么？
扩展功能是否可能与其父功能“合并”？
如果我要使用类，是否可以进行“合并”？
以上任何一种情况，可以请您分享一些提示/示例/示例吗？

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扩展功能并导出扩展

1 个答案: