cari

Rumah >hujung hadapan web >tutorial js >Pengenalan kepada peranan fungsi bind dalam kemahiran javascript_javascript

Pengenalan kepada peranan fungsi bind dalam kemahiran javascript_javascript

WBOY
WBOYasal
2016-05-16 16:34:591182semak imbas
<!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>

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

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

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
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Pengetahuan asas Javascript (1) Sintaks asas teras dan model acara_Pengetahuan asasArtikel seterusnya：Pengetahuan asas Javascript (1) Sintaks asas teras dan model acara_Pengetahuan asas

Artikel berkaitan

Lihat lagi