オブジェクトメソッド, "this"

オブジェクトは通常、ユーザや注文などのように、実世界に存在するものを表現するために作られます:

let user = {
  name: "John",
  age: 30
};

そして、実世界では、ユーザはショッピングカードから何かを選んだり、ログインしたり、ログアウトしたりと、 アクション することができます。

アクションは、JavaScriptではプロパティの関数として表現されます。

メソッド例

まず初めに、user が Hello と言うようにしてみましょう:

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

ここでは関数式を使って関数を作成し、それをオブジェクトのプロパティ user.sayHi に割り当てています。

この関数は user.sayHi() という形式で呼び出すことができます。これでユーザが話せるようになりました!

オブジェクトのプロパティとなっている関数は、メソッド と呼ばれます。

つまり、ここでは user オブジェクトの sayHi メソッドができたということです。

もちろん、次のように、宣言済みの関数をメソッドとして使うこともできます:

let user = {
  // ...
};

// 最初に関数を記述
function sayHi() {
  alert("Hello!");
};

// その後、メソッドとして追加
user.sayHi = sayHi;

user.sayHi(); // Hello!

メソッドの短縮表現

オブジェクトリテラルでは、メソッドのための短縮構文があります:

// これらのオブジェクトは同じことをします

let user = {
  sayHi: function() {
    alert("Hello");
  }
};

// メソッド簡略化はスッキリ見えますね
let user = {
  sayHi() { // "sayHi: function()" と同じです
    alert("Hello");
  }
};

上の通り、"function" を省き、単に sayHi() と書くことができます。

実を言うと、両者の表記は完全に同一ではありません。オブジェクトの継承(後で説明します)に関して微妙な違いがありますが、今のところは問題ありません。ほとんどの場合、短い構文の方が好まれます。

メソッド中の “this”

オブジェクトのメソッドが処理をするために、オブジェクトに格納されている情報にアクセスする必要があることは一般的です。

例えば、user.sayHi() 内のコードが user の名前を必要とするかもしれません。

オブジェクトにアクセスするために、メソッドは this キーワードを使うことができます。

this の値はメソッドを呼び出すのに使われた “ドットの前” のオブジェクトです。

例:

let user = {
  name: "John",
  age: 30,

  sayHi() {
    // "this" は "現在のオブジェクト"
    alert(this.name);
  }

};

user.sayHi(); // John

ここで user.sayHi() の実行中、this の値は user になります。

技術的には、外部変数を介して参照することで、this を使わずにオブジェクトにアクセスすることも可能です:

let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert(user.name); // "this" の代わりに "user"
  }

};

…しかし、このようなコードは信頼性に欠けます。もし user を admin = user のように別の変数にコピーすることにし、何かでuserを上書きすると、間違ったオブジェクトにアクセスすることになります。

次のような感じです:

let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert( user.name ); // エラーにつながる
  }

};


let admin = user;
user = null; // 明らかにするために上書きします

admin.sayHi(); // Whoops! sayHi() の中で古い名前が使われました! エラーです!

alert の呼び出しで、user.name ではなく this.name を使うのであれば、コードは動作するでしょう。

“this” はバインドされていません

JavaScriptでは、 “this” キーワードは他のほとんどのプログラミング言語とは異なる振る舞いをします。オブジェクトのメソッドだけではなく、任意の関数内で使用することができます。

このようなコードも構文エラーにはなりません:

function sayHi() {
  alert( this.name );
}

this の値は、実行時にコンテキストに応じて評価されます。

例えば、ここでは同じ関数が2つの異なるオブジェクトに割り当てられており、呼び出しの際に異なる "this "が使われています:

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 2つのオブジェクトで同じ関数を使う
user.f = sayHi;
admin.f = sayHi;

// これらの呼び出しは異なる this を持ちます
// 関数の中の "this" は "ドット" の前のオブジェクトです
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (ドットでも角括弧でも問題なくメソッドにアクセスできます)

ルールはシンプルです。obj.f() が呼び出されると、f の呼び出し中は this は obj です。つまり、上の例では user または admin となります。

function sayHi() {
  alert(this);
}

sayHi(); // undefined

アロー関数は “this” を持ちません

アロー関数は特別で、それらは “自身の” this を持ちません。もしこのような関数で this を参照した場合、外部の “通常の” 関数から取得されます。

例えば、ここで arrow() は、外部の user.sayHi() メソッドから this を使います:

let user = {
  firstName: "Ilya",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // Ilya

これはアロー関数の特別な機能です。別の this ではなく、外側のコンテキストから取り出したい場合に便利です。アロー関数ふたたびのセクションの後半では、より多くのアロー関数を扱います。

サマリ

• オブジェクトのプロパティに格納されている関数は “メソッド” と呼ばれます。
• メソッドは、object.doSomething() のように、オブジェクトを “行動” させることができます。
• メソッドはオブジェクトを this で参照することができます。

this の値は実行時に定義されます。

• 関数の宣言時、関数内で this を使うことができますが、 その this は関数が呼び出されるまで値を持っていません。
• 関数はオブジェクト間でコピーすることができます。
• 関数が object.method() という “メソッド” 構文で呼び出された場合、呼び出し中の this の値は、object です。

アロー関数は特別で、this を持たないことに注意してください。this がアロー関数の中でアクセスされるとき、それは外側から取得されます。