javascript オブジェクトについて

こんにちは、タクゾウです。
今までなんとなく使っていたオブジェクトについて詳しく説明したいと思います。

オブジェクトにも、色々な種類があり、その中でもGlobalオブジェクトは、とても大切なオブジェクトなので、きちんと理解しましょう。

オブジェクトについて

JavaScriptではwebブラウザ、スクリーン、ドキュメントなどあらゆる物をオブジェクトとして使うことができます。また、オブジェクトは、プロパティとメソッドがあり、プロパティは値を保存しとく変数と同じで、オブジェクトの状態や特性を表すために使われ、メソッドは関数と同じで、オブジェクトの振る舞い(動き)を表すために使われます。

2.1 オブジェクトとプリミティブ型について

jsではあらゆる物をオブジェクトとして使うことができますといいましたが、実はプリミティブ型も一時的にオブジェクトになっています。typeofで型を確認できるので、確認しつつ見ていきましょう。

var num = 69;
var num2 = new Number(69);
console.log(typeof num);//結果 number
console.log(typeof num2);//結果 object
console.log(num);//結界 69
console.log(num2);//結果 Number{69}

上記のようなコードを記述した場合、numは、69のプリミティブ型になっているに比べ、num2の場合は、numberオブジェクトから作れれたインスタンスに69が入っています。
オブジェクト型で、宣言することにより基本的に容易されている、メソッドを使用することができます。

実際にtoString()という文字列に変換するメソッドを使ってみた例が下記です。

console.log(num.toString());//結果 69
console.log(num2.toString());//結果 69

この場合に、オブジェクト型ではない、プリミティブ型でもtoString()というメソッドが問題なく使われています。

このように、numがtoString()をつかえる理由は、JSではオブジェクトのように使用しようとするとかってにjsがラッパーオブジェクトを作成してくれるからです。

ラッパーオブジェクトを作成している処理はこんなかんじです。

var num = 69;
console.log(num.toString());
//オブジェクトのtoString()メソッドを使用した瞬間に裏でコードが自動で走っている。

var num_tmp = num;//一旦、プリミティブ値を退避する。
num.toString = function(){
	//文字列に変換するメソッド
}

//処理が完了するとラッパーオブジェクトは破壊され、普通のプリミティブ型に戻る
num = num.tmp;//num変数に退避させたプリミティブ値を入れ戻す。
delete num_tmp; //作ったラッパーオブジェクトは捨てる。

イメージは、一瞬スーパーハイテンションになるイメージです。

このように、プリミティブ型でも、ラッパーオブジェクトをしようし、オブジェクトとして使用できるので「すべてのものはオブジェクトのように使える」と言われています。

オブジェクトは、後から変更可能!

jsでは作ったオブジェクトや、すでに容易されたネイティブなオブジェクトも変更できてします。
なので、jsという言語自体をぶっ壊せるということでもあります、、d(￣ ￣)

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オブジェクトについて

Objectオブジェクト全てのベースになっているオブジェクトです。
組み込みオブジェクトもユーザ定義オブジェクトも、オブジェクトと名前のつくものはすべて、Object オブジェクトで定義されたプロパティやメソッドを共通して利用できます。

実際に配列もオブジェクトとして扱っている例を紹介します。

var arr = ['html', 'css', 'js'];//配列として宣言
var arr = new Array('html', 'css', 'js');//オブジェクトとして指定もできます。

console.log(arr);//結果 ["html", "css", "js"]
arr.str = '追加しちゃった';//オブジェクトなので、プロパティ、メソッドを追加できる。
console.log(arr);//結果 ["html", "css", "js", str: "追加しちゃった"]

2.7 Globalオブクジェクト

ネイティブオブジェクトと違って、インスタンス化したり、メソッド呼び出ししたりできない

var global = new Global();//NG
global.myFunc();//NG

Globalオブジェクトは、GLobal変数や、Global関数を格納しておくためのオブジェクト(一番の親玉みたいなもの)

Globalオブジェクトは、jsエンジンが初期化されたタイミング(ブラウザを立ち上げたタイミング)で自動でつくられる

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects

ブラウザの場合はwindowオブジェクトがGLobalオブジェクトになるので
グローバル変数はwindowオブジェクトの中に格納されます。

var str = 'takuzou';//グローバル変数になる
console.log(str);//結果　takuzou
console.log(window.str);//結果 takuzou