LoginSignup
10

More than 5 years have passed since last update.

JavaScript 関数内の this が指すものは、関数をメソッドとして扱うか、コンストラクタとして扱うかで変化する

Last updated at Posted at 2014-01-16

JavaScript で関数内の this の指す先が、関数オブジェクトを

  1. (親オブジェクトの)メソッド扱いして実行するか
  2. コンストラクタ扱いして新しいインスタンスを生成するか

で、変化するという例。

(親オブジェクトの)メソッド扱いして実行する

1.js
var a = {"x" :function(){this.p = 1}};

console.log(a.p); // undefined
console.log(a.x.p); // undefined

//↑ここまでは共通

var x1 = a.x(); // x を a のメソッド扱いして実行、返り値を x1 に格納. 左辺を省いて a.x() だけでも下の結果は変化しない.
console.log(a.p); // 1. this は a を指していた.
console.log(x1.p); // TypeError. x1 が undefined なので.
console.log(a.x.p); // undefined. this は a.x を指しているわけではない.

以上から this は a を指していたことになる。

コンストラクタ扱いして新しいインスタンスを生成する

2.js
var a = {"x" :function(){this.p = 1}};

console.log(a.p); // undefined
console.log(a.x.p); // undefined

//↑ここまでは共通

var x1 = new a.x(); // x をコンストラクタ扱いして新しいインスタンス x1 を生成. new が付いただけで左辺 x1 の意味合いが変わっていることに注意.
console.log(a.p); // undefined. this は a を指していない.
console.log(x1.p); // 1. this は x から生成されたインスタンス x1 を指していた.
console.log(a.x.p); // undefined. this は a.x を指しているわけではない.

以上から this は x から生成されるインスタンスを指していたことになる。


ちなみに、function 内にreturn文を書いた場合の挙動については JavaScript: Constructor Return Value を参照。値を返すだけのreturn文は無視されるが、return {"p":2} としてオブジェクトを返すと、2.js の 10行目は 2 が返ってくる。関数をコンストラクタとして宣言する場合は、関数を大文字ではじめ、return文を書かないことで、メソッドと明確に区別できるようにした方がいいだろう。


参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10