開眼java script勉強会
DESCRIPTION
TRANSCRIPT
開眼!JavaScript言語仕様から学ぶ JavaScriptの本質
読書会
113年12月13日金曜日
参考文献
Cody Lindley 著、和田 祐一郎 訳
2013年06月 発行
192ページ
213年12月13日金曜日
agendaJavaScriptオブジェクト
関数( Function())
グローバルオブジェクト
this
スコープとクロージャ
313年12月13日金曜日
JavaScriptオブジェクト
JavaScriptの世界では、ほぼすべてがオブジェクトそのものか、もしくはオブジェクトのようにふるまう
413年12月13日金曜日
オブジェクトオブジェクトとは、名前と値を持つプロパティを格納するコンテナにすぎない。
var alice = {name : aliceskill : summon_frequency_uprarity : 2
}
513年12月13日金曜日
コンストラクタ関数基本的にはただの関数
new 演算子を伴って呼び出された場合、コンストラクタ関数は特別な役割をする
コンストラクタ関数のthisの値として、これから新たに生成されるオブジェクトを設定する。
本来return文を宣言しない場合にはfalse相当の値を返すところ、コンストラクタ関数はその代わりに新たに生成されるオブジェクト(thisで参照されるオブジェクト)を返す
613年12月13日金曜日
var Alice = function Alice(name, skill, rarity)// this はここで生成されるオブジェクトthis.name = name;this.skill = skill;this.rarity = ratity;
// new演算子付きで呼ばれた場合、returnが無くてもthisを返す
};
713年12月13日金曜日
コンストラクタ関数って大文字で始めるのが通例
それぐらいしかパッと見で見分けづらい
オブジェクトの生成はリテラルを用いたほうが便利。
リテラルはnew演算子が行うことを隠ぺいしているにすぎない。
var level = new Number(150);var levelLiteral = 150;
var myObject = new Object();var myObjectLiteral = {};
813年12月13日金曜日
プリミティブ型null, undefiend, 'string', 10, true, false などはオブジェクトではなくプリミティブ型
一部のプリミティブ型はオブジェクトのように扱うとオブジェクトのようにふるまう。
var name = “Alice”;console.log(name.toString()); // Aliceが出力
913年12月13日金曜日
関数(Function())
一般的には function演算子(関数リテラル)を使う方法で生成する
var addNumber = function(num1, num2) {return num1 + num2;};
console.log(addNumber(2,3)); // 5が出力
1013年12月13日金曜日
関数について関数は常に値を返す。return文を記述していない場合などは undefinedが返される。
JavaScriptの関数は第1級関数。第1級関数は wikipediaなどで参考
1113年12月13日金曜日
関数の実行方法
関数として実行
メソッドとして実行
コンストラクタとして実行
apply()もしくはcall()を使って実行
1213年12月13日金曜日
関数の即時実行関数式は関数定義の後に()演算子を付与することによってその場で実行する。
(function(msg) { // 無名関数即時実行console.log(msg);
})(“Hello”);
1313年12月13日金曜日
グローバルオブジェクトJavaScriptのコードはオブジェクトに格納されている必要あり
Webブラウザ環境でJavaScriptコードを書く場合には、windowオブジェクト内にJavaScriptを格納し、windowオブジェクト内で実行する必要がある。このwindowオブジェクトに相当するものが「グローバルオブジェクト」
1413年12月13日金曜日
グローバルたちグローバルオブジェクト直下に格納されているのが、グローバルプロパティ、グローバル変数。
JavaScriptはあらかじめ定義されている関数をいくつか持っている。これをグローバル関数とよぶ。
decodeURI(encodedURI), encodeURI(uri), eval(x), parseInt(string, radix)....など
1513年12月13日金曜日
グローバル変数の作り方グローバルスコープ下で var演算子を伴って変数を宣言する場合、その変数はグローバル変数となる。
var演算子を使用しない場合はグローバルプロパティとして宣言される。
違いとしては delete演算子で消せるかどうか。
1613年12月13日金曜日
this関数が実行される際、thisキーワードの値が設定される。このときに設定される値は、関数を呼び出すオブジェクトへのリンク
var alice = {name : alice, getName : function() { return this.name };
};
console.log(alice.getName());
1713年12月13日金曜日
thisの値はどのように決まる?全ての関数に渡される thisの値は、関数が実行時に呼びだされる際のコンテクストに依存する。
ここは覚えておかないといけない JavaScriptの「癖」
var name = “I’m global”;var say = function() {
console.log(this.name);};
say(); // thisはグローバルオブジェクト1813年12月13日金曜日
入れ子関数内でのthis入れ子関数内では、thisはグローバルオブジェクトを参照する。残念な仕様。
これを避けるためには、一般的に入れ子関数からアクセスできるスコープに var that
= this などを保持して、その thatを使用することで thisを見失うことがない。
1913年12月13日金曜日
スコープとクロージャコードが実行されるコンテクストにスコープが割り当てられる。スコープには、下記の3つのタイプがある。
グローバルスコープ
ローカルスコープ(関数スコープ)
evalスコープ
2013年12月13日金曜日
var foo = 0; // globalScopeconsole.log(foo); // 0
var myFunction = function(){var foo = 1 // localScopeconsole.log(foo); // 1
}
eval(‘var foo = 3; console.log(foo);’); // evalScope
スコープ別出力例
2113年12月13日金曜日
ブロックスコープは無い!他の言語と違うので注意!
2213年12月13日金曜日
スコープチェーン変数を参照する時、近いローカルスコープから探し、グローバルスコープまで辿る
var x = 10;var foo = function(){
var y = 20;var bar = function(){
var z = 30;console.log(z + y + x);
}();};foo();
2313年12月13日金曜日
クロージャクロージャを一言で表すと「スコープチェーンによって存在する変数への参照を保持している関数」
カプセル化
グローバル変数汚濁を防ぐ
2413年12月13日金曜日
var countUp = function(){var count = 0; // 守られているreturn function() {
return ++count;};
}(); // 即時実行して無名関数を返す
console.log(countUp()); // 1console.log(countUp()); // 2console.log(countUp()); // 3
2513年12月13日金曜日
クロージャ失敗例var foo = function(){
var funcArray = [];var i;for(i = 0; i< 3; i++){
funcArray[i] = function(){console.log(i);};}return funcArray;
}();
foo[0].();foo[1].();
2613年12月13日金曜日
クロージャ成功例var foo = function(){
var funcArray = [];var i;var func = function(i){ // i をスコープに保持
return function() { console.log(i); };}for(i = 0; i< 3; i++){
funcArray[i] = func(i);}return funcArray;
}();2713年12月13日金曜日
end
まだ他にもありますが、時間切れ
2813年12月13日金曜日