suchen

Heim >Web-Frontend >js-Tutorial >Einführung in die Rolle der Bind-Funktion in Javascript_Javascript-Kenntnissen

Einführung in die Rolle der Bind-Funktion in Javascript_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 16:34:591190Durchsuche
<!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>

Jetzt binden beitreten

Code kopieren Der Code lautet wie folgt:

var text = document.getElementById("text");
var button = document.getElementById("button");
button.onclick = function() {
Alert(this.id); // Popup-Schaltfläche
}.bind(text);
//Sie können sehen, dass dies im Kontext die Schaltfläche
ist

An dieser Stelle werden Sie feststellen, dass sich dies in Text ändert

Dies gilt auch für Funktionsliterale. Der Zweck besteht darin, die Auf- und Abwärtsrichtung (dies) unverändert zu lassen. 

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();

Wenn Sie auf die Schaltfläche klicken, ändert sich die Farbe des Texts im Text. Es ist ersichtlich, dass es sich hierbei nicht um eine Schaltfläche, sondern um ein Objekt handelt.

Die bind()-Methode ist in IE, 6, 7 und 8 nicht anwendbar. Diese Methode muss durch Erweiterung des Funktionsprototyps erweitert werden. 

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;
};
}

Zu diesem Zeitpunkt können Sie sehen, dass bind() auch in ie6, 7 und 8 unterstützt wird.

Code kopieren Der Code lautet wie folgt:

Slice = Array.prototype.slice,

oder

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

Konvertieren Sie Array-ähnlich in Array
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Grundkenntnisse in Javascript (1) Kernsyntax und Ereignismodell_GrundkenntnisseNächster Artikel：Grundkenntnisse in Javascript (1) Kernsyntax und Ereignismodell_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen