javascript_javascript スキルにおけるバインド関数の役割の概要-jsチュートリアル-php.cn

javascript_javascript スキルにおけるバインド関数の役割の概要

WBOY

リリース： 2016-05-16 16:34:59

オリジナル

1164 人が閲覧しました

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

ログイン後にコピー

今すぐバインドに参加してください

コードをコピーしますコードは次のとおりです:

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

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

button.onclick = function() {

alert(this.id); // ポップアップボタン

}.bind(text);

//コンテキストではこれが button
 であることがわかります。

この時点で、これがテキストに変わることがわかります

これは関数リテラルにも当てはまります。目的は、上下のポインティング (this) を変更しないようにすることです。

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

ログイン後にコピー

ボタンをクリックすると本文中の文字の色が変わります。これはボタンではなくオブジェクトであることがわかります。

bind() メソッドは、IE、6、7、および 8 では適用できません。このメソッドは、関数プロトタイプを拡張することによって拡張する必要があります。

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

ログイン後にコピー

現時点では、bind() が ie6、7、および 8 でもサポートされていることがわかります。

コードをコピーしますコードは次のとおりです:

スライス = Array.prototype.slice,

または 

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

配列のようなものを配列に変換