dojoにおけるlang.hitch()の簡単な使い方
2715 ワード
テキストリンク
私の4級も過ぎたばかりです.翻訳はただ自分がもう一度見るときにもう一度関数を苦しめないようにするためです.
コンテキスト環境という概念はjavascriptに触れたばかりの多くの開発者に疑問を抱かせることが多いが、特にthisと結びついて話しているときだ.例:J
ava
中
の
方法
はい
にある
コンパイル
時
バインディング
クラスに着くと、thisはメソッドを呼び出すときに常にこのメソッドを含むクラスのインスタンスを指します.一方,JavaScript関数のコンテキスト環境は,関数がどこで定義されるかによって決まるのではなく,その呼び出し方によって決まる.
Javascript関数が呼び出される方法は一般的に2つあり、1つのオブジェクトとして呼び出される方法と個別に呼び出される方法があります.一つの方法が一つの方法として関数によって呼び出されるとfooのようになる.bar()は、thisがこのメソッドを呼び出すオブジェクト(fooなど)を指します.bar()のように関数が単独で呼び出されると、thisはグローバルな役割ドメインを指します.
次のコードを考慮して、DOMノードのクリックイベントに応答するコールバック関数を登録しました.
このコードは非常に直感的に見えます.someElementがクリックされるとmyobjecthandleClickは呼び出され、
最初に見ると、onは
実際には、
幸いなことに、Dojoは関数が常に自分の望むコンテキストに呼び出されることを保証する解決方法がある:lang.hitch.コンテキストオブジェクトと関数を指定すると、lang.hitchは、
lang.hitchがこの方法でバインドすると、周辺関数は呼び出されるたびにメソッド名に基づいてmyObjectからhandleClickメソッドが取り出す.このように構成されたlang.hitch関数は、myObjectのhandleClickプロパティに新しい関数が割り当てられている場合、関数名でバインドされたlang.hitchは、バインドで使用される新しい機能を自動的に適用しますが、関数オブジェクトのバインドで再作成する必要があります.
1つのコンテキストオブジェクトがクリックのコールバック関数に正しくバインドされ、上記の例は期待通りに実行する.こんなに簡単です!lang.hitchはDojoの特徴を利用して複雑な応用を簡単にする例の一つにすぎない.
* In ECMAScript 5 strict mode,
翻訳者blogアドレス:www.xlaoyu.info
私の4級も過ぎたばかりです.翻訳はただ自分がもう一度見るときにもう一度関数を苦しめないようにするためです.
コンテキスト環境という概念はjavascriptに触れたばかりの多くの開発者に疑問を抱かせることが多いが、特にthisと結びついて話しているときだ.例:J
ava
中
の
方法
はい
にある
コンパイル
時
バインディング
クラスに着くと、thisはメソッドを呼び出すときに常にこのメソッドを含むクラスのインスタンスを指します.一方,JavaScript関数のコンテキスト環境は,関数がどこで定義されるかによって決まるのではなく,その呼び出し方によって決まる.
Javascript関数が呼び出される方法は一般的に2つあり、1つのオブジェクトとして呼び出される方法と個別に呼び出される方法があります.一つの方法が一つの方法として関数によって呼び出されるとfooのようになる.bar()は、thisがこのメソッドを呼び出すオブジェクト(fooなど)を指します.bar()のように関数が単独で呼び出されると、thisはグローバルな役割ドメインを指します.
次のコードを考慮して、DOMノードのクリックイベントに応答するコールバック関数を登録しました.
var myObject = {
stateValue: false,
handleClick: function(event) {
alert(this.stateValue);
}
};
require([ 'dojo/on' ], function(on) {
on(someElement, 'click', myObject.handleClick);
});
このコードは非常に直感的に見えます.someElementがクリックされるとmyobjecthandleClickは呼び出され、
myObject.stateValue
の内容を表示するボックスがポップアップする.しかし、ユーザーが本当にこの要素をクリックすると、ポップアップボックスには「undefined」が表示されます.何があったの?最初に見ると、onは
myObject
and handleClick ,
myObject.handleClick()
と呼び出されたように見える.しかし、次の同等コードを考えてみましょう.var handleClick = myObject.handleClick;
on(someElement, 'click', handleClick);
実際には、
handleClick
の方法だけがonに伝達する.最終handleClick
がクリックイベントによって呼び出されるとmyobjecctは呼び出されない.幸いなことに、Dojoは関数が常に自分の望むコンテキストに呼び出されることを保証する解決方法がある:lang.hitch.コンテキストオブジェクトと関数を指定すると、lang.hitchは、
ECMAScript 5
Function.prototype.bind
のように、与えられたコンテキストオブジェクトに基づいて関数を作成して元のメソッドを呼び出します(この文の翻訳はあまり正確ではありません..Function.prototype.bind
、 lang.hitch
のように、元の関数に渡される追加のパラメータを指定できます.lang.hitchを利用して、thisが私たちが期待しているようにmyobjectの値を参照することを確保することができます.require([ 'dojo/on' ], function(on) {
on(someElement, 'click', lang.hitch(myObject, myObject.handleClick);
});
Function.prototype.bind
とは異なり、lang.hitchは、関数ではなく関数名を2番目のパラメータとして利用する追加のバインド方法をサポートする.require([ 'dojo/on' ], function(on) {
on(someElement, 'click', lang.hitch(myObject, 'handleClick');
});
lang.hitchがこの方法でバインドすると、周辺関数は呼び出されるたびにメソッド名に基づいてmyObjectからhandleClickメソッドが取り出す.このように構成されたlang.hitch関数は、myObjectのhandleClickプロパティに新しい関数が割り当てられている場合、関数名でバインドされたlang.hitchは、バインドで使用される新しい機能を自動的に適用しますが、関数オブジェクトのバインドで再作成する必要があります.
1つのコンテキストオブジェクトがクリックのコールバック関数に正しくバインドされ、上記の例は期待通りに実行する.こんなに簡単です!lang.hitchはDojoの特徴を利用して複雑な応用を簡単にする例の一つにすぎない.
* In ECMAScript 5 strict mode,
this
is undefined if the function is called without a context. 翻訳者blogアドレス:www.xlaoyu.info