<!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>Sertai bind sekarang
Pada ketika ini anda akan mendapati bahawa ini berubah kepada teks
Ini juga terpakai untuk literal fungsi, tujuannya adalah untuk memastikan penunjuk atas dan bawah (ini) tidak berubah.
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();Apabila anda mengklik butang, teks dalam teks akan bertukar warna. Ia boleh dilihat bahawa ini bukan butang tetapi obj.
Kaedah bind() tidak boleh digunakan dalam IE, 6, 7, dan 8. Kaedah ini perlu dilanjutkan dengan melanjutkan prototaip Fungsi.
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;
};
}Pada masa ini, anda dapat melihat bahawa bind() turut disokong dalam ie6, 7 dan 8.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
