Javascript

Javascript 中向回调方法传递参数

Posted by cl9000 on June 03, 2020

人只有献身于社会，才能找出那短暂而有风险的生命的意义。 ——<阿尔伯特·爱因斯坦>

回调函数

通常下，你并不能给回调函数传递参数。 比如:

1
2
3
4
5
function callback() {
  console.log('Hi human');
}

document.getElementById('someelem').addEventListener('click', callback);

闭包方案

你可以借助 Javascript 闭包的优势来传递参数给回调函数。看这个例子:

1
2
3
4
5
6
7
8
function callback(a, b) {
  return function() {
    console.log('sum = ', (a+b));
  }
}

var x = 1, y = 2;
document.getElementById('someelem').addEventListener('click', callback(x, y));

什么是闭包? 闭包是指函数有自由独立的变量。换句话说，定义在闭包中的函数可以“记忆”它创建时候的环境。想了解更多请参考MDN的文档。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

这种方法使参数 x 和 y 在回调方法被调用时处于其作用域内。

bind函数

另一个办法是使用 bind 方法。比如:

1
2
3
4
5
var alertText = function(text) {
  alert(text);
};

document.getElementById('someelem').addEventListener('click', alertText.bind(this, 'hello'));

两种方法之间有着微小的性能差异,请看jsperf.
https://jsperf.com/bind-vs-closure-23

参考

关注【公众号】，了解更多。


赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！



FEATURED TAGS
Javascript
FRIENDS