これは、オンラインプログラミング学習サービス「ウェブカツ!!」にて、
javascript・jQuery部中級のオンライン学習で使用しているコードになります。
2.4. オブジェクトとプリミティブ型
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// プリミティブ型はboolean,number,string,null,undefinedのこと // プリミティブ型は基本は値そのもの // でも、たまに一時的にオブジェクトになっている var num = 69; var num2 = new Number(69); console.log(typeof num); // number console.log(typeof num2); // object(Numberオブジェクトのインスタンス) console.log(num.toString()); // オブジェクトじゃないから、こんなメソッドないはずなぜか使える?? console.log(num2.toString()); // jsのプリミティブ型は、オブジェクトのように使おうとすると勝手にそれぞれの型に応じた「ラッパーオブジェクト」を裏で作ってくれる var num = 69; // こうした瞬間 console.log(num.toString()); // 裏ではこんなコードが自動で走っている var num_tmp = num; // 一旦、プリミティブ値を退避する num.toString = function(){ // 文字列に変換するメソッド } // 処理が完了するとラッパーオブジェクトは破棄され、普通のプリミティブ型に戻る num = num_tmp; // num変数に退避させたプリミティブ値を入れ戻す delete num_tmp; // 作ったラッパーオブジェクトは捨てる // 孫悟空が一瞬スーパーサイヤ人になれる // だから、「全てのものはオブジェクトかオブジェクトのように使える」という意味になる |
2.5. オブジェクトは後から変更可能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// jsでは作ったオブジェクトやすでに用意されたネイティブなオブジェクトも変更できてしまう // jsという言語自体をぶっ壊せるということでもある。 // JAVAやPHPなど他の言語ではありえないことがjsではできる(一般的な言語は後から変更しようとするとエラーになる) // 後から変更できるのは自由度が高い反面、いつのまにか変更されていて気づかず処理が進んでしまうバグの温床にもなる var str = new String(); str.myFunc = function(){ return 'インスタンスに追加しちゃった'; } console.log(str.myFunc()); String.myFunc = function(){ return 'ネイティブオブジェクトにも追加しちゃった'; } console.log(String.myFunc()); |
2.6. Objectオブジェクト
1 2 3 4 5 6 7 8 |
// 全てのベースになっているオブジェクト // 配列オブジェクトなども全てこのobjectがベースでできている var arr = new Array('HTML', 'CSS', 'JS'); var arr = ['HTML', 'CSS', 'JS']; console.log(arr); arr.str = '追加しちゃった'; console.log(arr); |
2.7. Globalオブジェクト
1 2 3 4 5 6 7 8 9 10 11 |
// ネイティブオブジェクトと違って、インスタンス化したり、メソッド呼び出したりできない var global = new Global(); // NG global.myFunc(); // NG var str = 'kazukichi'; console.log(str); console.log(window.str) // GlobalオブジェクトはGlobal変数やGlobal関数を格納しておくためのオブジェクト(一番の親玉みたいなもん) // Globalオブジェクトは、jsエンジンが初期化されたタイミングで自動で作られる // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects |