JS编程建议——73:函数绑定有价值

简介: 73:函数绑定有价值

建议73:函数绑定有价值
函数绑定就是为了纠正函数的执行上下文,特别是当函数中带有this关键字的时候,这一点尤其重要,稍微不小心,就会使函数的执行上下文发生跟预期不同的改变,导致代码执行上的错误。函数绑定具有3个特征:
函数绑定要创建一个函数,可以在特定环境中以指定参数调用另一个函数。
一个简单的bind()函数接收一个函数和一个环境,返回一个在给定环境中调用给定函数的函数,并且将所有参数原封不动地传递过去。
被绑定函数与普通函数相比有更多的开销,它们需要更多内存,同时也因为多重函数调用而稍微慢一点,最好只在必要时使用。
第一个特征常常和回调函数及事件处理函数一起使用。
var handler = {

message : 'Event handled',
handleClick : function(event) {
    alert(this.message);
}

};
var btn = document.getElementById('my-btn');
EventUtil.addHandler(btn, 'click', handler.handleClick); //undefined
出现上述结果的原因在于没有保存handler.handleClick()环境(上下文环境),所以this对象最后指向了DOM按钮而非handler。可以使用闭包修正此问题:
var handler = {

message : 'Event handled',
handleClick : function(event) {
    alert(this.message);
}

};
var btn = document.getElementById('my-btn');
EventUtil.addHandler(btn, "click", function(event) {

handler.handleClick(event);

});
这是特定于这段代码的解决方案。创建多个闭包可能会令代码变得难于理解和调试,因此,很多JavaScript库实现了一个可以将函数绑定到指定环境的函数bind()。
bind()函数的功能是提供一个可选的执行上下文传递给函数,并且在bind()函数内部返回一个函数,以纠正在函数调用上出现的执行上下文发生的变化。最容易出现的错误就是回调函数和事件处理程序一起使用。
function bind(fn, context) {

return function() {
    return fn.apply(context, arguments);
};

}
在bind()中创建一个闭包,该闭包使用apply调用传入的参数,并为apply传递context对象和参数。
注意:这里使用的arguments对象是内部函数的,而非bind()的。在调用返回的函数时,会在给定的环境中执行被传入的函数并给出所有参数。
var handler = {

message : 'Event handled',
handleClick : function(event) {
    alert(this.message);
}

};
var btn = document.getElementById('my-btn');
EventUtil.addHandler(btn, "click", bind(handler.handlerClick, handler));

相关文章
|
2月前
|
存储 JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果+1
JavaScript编程实现tab选项卡切换的效果+1
|
1天前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
9 2
|
9天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
11天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
20天前
|
JavaScript 前端开发
js教程——函数
js教程——函数
21 4
|
19天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
14 2
|
22天前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
22 5
|
21天前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
19 3
|
25天前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
15 3
|
26天前
|
JavaScript 前端开发
在JS中如何声明一个函数
在JS中如何声明一个函数
23 2