Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

JavaScript1.8的函数bind方法

  在JavaScript1.8中,Function对象的prototype有个内置的bind方法。这就意味着所有function对象都有个bind方法,这个是个啥呢?不要用多了低版本的jQuery,看到bind就想到事件那边去了。这里的bind可不是事件,只是把函数绑定上默认参数的方法而已。
  直接来看个代码吧 var f,o,fo,name="SB";
o={name:"次碳酸钴"};
f=function(e){console.log(this.name+":"+e)};
fo=f.bind(o,"颤抖吧人类!");

f("直接调用时参数是有效的!");
fo("这里的参数不会传到e!");

  这个代码中创建了一个具有name属性的对象和一个会输出this.name和参数的函数。如果直接调用函数,this是指向window的,所以是前面定义的“SB”,传入的参数也依然有效。我们调用了f函数的bind方法,绑定了o到它内部的this上,并且设置上调用时候的参数列表。最后把生成的函数放入fo中。当调用fo时,传入的参数会附加到bind时候设置好的参数列表的末尾上。就像这样:
var f=function(a,b){
  alert(this); //1
  alert(a); //2
  alert(b); //3
}.bind(1,2);

f(3);
  这个方法是从IE9开始兼容的,在低版本浏览器上,我们需要手动实现。这也不难,从上面这结果就可以看出,当我们调用bind时候实际上是给f这个函数加了个外壳,调用fo时实际上是在调用f.call。所以,我们照着这个样子实现就行。下面是代码 Function.prototype.bind=function(){
  var that=this,args=Array.prototype.slice.call(arguments,0);
  return function(){
    return Function.call.apply(
      that,args.concat(Array.prototype.slice.call(arguments,0))
    );
  };
};
  我是直接在call上调用apply传入参数列表来实现的。不要被这个嵌套搞混乱了,我们要做的是把调用bind时候传入的参数作为调用fo时候call的参数来使用。要把一个数组作为函数的参数来使用当然是apply了,于是就调用了call的apply。apply的第一个参数是传给原函数的this,原函数是call,call的this应该是f这个函数,它保存在that中,所以apply的第一个参数是that。第二个参数是bind时传入的参数列表这就毋庸置疑了。当然,这只是我的实现方式而已,我见过的其它实现方式还有把argumets的第一个元素shift出来,当独作为call的第一个参数来使用的。总之,功能的实现就是八仙过海各显神通啦~
网名:
54.211.148.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^