我致力于改进一些贝塞尔曲线缓动函数,但this
有问题。基本上,是一个 Ease
对象。
Ease.bezier = function(mX1, mY1, mX2, mY2) {
return _bezier.processBezier(mX1, mY1, mX2, mY2);
};
var _bezier = Ease.bezier.prototype;
_bezier.processBezier = function (mX1, mY1, mX2, mY2) {
console.log(this) // this shows the proper object
this.mX1 = mX1;
this.mX2 = mX2;
this.mY1 = mY1;
this.mY2 = mY2;
return _bezier.render;
};
_bezier.render = function(aX){
console.log(this) // this shows another object
if (this.mX1 === this.mY1 && this.mX2 === this.mY2) return aX;
if (aX === 0) return 0;
if (aX === 1) return 1;
return _bezier.computeBezier(_bezier.gx(aX), this.mY1, this.mY2);
};
_bezier.render
函数是绑定(bind)到补间引擎的函数,例如 tween.js ,因此继承了 this
,因此 this.mX1
的值和其他与贝塞尔曲线相关的值在 _bezier.render
函数中未定义。
如果我将 this
替换为 _bezier
,动画会起作用,但将始终对所有其他动画使用最后一个实例的值。
所以,问题是,有没有办法以某种方式从 _bezier.render
函数内的 _bezier.processBezier
获取 this
?
或者也许我可以通过绑定(bind)函数来访问正确的this
来简化代码?
非常感谢。
最佳答案
尝试使用 .bind() 方法来获取正确的“this”:
// ...
_bezier.processBezier = function (mX1, mY1, mX2, mY2) {
console.log(this) // this shows the proper object
this.mX1 = mX1;
this.mX2 = mX2;
this.mY1 = mY1;
this.mY2 = mY2;
// use .bind(this)
return _bezier.render.bind(this);
};
// ...
关于Javascript:获取父级的原型(prototype) `this`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31569200/