ECMAScript 5(ES 5)におけるbindメソッドの概要メモ

3259 ワード

http://www.cnblogs.com/leejersey/p/4374695.html
これまでthisに関するものははっきりしていませんでした.例えばcall、applyなどです.今度bindに関する筆記試験の問題を見たので、この文を覚えて忘れました.
bindはcallやapplyと同様に,コンテキストのthis指向を変えることができる.違いは、callはapplyと同様にメソッドに直接参照され、bindはthisをバインドした後にメソッドを返しますが、内部コアはapplyです.
例を直接見ます.
1
2
3
4
5
6
7
8
9
10
11
12var   obj = {    a: 1,    b: 2,    getCount:  function (c, d) {      return   this .a +  this .b + c + d;    } };
  window.a = window.b = 0; console.log(obj.getCount(3, 4));   // 10 var   func = obj.getCount; console.log(func(3, 4));   // 7
どうしてこんなことになったの?コンテキストにfuncがあるのでこれはwindowです!bindの存在はthisの指向を変えて所望の値を取得するためである:
1
2
3
4
5
6
7
8
9
10
11 var   obj = {    a: 1,    b: 2,    getCount:  function (c, d) {      return   this .a +  this .b + c + d;    } };
  window.a = window.b = 0; var   func = obj.getCount.bind(obj); console.log(func(3, 4));   // 10
bindはfunctionの関数拡張方法であり、bind以降コードはfunc内部のthis指向(obj)を再バインドしたが、ie 6~8は互換性がなく、互換コードは以下の通りである.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 var   obj = {    a: 1,    b: 2,    getCount:  function (c, d) {      return   this .a +  this .b + c + d;    } };
  Function.prototype.bind = Function.prototype.bind ||  function (context) {    var   that =  this ;    return   function () {      // console.log(arguments); // console [3,4] if ie<6-8>      return   that.apply(context, arguments);
     } } window.a = window.b = 0; var   func = obj.getCount.bind(obj); console.log(func(3, 4));   // 10
実はbindの核心はapplyやcallを直接使用する場合、実行されていない方法を返すことです.
1
2 var   ans = obj.getCount.apply(obj, [3, 4]); console.log(ans);  // 10
簡略化されたfunc関数構造は使用できないのでbindでthis指向を渡し,未実行の方法を返すと,実現方式はかなり巧みである.