jsで名前空間使った時、thisの動作がわからない

Question

みなさん、こんにちは

今まで名前空間を使わずにjsを書いてきたのですが、最近になってwindowの汚染が気になってきました。
そこで、名前空間を使ってみようと思ったのですが、どうしても腑に落ちない点があります。

↓のコードを実行してみたところ、changeイベントでも"hellow"が表示されました。
changeイベントの中ではthisがinputになるハズなので、私はundefineが表示されると思いまいました。

thisをbindしていないのに、"hellow"が表示されたのは不思議です。
なぜ、私の予想と反して、changeイベントで"hellow"が表示されたのですか？

var app = app || {};

(function(app) {
	var _val = "hellow";

	app.test = function() {
		console.log(_val);
	}
	
	$(function($) {		
		$("#test").change(function() {
			console.log(_val);
		});
	});
})(app);

app.test();

Answer 1

this 値束縛と変数の名前空間は別々の概念です。
スコープチェーンについて調べてみて下さい。
change() で渡されたコールバック関数におけるスコープ上に _val が存在する為、hellow を参照できます。

changeイベントの中ではthisがinputになるハズなので、私はundefineが表示されると思いまいました。

イベントハンドラ関数では this 値は event.currentTarget に束縛されます。

名前空間を使ってみようと思ったのですが、

ところで、app をグローバル変数化する必要があるでしょうか。
無名関数式内に閉じるだけで目的を達成できそうなのですが…。

Re: redhat98さん