オブジェクトが生成されない理由が分かりません

Question

javascriptを勉強中のものなのですが、以下のコードで分からない部分があった為質問させていただきました。

var Member = function(firstName, lastName){
        this.firstName = firstName;
        this.lastName = lastName;
        
    };
    var m = Member('権兵衛','佐藤');
    console.log(m);　//結果:undefined
    console.log(firstName); //結果:権兵衛
    console.log(m.firstName); //結果: エラー(Cannot read property 'firstName' of undefined)

上記のコードの説明としまして、「Memberオブジェクトは生成されず、代わりにグローバル変数としてfirstName/lastNameが生成されてしまうのです。（thisがグローバルオブジェクトを示すからです。）」
とあったのですが、Memberオブジェクトが生成されないということは、「 var m = Member('権兵衛','佐藤');」ここの部分でnew演算子を用いてインスタンス化できていないから、ということなのでしょうか？
また、「代わりにグローバル変数としてfirstName/lastNameが生成されてしまう、（thisがグローバルオブジェクトを示すからです。）」ここの部分につきましても、thisがグローバルオブジェクトを示す＝グローバル変数として、firstName/lastNameが生成されるのが何故なのかも分からないです。
どなたか教えてくださる方いらっしゃいましたら、ご解説お願いいたします。

Answer 1

new してるかどうかが問題かな？と予想したんですよね？比較してみましたか？
予想ができたのなら試してみましょう。

• Memberの中に、console.log(this);を仕込んでみたら何が出てきますか？
• var m = new Member('権兵衛', '佐藤');と、newを付けてみたらthisはどうなりますか？

thisの正体がわかれば、なぜそうなるのかもわかると思いますよ。
せっかく予想までできているのですから、自分で試さないのはもったいないです。

Comments

[newyee]

ご回答ありがとうございます。
予想をしていたのなら試さないとダメですよね。
ご指摘頂いた通り、console.log(this)で試してみましたら、インスタンス化されていないことが分かりました。
次回からは、もう少し自分で色々試してからご質問させていただこうと思います

Answer 2

new しなければMember関数を実行するだけですから
thisがかえすのはwindow
windowのfirstNameプロパティを設定しているのだから
グローバル変数が設定されています

var Member = function(firstName, lastName){
  this.firstName = firstName;
  this.lastName = lastName;
  console.log(this);
};
var m1 = Member('権兵衛','佐藤');
var m2 = new Member('権兵衛','佐藤');

Comments

[newyee]

ご回答ありがとうございます。
ご回答下さった部分の中でお聞きしたい所があるのですが、「windowのfirstNameプロパティを設定しているのだからグローバル変数が設定されています」ここの部分なのですが、「var m1 = Member('権兵衛','佐藤');」ここを実行した際と、トップレベルで「var firstName = '権兵衛'」「var lastName = '佐藤'」を宣言するのと同じ意味になるということでしょうか？

[yambejp]

そうですね

var firstName="花子";
var Member = function(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
};
var m1 = Member('権兵衛','佐藤');
console.log(firstName);

[newyee]

ありがとうございます。
関数の中で宣言した値がグローバル変数となることに違和感があり、少し混乱していた部分があったのですが、なんとか理解することができました！

Answer 3

Javascriptの関数は呼び出し方によって4つに分類されます。

・関数呼び出し
・メソッド呼び出し
・コンストラクタ呼び出し
・call,apply呼び出し

それぞれ呼び出し方で違うのは関数ブロック内のthisの参照先です。

今回の例の場合、呼び出し方は「関数呼び出し」になります。「関数名()の形で呼び出す」
その場合関数ブロック内のthisはwindowオブジェクトを参照します。

newを付けて呼び出した場合は「コンストラクタ呼び出し」となります。「new 関数名()の形で呼び出す」
thisの参照先は「prototypeに元の関数への参照をもった新しいオブジェクト」になります。
簡単に言えばnewをつけて呼び出した関数オブジェクトのインスタンスです。

Comments

[newyee]

ご回答ありがとうございます。
他のご回答者様のご回答と併せて、理解する助けとなり感謝しております。
勉強不足を痛感しましたので、もっと勉強頑張っていきたいと思います！