Question

我现在正在编写自己的js库，我对这段编写代码感到困惑：

vars

var par = document.querySelector('#par');

Element.prototype.fadeIn = function() {
  this.style.opacity = 0;
	var that = this;
  
  var last = +new Date();
  var tick = function() {
  	console.log(this);
    this.style.opacity = +this.style.opacity + (new Date() - last) / 400;
    last = +new Date();

    if (+this.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };
  tick = tick.bind(that);
	tick();
};

par.fadeIn();

这段代码工作正常，但如果我们使用tick.apply（那）而不是绑定 - 它不起作用！有人能解释我为什么吗？

Answer 1

bind和apply（或call就此问题而言）的工作方式完全相同。

apply将函数绑定到给定的this并立即调用它;
bind创建一个绑定到给定this的新函数，但不要调用它。

所以这两个是等价的：

myFunction.call(that)

// and

myFunction.bind(that)() // <- see the extra parenthesis here

所以在你的情况下你可以做到：

tick = tick.bind(that)
tick()

// OR

tick.call(that) // no need for extra assignment, the function is called right away

您还有另一个问题。事实上，当您执行tick = tick.bind(this)时，我会覆盖上面定义的tick函数... requestAnimationFrame(tick)能够使用，因为 tick现在绑定到this。

当您使用通话时，tick未被修改，当requestAnimationFrame触发时，tick功能未受约束。

这是我的建议：

var tick = function () {
  //...
}.bind(that) // now tick is created and instantaneously bound to the correct `this`

tick() // first call

Answer 2

.bind＆＃34;绑定＆＃34;返回函数的上下文，供以后使用，而.apply或.call调用具有给定上下文的函数。

为什么在调用和应用时绑定工作？

2 个答案: