Pengenalan kepada peranan fungsi bind dalam kemahiran javascript

Pengenalan kepada peranan fungsi bind dalam kemahiran javascript_javascript

WBOY

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

asal

1164 orang telah melayarinya

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

Salin selepas log masuk

Sertai bind sekarang

Salin kod Kod adalah seperti berikut:

var text = document.getElementById("text");

butang var = document.getElementById("butang");

button.onclick = function() {

alert(this.id); // butang timbul

}.bind(teks);

//Anda boleh melihat bahawa ini dalam konteks ialah butang

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

Salin selepas log masuk

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 &#63; this : (obj || {}),
args.concat(slice.call(arguments)));
};

nop.prototype = self.prototype;

bound.prototype = new nop();

return bound;
};
}

Salin selepas log masuk

Pada masa ini, anda dapat melihat bahawa bind() turut disokong dalam ie6, 7 dan 8.

Salin kod Kod adalah seperti berikut:

slice = Array.prototype.slice,

atau 

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

Tukar seperti tatasusunan kepada tatasusunan