JavaScriptのprototype.bind()メソッド入門_基礎知識

これまでは、self=this や that=this などを直接設定していましたが、これはもちろん機能しますが、Function.prototype.bind() を使用する方が優れており、よりプロフェッショナルに見えるでしょう。
これは簡単な例です:

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

var myObj = {
specialFunction: function () {
},
anotherSpecialFunction: function () {
},
getAsyncData: function (cb) {
cb();
},
render: function () {
var that = this;
this.getAsyncData(function () {
that.specialFunction();
that.anotherSpecialFunction();
});
}
};
myObj.render();

この例では、myObj コンテキストを維持するために、変数 that=this が設定されており、これは実行可能ですが、関数.prototype は使用されません。.bind() はよりきれいに見えます:

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

render: function () {
this.getAsyncData(function () {
this.specialFunction();
this.anotherSpecialFunction();
}.bind(this));
}

.bind() を呼び出すと、新しい関数が作成され、これがこの関数に渡されます。 .bind() を実装するコードはおおよそ次のとおりです:

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

Function.prototype .bind = function (scope) {
var fn = this;
return function () {
return fn.apply(scope);
};
}

Function.prototype.bind() の簡単な使用例を見てみましょう:

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

var foo = {
x: 3
};

var bar = function(){
console.log(this.x);
};

bar(); // 未定義🎜>
varboundFunc = bar.bind(foo);

boundFunc() // 3

とても便利ですね！残念ながら、IE ブラウザ IE8 以下は Function.prototype.bind() をサポートしていません。サポートされているブラウザは、Chrome 7、Firefox 4.0、IE 9、Opera 11.60、Safari 5.1.4です。 IE 8/7/6 などのブラウザはこれをサポートしていませんが、Mozilla 開発チームは古いバージョンの IE ブラウザ用に同様の機能を備えた関数を作成しました。コードは次のとおりです:

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

if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
// ECMAScript 5 の内部 IsCallable 関数に最も近いもの
throw new TypeError("Function.prototype.bind - バインドしようとしているものは呼び出し可能ではありません");
}

var aArgs = Array .prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(thisinstanceof fNOP && oThis
? this
: oThis、
aArgs.concat(Array.prototype.slice.call(arguments)));
};

fNOP.prototype = this。プロトタイプ;
fBound.prototype = new fNOP();

return fBound;
};
}