忍者ブログ
[128] [127] [126] [125] [124] [123] [122] [121] [120] [119] [118]

DATE : 2017/10/21 (Sat)
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


DATE : 2006/08/08 (Tue)

以前の記事では、this キーワードの指すオブジェクトは、関数の呼び出しを行うオブジェクトによって異なるということを書きました。

しかし、Protptyoe.js にある bind メソッドを使用すると、this キーワードが指すオブジェクトを指定することができます。

例えば、次のコードは、printMthod 関数内では this キーワードの指すオブジェクトがないために undefined と画面に表示されます。

function MyObject {
    this._field = 1;
}

MyObject.prototpye.printField = function() {
    document.write(this._field);
}

var myObject = new MyObject();
var printMethod = myObject.printField;

printMethod();

しかし、Prototype.js によって、Function オブジェクトに追加された bind メソッドを使用すると、this の指すオブジェクトを指定することができます。

function MyObject {
    this._field = 1;
}

MyObject.prototpye.printField = function() {
    document.write(this._field);
}

var myObject = new MyObject();
var printMethod = myObject.printField.bind(myObject);

printMethod();

結果は、「1」と表示されます。

bind メソッドのソースコードを覗くと、次のようになっています。

Function.prototype.bind = function() {
  var __method = this, args = $A(arguments), object = args.shift();
  return function() {
    return __method.apply(object, args.concat($A(arguments)));
  }
}

これは、Prototype.js 1.4 の bind メソッドです。

この中で、$A 関数は引数を配列に変換する関数、shift メソッドは、配列の初めの要素を取り出す(その後、空いた部分を詰める)メソッドです。

__method 引数には、bind メソッドを呼び出したオブジェクト(つまり、上の例では printField 関数)が格納されます。そして、object には、bind メソッドの第1引数(上の例では、myObject)が渡されます。

そして戻り値として、bind メソッドを呼び出した関数オブジェクトを実行する関数を生成しています。この関数の中では、Function オブジェクトの apply メソッドが使用されています。apply メソッドは、呼ばれた関数オブジェクトを実行するメソッドで、第1引数に this キーワードの指すオブジェクト、第2引数に引数を格納した配列を格納することになっています。

こうすることで、this キーワードが指し示すオブジェクトを指定できるようになっています。

なお、Function オブジェクトの apply メソッドは、ECMAScript の仕様に定義されています。つまり、Prototype.js を使わずに、apply メソッドを使うという手もあります。

参考文献

PR
●この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード
●この記事へのトラックバック
この記事にトラックバックする:
忍者ブログ [PR]
ブログ内検索
最近の状況
リンク
カレンダー
09 2017/10 11
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
使用許諾
最新コメント
(08/15)
(05/04)
(03/06)
(03/04)
(09/25)
最新トラックバック
T/O
(11/05)
ブログ内検索
最近の状況
リンク
カレンダー
09 2017/10 11
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
使用許諾
最新コメント
(08/15)
(05/04)
(03/06)
(03/04)
(09/25)
最新トラックバック
T/O
(11/05)