とあるJavaエンジニアが驚いたJavaScriptのオブジェクト指向(レベル１)

概要

ProgateのJavaScriptコースを終えたので、次は何の教材を使ってJavaScriptの勉強をしようかなと思って部屋を見渡してみるとかなり前に購入した初めてのJavaScript 第2版を発見したので手にとってとりあえず3章まで進めるも分岐とかデータ型とか繰り返しとか面白くなかったのですが、ひとつだけ面白いなと思って脱線してしまったことをつらつらと書いていきます。

JavaScriptのオブジェクトにはどうやら動的にプロパティを追加できるみたいだ

低レベルな話で済みません。ただ実務で一番使っている言語が静的型付け言語(Javaのこと)で、それと比較して面白いなと思ってしまったのです。

var anObj = new Object();
if (anObj.piyo === undefined){
// anObjにはpiyoというプロパティがないのでこちら側のブロックが処理されます。
    console.log("anObj.piyo is undefined.");
    console.log(anObj);// -> Object {}と出力
}else{
    console.log(anObj.piyo);
    console.log(anObj);
}

// (驚きポイント)しかしanObjに対してあたかもpiyoというプロパティがあるが如く値を設定すると
anObj.piyo = "XYZ";
if (anObj.piyo === undefined){
    console.log("anObj.piyo is undefined.");
    console.log(anObj);
}else{
// こちら側のブロックが処理されます。=> JavaScriptのオブジェクトには動的にプロパティを追加出来るみたいだということが分かった。
    console.log(anObj.piyo);//XYZ
    console.log(anObj);// Object {piyo: "XYZ"}
}

更に驚いたことに

var User = function(firstName,lastName){
    this.firstName = firstName;
    this.lastName  = lastName;
}

var oneUser = new User("Taro","Yamada");
var twoUser = new User("Jiro","Suzuki");

console.log(oneUser);// => User {firstName: "Taro", lastName: "Yamada"} 
console.log(twoUser);// => User {firstName: "Jiro", lastName: "Suzuki"}

// (驚きポイント)同じクラスから生成したオブジェクトに対して、個別にメソッドを追加出来るみたいです。
oneUser.sayHello = function(name){
    console.log("Hello, " + name);
}

oneUser.sayHello("Tanaka");// Hello, Tanakaと表示

twoUser.sayHello("Watanabe");//twoUserには、sayHelloメソッドを定義していないので、Uncaught TypeError: twoUser.sayHello is not a functionというエラーになる。

そしてプロトタイプを使うと

var User = function(firstName,lastName){
    this.firstName = firstName;
    this.lastName  = lastName;
}

var oneUser = new User("Taro","Yamada");
var twoUser = new User("Jiro","Suzuki");

User.prototype.sayHello = function(name){
    console.log("Hello, " + name + " from " + this.lastName);   
}

// (驚きポイント)prototypeを使うと同じクラスから生成されたオブジェクト全てに対して、メソッドが追加されているみたいだ。

oneUser.sayHello("Tanaka");// Hello, Tanaka from Yamadaと出力

twoUser.sayHello("Watanabe");// Hello, Watanabe from Suzukiと出力

ここが今日勉強していて、面白く感じ書籍のサンプルコードを写経するという当初の目標から大きく脱線し遊んでしまったところです。

今のところ何故JavaScriptがこういう言語仕様になっているかは全く分かりませんが、Javaのクラスベースとは全然違うんだろうなということは感じることは出来ました。

学習を進めていくと何故にJavaScriptがこういう仕様になっているのかが、いつかきっと分かる日が来るのだろうなというのを楽しみにしつつ今日の学習はこれにて終了。

お疲れ様でした。