首页  >  文章  >  web前端  >  Javascript中function函数bind方法实例用法详解

Javascript中function函数bind方法实例用法详解

伊谢尔伦
伊谢尔伦原创
2017-07-20 14:11:463232浏览

Function.prototype.bind()

bind方法用于指定函数内部的this指向(执行时所在的作用域),然后返回一个新函数。bind方法并非立即执行一个函数。


var keith = {
 a: 1,
 count: function() {
 console.log(this.a++);
 }
 };
 keith.count(); //1
 keith.count(); //2
 keith.count(); //3

上面代码中,如果this.a指向keith对象内部的a属性,如果这个方法赋值给另外一个变量,调用时就会出错。


 var keith = {
 a: 1,
 count: function() {
 console.log(this.a++);
 }
 };
 var f = keith.count;
 f(); //NaN

上面代码中,如果把count方法赋值给f变量,那么this对象指向不再是keith对象了,而是window对象。而window.a默认为undefined,进行递增运算之后undefined++就等于NaN。

为了解决这个问题,可以使用bind方法,将keith对象里的this绑定到keith对象上,或者是直接调用。


 var f = keith.count.bind(keith);
 f(); //1
 f(); //2
 f(); //3
 keith.count.bind(keith)() //1
 keith.count.bind(keith)() //2
 keith.count.bind(keith)() //3

 当然,this也可以绑定到其他对象上。


 var obj = {
 a: 100
 };
 var f = keith.count.bind(obj);
 f(); //100
 f(); //101
 f(); //102

同样,我们也可以给bind方法传递参数,第一个参数如果为null或者undefined或者this,会将函数内部的this对象指向全局环境;第二个为调用时需要的参数,并且传递参数的形式与call方法相同。


 function keith(a, b) {
 return a + b;
 }
 console.log(keith.apply(null,[1,4])); //5
 console.log(keith.call(null,1,4)); //5
 console.log(keith.bind(null, 1, 4)); //keith()
 console.log(keith.bind(null, 1, 4)()); //5

上面代码中,可以看出call,apply,bind三者的区别:call和apply方法都是在调用之后立即执行的。而bind调用之后是返回原函数,需要再调用一次才行,有点像闭包的味道

以上是Javascript中function函数bind方法实例用法详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn