Einführung in die Rolle der Bind-Funktion in Javascript_Javascript-Kenntnissen-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 16:34:59

Original

1187 Leute haben es durchsucht

<!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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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