<!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>Rejoignez-nous maintenant
À ce stade, vous constaterez que cela se transforme en texte
Cela s'applique également aux littéraux de fonction, le but est de garder le pointage haut et bas (this) inchangé.
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();Lorsque vous cliquez sur le bouton, le texte dans le texte changera de couleur. On voit qu'il ne s'agit pas d'un bouton mais d'un obj.
La méthode bind() n'est pas applicable dans IE, 6, 7 et 8. Cette méthode doit être étendue en étendant le prototype 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;
};
}À l'heure actuelle, vous pouvez voir que bind() est également pris en charge dans ie6, 7 et 8.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
