JavaScriptのオブジェクトを理解する ①

フロントエンド強化月間

プロパティとメソッド

オブジェクトはプロパティとメソッドで構成される

• オブジェクトの状態や性質を表すのがプロパティ
• オブジェクトのプロパティとして格納されているのがメソッド

humanオブジェクトを定義

var human = {};
human.name = 'jsman' // 名前
human.age = 24; // 年齢
human.gender = 'M' // 性別
human.getInfo = function() {
    return human.name + '' + human.age + '' + human.gender;
}
console.log(human.getInfo()); // jsman 24 M

name、age、genderはプロパティ getInfo()はメソッド

new演算子

JavaScriptでオブジェクトを生成するには、new演算子を使用する。
(リテラル表記の場合でも同等の結果が得られる)

var obj1 = new Object();
var obj2 = {};
// 同等の結果
console.log(obj1); // Object {}
console.log(obj2); // Object {}

new演算子は「オブジェクトをインスタンス化する」演算子ではない！
「オブジェクトのインスタンスの返却をコンストラクタに命令する」演算子

var myFunc = function() {
    this.prop1 = 'bar';
    this.prop2 = 'foo';
    this.method = function() {
        return this.prop1 + this.prop2;
    }
}

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

console.log(obj1.method()); // barfoo
console.log(obj2.method()); // エラー発生

上記ではnew演算子を使わないと、エラーが発生する。なぜか。

このとき、それぞれの変数を出力すると

console.log(obj1); // myFunc {prop1: "bar"}
console.log(obj2); // undefined

new演算子を使わないと、そもそも定義すらされないことがわかる。なぜか。

JavaScriptの関数は、return文が明示的に指定されていない場合、自動的に呼び出し元には undefined が返却される。

今回の場合、MyFunc()自体にはreturn文が明記されていないため、undefinedが返される。

しかし、new演算子を用いた場合は、return文が書かれていなくても、自動的にオブジェクトのインスタンスが返却される。

return文を書いた場合は...

var myFunc = function() {
    this. prop 1 = 'bar';
    return 'boo';
    }
    
    var obj 1 = new myFunc();
    var obj 2 = myFunc();
    
    console.log(obj1); // myFunc {prop1: "bar"}
    console.log(obj2); // boo

オブジェクト生成（new演算子)についてまとめ

• new演算子を用いて呼び出した場合は、return文の有無は関係なく、自動的にオブジェクトのインスタンスが返却される
• new演算子を用いない場合は、ただの関数呼び出しになっている