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

前端之家收集整理的这篇文章主要介绍了javascript – $.proxy,bind,call,apply之间的区别前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
旧方式:
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/

我想知道这些方法之间是否有明显的区别

解决方法

对,所以我们有三种调用函数的样式.它们都是解决上下文问题的方法,即根据函数调用方式,该关键字将具有不同的值.

别名

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

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

捆绑

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

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

这两个功能具有相同的结果.这是因为$.proxybind完全一样,bind,但是,这是一种旧的浏览器不支持的新语法.

这通过将上下文永久“绑定”到一个函数.这意味着,但是函数调用,它的值将永远是第一个绑定参数的值.

调用/应用

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

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

同样,这两个功能是相同的. callapply之间的唯一区别是其他参数发送到一个功能.调用期望一个列表(例如fn.call(context,param1,param2)),而应用程序期望一个数组(fn.apply(context,[param1,param2])).

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

然而,这些功能都不会做你想要的.他们都使用某个上下文立即调用函数,而不是等待5秒钟.这是因为调用和应用工作就像():代码立即执行.

结论

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

猜你在找的JavaScript相关文章