JavaScript中bind函数的作用与实现原理

作者：异步漫步时间：2026-10-28 14:27:24浏览：465

本文介绍JavaScript中bind函数的核心作用，即改变函数执行时的this指向。通过代码实例展示bind如何保持上下文不变，并针对IE6-8不支持原生bind的情况，提供基于Function.prototype的兼容方案及slice方法转换类数组对象的技巧。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
button {background-color:#0f0;}
</style>
</head>
<body>
<button id="button"> 按钮 </button>
<input type="text">
<script>
var button = document.getElementById("button");
button.onclick = function() {
alert(this.id); // 弹出button
};
//可以看出上下文的this 为button
</script>
</body>
</html>

bind函数改变this指向的实例

在上述代码基础上引入bind方法。

具体实现代码如下：

var text = document.getElementById("text");
var button = document.getElementById("button");
button.onclick = function() {
alert(this.id); // 弹出button
}.bind(text);
//可以看出上下文的this 为button

通过观察可以发现，原本指向button的this被修改为了text。

该机制同样适用于函数字面量，其主要目的是确保函数内部this指向的稳定性。


var obj = {
color: "#ccc", 
element: document.getElementById('text'),
events: function() {
document.getElementById("button").addEventListener("click", function(e) {
console.log(this);
this.element.style.color = this.color;
}.bind(this))
return this;
},
init: function() {
this.events();
}
};
obj.init();

当点击按钮时，text元素中的文字颜色发生变化，这证明此时的this指向的是obj对象而非button。

IE6-8中bind函数的兼容实现

需要注意的是，bind()方法在IE6、IE7和IE8浏览器中不被原生支持，需要通过扩展Function原型来实现该功能。


if (!Function.prototype.bind) {

Function.prototype.bind = function(obj) {
var slice = [].slice, args = slice.call(arguments, 1), self = this, nop = function() {
}, bound = function() {
return self.apply(this instanceof nop ? this : (obj || {}),
args.concat(slice.call(arguments)));
};

nop.prototype = self.prototype;

bound.prototype = new nop();

return bound;
};
}

经过上述扩展后，IE6、IE7和IE8浏览器也能正常支持bind()方法。