javascript_javascript スキルでのバインドの使用の概要-jsチュートリアル-php.cn

javascript_javascript スキルでのバインドの使用の概要

WBOY

リリース： 2016-05-16 18:01:17

オリジナル

1233 人が閲覧しました

数日前にインタビューの質問を見たのですが、その質問は次のようなものでした:
JavaScript の apply、call、bind についての理解を教えてください。
まず、apply と call は決まり文句ですが、bind に関しては、イベントを DOM 要素にバインドするために使用される jquery でよく使われるメソッドなので、一瞬唖然としました。
この奇妙だがよく知られたバインドを理解するためにグーグルで調べたところ、このメソッドは JavaScript バージョン 1.8.5 でネイティブに実装されていることがわかりました。現在、IE9、ff4、および chrome7 はこのメソッドをサポートしていますが、opera と safari はサポートしていません。（MDNでの説明）。
bind の機能は apply や call の機能と似ており、どちらも関数の実行コンテキストを変更します。これが実行時の this キーワードのポイントです。しかし、使い方は少し異なります。関数はバインドされた後、後で実行できます。
例は次のとおりです。

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

 
 var person = { 
名前: 'アンドリュー', 
仕事: 'Web フロントエンド開発者', 
性別: '男性', 
sayHello: function() { 
return 'こんにちは。私は ' this.name '、' this.job; 
} 
} 
console.log(person.sayHello()); // こんにちは、Web フロントエンド開発者の Andrew です。 🎜>var anotherGuySayHello = person .sayHello.bind({ 
name:'Alex', 
job: 'バックエンド C# 開発者' 
}); // こんにちは、私は Alex です。バックエンド C# 開発者です 

 
パラメーターを含む別の例: 

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

function add(arg1, arg2, arg3, arg4) {

return arg1 ' ' arg2 ' ' arg3 ' ' arg4; 
 var addMore = add.bind({}, 'a', 'b'); 
console.log(addMore('c', 'd')); // a b c d 

 
このメソッドは現時点ではサポートされていませんが、MDN では非常に興味深い実装が提供されています。

コードをコピーしますコードは次のとおりです。 if(!Function.prototype.bind) {

関数。 prototype.bind = function(oThis) {

if( typeof this !== 'function') { 
throw new TypeError('Function.prototype.bind - バインドしようとしているものは呼び出し可能ではありません'); 
} 
var fSlice = Array.prototype.slice, 
aArgs = fSlice.call(arguments, 1), 
fToBind = this, 
fNOP = function() {}, 
fBound = function() { 
return fToBind.apply (fNOP のインスタンス ? this : oThis || window, aArgs.concat(fSlice.call(arguments))); 
fNOP.prototype = this.prototype; 
fBound.prototype = new fNOP (); 
return 
} 

 
コードの最後の数行はプロトタイプ チェーン。fBound はバインド関数を呼び出すサブクラスです。これはなぜでしょうか。実装については、実行時に決定される部分 fBound = function(){ return ... } を注意深く見てください。ここで考慮すべき点は、 new を使用して関数 (コンストラクター メソッド) を呼び出すかどうかです。 
次の例は、説明の便宜上、MDN から直接引用したものです: 

コードをコピー

コードは次のとおりです。 function Point(x,y) { this.x = x; this.y = y;

Point .prototype .toString = function() {

return this.x ',' this.y 
}; 
var p = new Point(1, 2); ; / / 1,2 
var emptyObj = {}; 
var YAxisPoint = point.bind(emptyObj, 0); ; / / 0, 5 
axisPoint インスタンスオブポイント // true 

理解を深めるために記事のリンクを最後に示します
MDN: 
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind 

MSDN: 
http://msdn.microsoft.com/en-us/library/ff841995(v=vs.94).aspx