javascript bind函数

bind函数，顾名思义，用于为调用函数绑定一个作用域，因为this很容易跟丢它原来所在的作用域，直接指向顶层的window对象。具体结论可参见我另一篇博文《javascript的动态this与动态绑定》。本文专注设计一个无侵入的绑定函数。

?

window.name = "the window object"

 

function scopeTest() {

  return this.name

}

 

// calling the function in global scope:

scopeTest()

// -> "the window object"

 

var foo = {

  name: "the foo object!",

  otherScopeTest: function() { return this.name }

}

 

foo.otherScopeTest()

// -> "the foo object!"

window.name = "the window object" function scopeTest() { alert(this.name) } // calling the function in global scope: scopeTest() // -> "the window object" var foo = { name: "the foo object!", otherScopeTest: function() { alert(this.name) } } foo.otherScopeTest() // -> "the foo object!"

运行代码

基于不扩展原生对象的原则，弄了这个bind函数（dom为作用域），用法与Prototype框架的bind差不多。

?

dom.bind = function(fn,context){

 //第二个参数如果你喜欢的话，也可以改为thisObject,scope，

 //总之，是一个新的作用域对象

 if (arguments.length < 2 && context===undefined) return fn;

 var method = fn,

 slice = Array.prototype.slice,

 args = slice.call(arguments, 2) ;

 return function(){//这里传入原fn的参数

   var array = slice.call(arguments, 0);

   method.apply(context,args.concat(array))

 }

用法：第一个参数为需要绑定作用域的函数，第二个为window或各种对象，其他参数随意。

dom = {}; dom.bind = function(fn,context){ if (arguments.length < 2 && context===undefined) return fn; var method = fn, slice = Array.prototype.slice, args = slice.call(arguments, 2); return function(){//这里传入原fn的参数 var array = slice.call(arguments, 0); method.apply(context,args.concat(array)) } } window.name = 'This is window'; var jj = { name: '这是jj', alertName: function() {//绑定失效 alert(this.name); } }; var kk = { name:"kkです" } function run(f) { f(); } run(jj.alertName); var fx2 = dom.bind(jj.alertName,jj) run(fx2); var fx3 = dom.bind(jj.alertName,window) run(fx3); var fx4 = dom.bind(jj.alertName,kk) run(fx4);

运行代码

另一个例子：

dom = {}; dom.bind = function(fn,context){ if (arguments.length < 2 && context===undefined) return fn; var method = fn, slice = Array.prototype.slice, args = slice.call(arguments, 2); return function(){//这里传入原fn的参数 var array = slice.call(arguments, 0); method.apply(context,args.concat(array)) } } var obj = { name: 'A nice demo', fx: function() { alert(this.name + '\n' + Array.prototype.slice.call(arguments,0).join(', ')); } }; var fx2 = dom.bind(obj.fx,obj, 1, 2, 3); fx2(4, 5); // Alerts the proper name, then "1, 2, 3, 4, 5"

运行代码

如果您觉得此文有帮助，可以打赏点钱给我支付宝1669866773@qq.com ，或扫描二维码