JavaScriptの知らなかったあんなこと・こんなこと

JavaScript 理解

好きだけど、あんまりよくわかってなかった

「JavaScriptが好き」「JSが最強の言語(ﾄﾞﾔｧｧｧｧｧ」と会社で偉そうに言ってたけど、よく考えたらあんまり理解できてないことが多いことに気づいた。

改めてJavaScriptを勉強してみた

調子こいて散財して本を買うお金がなくなったので、Google先生に聞きながら勉強した。
いろいろ勉強して賢くなったけど、全部まとめると時間かかっちゃうので、とりあえず知らなかったこととか、忘れがちなこととかを以下にまとめる。

オブジェクトは連想配列(ハッシュ)である

以下のコードは参考サイトの引用。1〜5まで全部等価。

// 1
var obj = { hoge: 'hoge' };

// 2
var obj = { 'hoge': 'hoge' };

// 3
var obj = {};
obj.hoge = 'hoge';

// 4
var obj = {};
obj['hoge'] = 'hoge';

// 5
var obj = new Object();
obj.hoge = 'hoge';

1,2はたしかオブジェクトリテラルとかいう書き方で、キーはクォーテーションで囲んでも囲まなくても一緒(1,2の比較)。
3,4の違いは、3はキーが数字のときは値を取り出せない。4は取り出せる。

// 3と4の補足説明
var obj = { 0: "hoge" };
alert(obj.0);  //エラー
alert(obj[0]); //hogeが出力される

また、4の書き方は[]内の文字列を動的に作ることでオブジェクトのプロパティを動的に取り出せる。

window["ale" + "rt"]("hello!");  // alertが実行される

関数の参照に()をつけると関数が実行されることと、先に挙げた例を理解できてれば、上記の例は理解できるはず。自分はこのコードにびっくりしました。

なんか書いてて「プロパティ」「メンバ」「キー」とかよくわからなくなってきた・・・
詳しい人いたら単語の正しい使い方を教えてください。

関数もオブジェクト

関数もオブジェクトなので、いつでもプロパティやメソッドを追加できる。超動的！

function a(){}
a.hoge = "fuga";
a.foo = function(){
  alert("bar");
}
alert(a.hoge); // fugaが出力される
a.foo();       // alert("bar")が実行される

aがオブジェクトなら自然な動作に見えるけど、a()って呼び出せるのにさらにa.foo()って呼び出せるって、よく考えたら相当キモイなこれ。ガッチガチのオブジェクト志向の人だと頭が破裂してまうでこれ。

関数の定義方法は３種類

以下の例は参考サイト引用。

  • 関数宣言(function文)

function a() {
alert('hoge');
}

var a = function() {
alert('hoge');
}

  • Functionコンストラクタ

var a = new Function("alert('hoge');");

関数宣言で書かれたものは、それが宣言される前に使えちゃう！

a();  // alert('a')が実行される
b();  // エラー
function a() {
  alert('a');
}
var b = function() {
  alert('b');
}

arguments.calleeとthisの違い

argumentsはその関数に渡された引数が入った配列Argumentsオブジェクト？。その中でもarguments.calleeにはその関数自身への参照が入ってる。

①

function a(x, y) {
  alert(this);  // [object Window]
  alert(typeof arguments);  // [object Arguments]
  alert(arguments.length);  // 2
  alert(arguments[0]);  // hoge
  alert(arguments[1]);  // fuga
  alert(arguments.callee);  // 関数aの内容(つまり、aの参照が入ってる)
  alert(arguments.join());  // エラー(Arrayじゃないから。でもlengthは持ってる不思議！)
}
a('hoge','fuga');

arguments.calleeはaddEventListenerで無名関数を登録したときに、無名関数自身をremoveするためによく使いますね。

②

//buttonAというidのボタンがあるものとする
var buttonA = document.getElementById("buttonA");
buttonA.addEventListener("click", function(){  // clickイベントに無名関数を登録
  alert(this);  // [object HTMLInputElement]
  this.removeEventListener("click", arguments.callee);  // clickイベントに登録された無名関数を削除
  alert("1回だけ表示されるよ！2回目以降のクリックでは出ないよ！");
});

で、thisってなんなのよと。


・・・続く。