$ .proxy,bind,call,apply之间的区别

Question

旧方式:

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

使用jQuery:

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

使用绑定:

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

随叫随到:

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

似乎申请也有效:

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将是您所期望的.

捆绑

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

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

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

这通过将上下文永久"绑定"到函数来工作.这意味着,无论函数被调用,值都this将始终是第一个参数的值bind.

call/apply

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(context, [param1, param2])).

这两个函数的作用是使用指定的特定上下文调用函数.

但是,这些功能都不能满足您的需求.它们都使用特定的上下文立即调用该函数,而不是等待5秒钟.这是因为call并且apply工作就像():代码立即执行.

结论

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