JavaScriptのthisとbind

JavaScript の this と、bind メソッドについて紹介していきます。

Java や C++ に慣れている人にとっては、JavaScript の this は少々厄介です（基本的には同じように使えてしまうからです）。この記事では、JavaScript の this を使う際の注意事項と、Java や C++ 感覚で使えるように ( ？ ) するために便利な bind について説明します。

this の振る舞い

JavaScript の this の仕様は、ある関数が呼び出された際にその関数を格納していたオブジェクトを指します。JavaScript でクラス風のことを実現する場合、クラスのメンバ関数はあるオブジェクトのプロパティに設定されていると思います。例として、以下のような 2 次元ベクトルのクラスを考えてみます。

// クラス
var Vector2D = function(x, y) {
    // this は生成されたオブジェクト。
    this.x = x;
    this.y = y;
};

Vector2D.prototype.getLength = function() {
    //thisは呼び出し元のオブジェクト
    return Math.sqrt(this.x * this.x + this.y * this.y);
};

var v1 = new Vector2D(10,10);
var obj = new Object();
obj.getLength = v1.getLength;

console.log(v1.getLength());
console.log(obj.getLength());

出力としては、こんな感じの出力になると思います。

> 14.142135623730951
> NaN

「v1.getLength()」は、(10, 10) のベクトルの長さを出力してくれますが、「obj.getLength()」では、x や y に値が設定されていないため、長さが計算できず、出力が NaN になってしまいます。この例ではわかりやすいですが、何かの関数にコールバックとして登録した際に、よくわからないことが起こるかもしれません。

bind を使って this を束縛

ECMAScript5 の仕様に、bind という関数があります。bind を使うことで、this になるオブジェクトを指定することができます。例えば、先の例を以下のように書き換えます。

// クラス
var Vector2D = function(x, y) {
    // this は生成されたオブジェクト。
    this.x = x;
    this.y = y;
};

Vector2D.prototype.getLength = function() {
    //thisは呼び出し元のオブジェクト
    return Math.sqrt(this.x * this.x + this.y * this.y);
};

var v1 = new Vector2D(10,10);
var obj = new Object();
// !! obj.getLength = v1.getLength.bind(v1); を書き換える
obj.getLength = v1.getLength.bind(v1);

console.log(v1.getLength());
console.log(obj.getLength());

17 行目の「v1.getLength」の後ろに「.bind(v1)」が追加されています。このことにより、obj.getLength には、this が v1 を参照するような getLength 関数が代入される事になります。このスクリプトを実行すると、以下のように出力されます。

> 14.142135623730951
> 14.142135623730951

bind は、すべての関数オブジェクトの持つ関数です（Function.prototype.bind()）。この関数は、第一引数に渡されたオブジェクトが this になるようなオブジェクトを生成して返してくれます。

参考にしたサイト

Function.prototype.bind()

JavaScriptのthisとbind

this の振る舞い

bind を使って this を束縛

参考にしたサイト

目次

アウトライン