議事録を書くためにいろいろ調べてたら時間かかっちゃいました。

いい訳ですねっ！すみません！

4.3.2 global (グローバルオブジェクト) ってなんなの？

関数として呼び出した場合、global (グローバルオブジェクト) が返ってくるのはわかった。

function f1(){
	console.log(this);
	function f2(){
		console.log(this);
	};
	f2();
	// ↑関数として呼び出す。this はglobalに。
}
f1();
// ↑関数として呼び出す。this はglobalに。

var obj = {};
obj.f1 = function f2(c){
	console.log(this);
	if(c === undefined) f2(1);
	// ↑関数として呼び出す。this はglobalに。
}

obj.f1();
// ↑メソッドとして呼び出す。this はObject(obj)に。

メソッドとして呼び出したとき、thisはObject(オブジェクト)。そしてそのObjectは、呼び出したメソッドをプロパティとして持っているオブジェクト(上記例で言うとobj)ということになります。
関数として呼び出したとき、thisはglobal (グローバルオブジェクト)。ではglobal (グローバルオブジェクト) とは何を指しているのでしょうか。

global (グローバルオブジェクト) はwindow

function f1(){
	console.log(this === window); // true
};
f1();

ということは

var prop1 = "prop1です";

(function f1(){
	prop2 = "prop2です";
	var prop3 = "prop3です";
})();

console.log(prop1); // prop1です
console.log(window.prop1); // prop1です
console.log(prop2); // prop2です
console.log(window.prop2); // prop2です
console.log(prop3); // ReferenceError
console.log(window.prop3); // ReferenceError

windowは省略出来ます。

4.3.3 newって何してるの？

他のオブジェクトを雛形にして新しいオブジェクトを作ります。

引用：JavaScript の new 演算子の意味: Days on the Moon

1. 新しいオブジェクトを作る。
2. 1 で作ったオブジェクトの [[Prototype]] 内部プロパティ (__proto__ プロパティ) に F.prototype の値を設定する。
   • F.prototype の値がオブジェクトでないのなら代わりに Object.prototype の値を設定する。
3. F を呼び出す。このとき this の値は 1 で作ったオブジェクトとし、引数には new 演算子とともに使われた引数をそのまま用いる。
4. 3 の返り値がオブジェクトならそれを返す。そうでなければ 1 で作ったオブジェクトを返す。

4.3.3 newする必要性が感じられない・・・

たとえば、以下のような場合

Object.prototype.f1 = function(){
	return 'Hi';
}
var obj = {};
console.log(obj.f1()); // Hi

と、new演算子を使わずにプロトタイプチェーンを利用できてるのでnewする必要性が感じられないという話になりました。

実はこれnewしてるようです。オブジェクトリテラルはnew Object()のシンタックスシュガーなので、

var obj = {}
// と
var obj = new Object();

は同じのようです。

var obj = {};
console.log(obj instanceof Object); // true

4.4 可変長引数

argumentsのような使い方を可変長引数という？あってます？

4.8 hanoi関数

hanoi関数が理解できなかったので、別記事で図にして記載します。

4.8 再帰はどうやって止まるの？

再帰的に自分自身を呼び出した場合、永遠に繰り返されるんじゃないの？という質問がありました。もし

var f1 = function(){
	var i = 0;
	return function f2(){
		console.log(i);
		i++;
		f2();
	}();
}();

のように書くと当然、永遠と繰り返される訳ですが、

再帰的呼び出しは何らかの条件下のもとで実行させることで永遠に繰り返されるのを防ぎます。
サンプルではwhileを使い子ノードがある間という条件下のもとで再帰的呼び出しをしています。

4.10 (function(){})();

myObject = function(){…}()で即時実行の話のとき、(function(){})();で無名関数を即時実行出来るという話になったのですが、なぜ関数を括弧で囲むと動くのか理由がわからなかったので調べました。

function(){}; // は文と認識され、
(function(){}); // は式と認識されるからだそうです。

参考サイト：webアプリの開発日記 | JavaScriptのfunction文とfunction式を考えてみる

4.10 add_the_handlers()の実行結果はどうなるの？

4.10 add_the_handlers()は間違った書き方ですが、実際にはどのような結果になるのでしょうか。

<p>1つめ</p>
<p>2つめ</p>
<p>3つめ</p>

var add_the_handlers = function(nodes){
	var i;
	for(i=0; i<nodes.length; i+=1){
		nodes[i].onclick = function(e){
			alert(i);
		}
	}
}
add_the_handlers(document.getElementsByTagName('p'));
// 結果、どのpタグを押しても3

pタグをクリックすると、イベントハンドラ関数が作られた時点での変数iではなく、クリックされた時点での変数iを参照するため、すべて3になります。

前 ← JGP 議事録1回目 3章

次 → JGP 議事録3回目 (来週土曜までに公開予定です！)