JavaScript プロパティエラー

Question

JavaScriptのオブジェクトについて質問です。

下記のコードを記述したところ

Uncaught TypeError: Cannot set property 'prop1' of undefined

といったエラー文が出ました。
エラー文の内容として
'定義のされていないprop1にプロパティをセットすることは出来ない'
と解釈してprop1; 'bar'に記述を変更したのですが期待した結果でなくmyFunc {}が返ってきました。

prop1: 'bar'記述の時とthis.prop1 = 'bar'の時ではどのような違いがあるのでしょうか？

どうかご教授ください。

'use strict'

const myFunc = function() {
  this.prop1 = 'bar';
  return 'boo';
}

const obj1 = new myFunc();
const obj2 = myFunc();

console.log(obj1); // myFunc {prop1: "bar"}を期待
console.log(obj2); // booを期待

Comments

[maisumakun]

「prop1; 'bar'」はどこをどう書き換えたのでしょうか。

Answer 1

newをつけずに関数を呼び出した場合、関数内のthisは環境によって「windowなどグローバルオブジェクトになる場合」と「undefinedになる場合」があります。後者だった場合、undefinedのプロパティは参照できず、エラーとなります。

なお、newの有無で関数の動作を変えたい場合、this instanceof myFuncのような方法でチェックするのが確実です。

---

（追記）

console.log(obj1)の出力がmyFunc {prop1: "bar"}にする場合はどのような記述になるのでしょうか？

上に書いたように、instanceofで振り分けられます。

function myFunc() {
  if(!(this instanceof myFunc)) return 'boo';
  this.prop1 = 'bar';
}

const obj1 = new myFunc();
const obj2 = myFunc();

Comments

[maisumakun]

もっとも、いまどきのJavaScriptとしては、newするものはclassとして作るのが主流になっています。既存のコードとの兼ね合いがあるのでなければ、newして使う前提の関数を新たに作らないほうがいいでしょう。

[maskedrider5556]

ご回答いただきありがとうございました。
JavaScriptでもclass構文が使えるようになっているようなのでそちらを使用するようにします。

[maskedrider5556]

追記でのご回答もありがとうございます。
thisの挙動や知らないメソッドがまだまだあるなと痛感しましたので、引き続き学習を続けます。

Answer 2

new演算子の働きは以下のとおりです。（4が微妙に間違っていると思いますが）

1. 空の JavaScript オブジェクトを生成する
2. このオブジェクト (のコンストラクター) を他のオブジェクトへリンクする
3. ステップ 1 で新しく生成されたオブジェクトを this コンテキストとして渡す
4. 関数が自分自身を返さない場合は this を返す

new 演算子 - JavaScript | MDN

---

なので、

const myFunc = function() {
  this.prop1 = 'bar';
  return 'boo';
}

について、

• new付きで呼び出すと、空のオブジェクトがthisに入り、空のオブジェクトにprop1というプロパティが生え、返ってきます。
• newなしで呼び出すと、thisはundefinedなので、エラーになります。

---

const myFunc = function() {
  prop1: 'bar';
  return 'boo';
}

について、prop1: 'bar';はラベルつき文と解釈されますから、ただの文字列と評価され、結果的に何も起きません。

• new付きで呼び出すと、空のオブジェクトがthisに入り、何も起きずそのまま空のオブジェクトが返ってきます。
• newなしで呼び出すと、何も起きず'boo'が返ってきます。

---

コメントを受けて追記

new.targetを使うといいと思います。

const myFunc = function() {
  if (new.target) this.prop1 = 'bar';
  return 'boo';
}

new.target プロパティは、関数やコンストラクタが new 演算子を使用して呼び出されたかどうかを検出できるようにします。

new.target - JavaScript | MDN

ただ、よく見ると、IEは非対応のようですね……

Comments

[maskedrider5556]

ご回答いただきありがとうございます。

console.log(obj1)の出力がmyFunc {prop1: "bar"}にする場合はどのような記述になるのでしょうか？
貼って頂いたMDNの記事を基に修正したのですがうまく行きませんでした。

```
function myFunc(name) {
this.prop1 = name;
}

var obj1 = new myFunc('yamada');
```

[Lhankor_Mhy]

new.target を使うといいと思います。
追記します。

[Lhankor_Mhy]

間違えました。直します。

[maskedrider5556]

追記でのご回答もいただき誠にありがとうございます。