recherche

Maison >interface Web >js tutoriel >Introduction au rôle de la fonction bind dans les compétences javascript_javascript

Introduction au rôle de la fonction bind dans les compétences javascript_javascript

WBOY
WBOYoriginal
2016-05-16 16:34:591222parcourir
<!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

Copier le code Le code est le suivant :

var text = document.getElementById("text");
var bouton = document.getElementById("bouton");
bouton.onclick = fonction() {
alert(this.id); // bouton contextuel
}.bind(texte);
//Vous pouvez voir que ceci dans le contexte est un bouton

À 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 &#63; 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.

Copier le code Le code est le suivant :

tranche = Array.prototype.slice,

ou

array = Array.prototype.slice.call( array, 0 );

Convertir un tableau en tableau
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Connaissance de base de Javascript (1) Syntaxe de base de base et modèle d'événement_Connaissances de baseArticle suivant：Connaissance de base de Javascript (1) Syntaxe de base de base et modèle d'événement_Connaissances de base

Articles Liés

Voir plus