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
12
どうしてこんなことになったの?コンテキストにfuncがあるのでこれはwindowです!bindの存在はthisの指向を変えて所望の値を取得するためである:
1
2
3
4
5
6
7
8
9
10
11
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
実はbindの核心はapplyやcallを直接使用する場合、実行されていない方法を返すことです.
1
2
簡略化されたfunc関数構造は使用できないのでbindでthis指向を渡し,未実行の方法を返すと,実現方式はかなり巧みである.
これまでthisに関するものははっきりしていませんでした.例えばcall、applyなどです.今度bindに関する筆記試験の問題を見たので、この文を覚えて忘れました.
bindはcallやapplyと同様に,コンテキストのthis指向を変えることができる.違いは、callはapplyと同様にメソッドに直接参照され、bindはthisをバインドした後にメソッドを返しますが、内部コアはapplyです.
例を直接見ます.
1
2
3
4
5
6
7
8
9
10
11
12
var
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指向を渡し,未実行の方法を返すと,実現方式はかなり巧みである.