Javascript中function函数bind方法实例用法详解
程序员文章站
2022-03-31 15:00:06
...
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方法实例用法详解的详细内容,更多请关注其它相关文章!
下一篇: 关于vue v-model动态生成的介绍