カテゴリ: プログラミング

JavaScript のスコープを理解する - tacamy.blog http://tacamy.hatenablog.com/entry/2012/12/30/191125

JavaScriptにはグローバル変数とローカル変数がある.

JavaScriptのローカル変数のスコープ(ある変数が有効な範囲)は関数スコープとなる.

C言語などと違い,制御文(ifやforなど)の中括弧ブロック{}の中で宣言された変数は,中括弧ブロックの外からも参照できる.

function sayHello(){
	if(1){
		var hello = "hello!";
	}
	console.log(hello);
}
sayHello(); // => hello!!

グローバル変数とローカル変数で同名の変数があると,ローカル変数が参照される.

var hello = "global_hello";
function sayHello(){
	var hello = "local_hello";
	console.log(hello);
}
sayHello(); // => local_hello

では,以下のようなコードでは何が出力されるだろう?

var hello = "global_hello";
function sayHello(){
	console.log(hello);
	var hello = "local_hello";
}
sayHello();

直感的には,console.log()でhelloを参照する時,sayhello関数のローカル変数helloはまだ宣言されていないので,グローバル変数helloの値"global_hello"が出力されるのではと思える.

実際には,undefinedが出力される.

JavaScriptでは関数内で宣言された変数は関数全体で有効となる.

しかし,初期化処理自体はその文が実行されるまで有効とならない.

これを巻き上げ(ホイスティング)と呼ぶらしい.

Google日本語入力が"ほいすてぃんぐ"を変換すると誤字だと認識して"ホスティング"と変換しようとするので厄介.

JavaScript - 型変換のいろいろ - Qiita

オライリーのJavascirpt本の54/821ページあたりを読んでいる.

JavaScriptは動的に型を変換する.

空の文字列は,数値型に変換すると0に変換される.

var empty = ""; // 空の文字列
console.log(Number(empty)); // 0 :これはNumber関数で数値に変換
var hoge = empty - 0; // emptyは動的に数値に変換されて計算される
console.log(hoge); // 0
console.log(typeof hoge); // number

+演算子だと,数値の方が文字列になって結合される.

var huga = empty + 0;
console.log(huga); // "0"
console.log(typeof huga); // string 

オブジェクトを数値に変換するとき,まずvalueOfメソッドを使い,プリミティブ型に変換する.変換できなかった時,toStringメソッドを使いプリミティブ型に変換し,それを数値型に変換する.

var array = [];
console.log(array.valueOf()); // [all: function] : オブジェクトが返される
console.log(array.toString()); // ""(空の文字列)

なので,空の配列で数値計算を行うと,toStringメソッドで空の文字列""に変換された後,空の文字列""が数値0に変換される.

var array = [];
console.log(array - 10); // -10 

配列が空じゃない時の動作.複数要素が入った配列で数値計算すると怒られる.

"2,3"とかは動的に数値型に変換できないため.

var array2 = [2];
console.log(array2 - 10); // -8

var array3 = [2,3];
console.log(array3.toString()); // "2,3"
console.log(array3 - 10); // NaN

43

JavaScriptにはプリミティブ型とオブジェクト型がある.

九章第七回 プリミティブとオブジェクト — JavaScript初級者から中級者になろう — uhyohyo.net

JavaScript プリミティブ型 (基本データ型)

プリミティブ型のうち,数値,文字列,真偽値には,ラッパーオブジェクトがある.

プリミティブ型の値がプロパティやメソッドを呼び出した時,内部的には一時的にラッパーオブジェクトが呼び出され,そのオブジェクトのプロパティやメソッドを参照している.

var text = "texttext";
console.log(text); // texttext
console.log(text.length); // 8

ラッパーオブジェクトをわざわざ呼び出す方法もある.

var text2 = new String("text2text2");
console.log(text2); // String {0: "t", 1: "e", 2: "x", 3: "t", 4: "2", 5: "t", 6: "e", 7: "x", 8: "t", 9: "2", length: 10, [[PrimitiveValue]]: "text2text2"}
console.log(text2.length); // 10

プリミティブ型が内部的に生成したラッパーオブジェクトは使い捨てらしい.

var text = "texttext";
text.abc = "abc";
console.log(text.abc); // undefined

var text2 = new String("text2text2");
text2.abc = "abc";
console.log(text2.abc); // abc

逆にラッパーオブジェクトで演算する時はプリミティブ型になるらしい.

text4 = text2 + text2;
console.log(text4); // text2text2text2text2

JavaScript面白い(分からない)

クロージャ・無名関数の話

一章第四回 オブジェクトと関数 — JavaScript初級者から中級者になろう — uhyohyo.net http://uhyohyo.net/javascript/1_4.html

九章第五回 クロージャ — JavaScript初級者から中級者になろう — uhyohyo.net http://uhyohyo.net/javascript/9_5.html

クロージャ - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Closures

javascriptを理解するためのたった2つの大切なこと:改 http://anond.hatelabo.jp/20070622101313

オブジェクト指向の話

JavaScriptのクラス?コンストラクタ?? - Qiita http://qiita.com/takeharu/items/010752b1427773558f7c

九章第一回 オブジェクト指向とは — JavaScript初級者から中級者になろう — uhyohyo.net http://uhyohyo.net/javascript/9_1.html

九章第二回 prototypeの活用 — JavaScript初級者から中級者になろう — uhyohyo.net http://uhyohyo.net/javascript/9_2.html

thisの話

JavaScriptの「this」は「4種類」?? - Qiita http://qiita.com/takeharu/items/9935ce476a17d6258e27

JavaScriptのthisの覚え方 http://qiita.com/vvakame/items/74005adacc0e8e2a3cab

JavaScript - じゃあ this の抜き打ちテストやるぞー - Qiita http://qiita.com/KDKTN/items/0b468a07410d757ac609

applyとcallの使い方を丁寧に説明してみる - あと味 http://taiju.hatenablog.com/entry/20100515/1273903873

その他

三章第三回 イベントバブリング — JavaScript初級者から中級者になろう — uhyohyo.net http://uhyohyo.net/javascript/3_3.html

や...やっと理解できた!JavaScriptのプロトタイプチェーン - maeharinの日記 http://d.hatena.ne.jp/maeharin/20130215/javascript_prototype_chain

JavascriptとKnockout.jsの入門をしている.

進捗は以下をご覧ください(2014年12月6日現在動かない)

MIPS To Hexadecimal - MIPS命令を16進数表記に直すよ - http://asakuradev.web.fc2.com/MTH/

日本語ドキュメント読んでて,しょっぱなから「????」ってなった.

まず,Knockout.jsの一番大事な機能のObservableを見た.

Observable (ViewModelをつくる) | Knockout.js 日本語ドキュメントhttp://kojs.sukobuto.com/docs/observables

/* javascript */
var myViewModel = {
    personName: ko.observable('ボブ'),
    personAge: ko.observable(123)
};
ko.applyBindings(myViewModel);
<!-- HTML -->
お名前: <span data-bind="text: personName"></span>

まだ分かる.myViewModelというオブジェクトを作って,プロパティにko.observableというおまじないをしてあげて,ko.applyBindingsというおまじないにmyViewModelを生贄に捧げると,ビューとモデルが連動するようになるんだ!

Computed Observable | Knockout.js 日本語ドキュメント http://kojs.sukobuto.com/docs/computedObservables

例えば、次のような ViewModel クラスがあるとします。

function AppViewModel() {
    this.firstName = ko.observable('ボブ');
    this.lastName = ko.observable('スミス');
}

まって,ビューモデルが関数になってる.

AppViewModelの所に関してはバインディングの所は例が提示されていません.

さっきの例に習ってこう書くと動きません

ko.applyBindings(AppViewModel);

カッコを付けてみる

ko.applyBindings(AppViewModel());

動いた.関数オブジェクトを渡すのではなく,関数を呼び出している?

これも動く

ko.applyBindings(new AppViewModel());

Javascriptの勉強からしないといけなさそう.

↑このページのトップヘ