javascript - $.proxy, bind, call, apply 的区别

Question

老办法:

var self = this;    
setTimeout(function(){
  console.log(self);
}, 5000);

使用 jQuery:

setTimeout($.proxy(function(){
  console.log(this);
}, this), 5000);

绑定(bind):

setTimeout((function(){
  console.log(this);
}).bind(this), 5000);

随叫随到:

setTimeout((function(){
  console.log(this);
}).call(this), 5000);

似乎 apply 也有效:

setTimeout((function(){
  console.log(this);
}).apply(this), 5000);

http://jsfiddle.net/SYajz/1/

我想知道这些方法之间是否有任何不那么明显的区别

Answer 1

是的，所以我们在这里有三种调用函数的方式。它们都是解决上下文问题的方法，即 this 关键字将根据函数的调用方式具有不同的值。

别名

var self = this;    
setTimeout(function(){
  console.log(self);
}, 5000);

这是一个非常简单的方法。它只是设置一个不会在函数内被覆盖的新变量。该值被关闭，因此当函数在超时后调用时，self 将是您所期望的。

绑定(bind)

setTimeout($.proxy(function(){
  console.log(this);
}, this), 5000);

setTimeout((function(){
  console.log(this);
}).bind(this), 5000);

这两个函数具有相同的结果。这是因为 $.proxy做与 bind 完全相同的事情.但是，bind 是一种新语法，某些较旧的浏览器不支持它。

这是通过将上下文永久“绑定(bind)”到函数来实现的。这意味着，无论函数如何调用，this 的值始终是 bind 的第一个参数的值。

调用/应用

setTimeout((function(){
  console.log(this);
}).call(this), 5000);

setTimeout((function(){
  console.log(this);
}).apply(this), 5000);

同样，这两个函数是相同的。 call之间的唯一区别和 apply是发送给函数的其他参数。 call 需要一个列表(例如 fn.call(context, param1, param2))，而 apply 需要一个数组(fn.apply (上下文，[param1，param2]))。

这两个函数的作用是在指定的特定上下文中调用函数。

但是，这两个函数都不能满足您的要求。他们都在特定的上下文中立即调用该函数，而不是等待 5 秒。这是因为 call 和 apply 的工作方式与 () 相同:代码会立即执行。

结论

哪种方法更合适取决于您的任务。对于简单的操作，别名可能会很好地完成这项工作。但值得记住的是，这引入了另一个变量，并且无法在调用时设置上下文。其他方法在不同情况下也各有优势，尤其是在编写用户提供回调函数的库时。