//形变类

class Transform {

constructor(selector) {

this.el = document.querySelector(selector)

this._queue = []

// 用来保存每次执行方法的状态，免得被下一个方法覆盖掉前一个方法的位置等值

this.transform = {

translate: '',

scale: '',

rotate: ''

}

this.defaultTime = Transform.config.defaultTime

this.el.style.transition = `all ${0.3}s`

}

// 位移

translate(value, time) {

return this._add('translate', value, time)

}

// 缩放

scale(value, time) {

return this._add('scale', value, time)

}

// 形变

rotate(value, time) {

return this._add('rotate', value, time)

}

//添加动画

_add(type, value, time = this.defaultTime) {

this._queue.push({

type,

value,

time

})

return this

}

//添加完成，可以开始动了

done() {

this._start()

}

// 开始动 从队列中把动画一个个拿出来，拿一个动一个

_start() {

// 先进先出

//  每隔300毫秒执行一次_start(),当队列数组为空就不继续执行

if (this._queue.length == 0) {

return

}

//利用定时器，达到异步效果使每次都有动画效果

/* setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。 */

setTimeout(() => {

const info = this._queue.shift() //利用数组的shift方法达到先进先出效果

console.log(info)

this.el.style.transition = `all ${info.time / 1000}s`

this.el.style.transform = this._getTransform(info)

setTimeout(() => {

this._start()

}, info.time)

}, 0)

}

_getTransform({ type, value, time }) {

const _tsf = this.transform

switch (type) {

case 'translate':

_tsf.translate = `translate(${value})`

break

case 'scale':

_tsf.scale = `scale(${value})`

break

case 'rotate':

_tsf.rotate = `rotate(${value}deg)`

break

}

//返回手动设置方法的数值，直至有下一次相同方法的值传入才覆盖。避免每一步不同方法的值覆盖。

//   例如scale方法的不会覆盖translate方法移动的值，不会返回原位

return `${_tsf.translate} ${_tsf.scale} ${_tsf.rotate}`

}

}

Transform.config = {

defaultTime: 300

}

//继承Transform的类来扩展其他方法

class MultiTransform extends Transform {

multi(value, time) {

return this._add('multi', value, time)

}

_getTransform({ type, value, time }) {

const _tsf = this.transform

switch (type) {

case 'translate':

_tsf.translate = `translate(${value})`

break

case 'scale':

_tsf.scale = `scale(${value})`

break

case 'rotate':

_tsf.rotate = `rotate(${value}deg)`

break

case 'multi':

value.forEach(item => {

this._getTransform(item)

})

}

//返回手动设置方法的数值，直至有下一次相同方法的值传入才覆盖。避免每一步不同方法的值覆盖。

//   例如scale方法的不会覆盖translate方法移动的值，不会返回原位

return `${_tsf.translate} ${_tsf.scale} ${_tsf.rotate}`

}

}

const tf = new MultiTransform('.ball')

tf.translate('100px,100px')

.scale(2)

.rotate(180, 5000)

.multi([

{

type: 'translate',

value: '0,0'

},

{

type: 'scale',

value: 2

}

])

.done()

子类MultiTransform没有自己的star方法没有自己的this.transform等方法。它是如何继承父类的这里方法和属性的？

通过extends关键字继承父类的方法是如何使用父类的方法和父类的属性？