開眼!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の関数は第１級関数。第１級関数は 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日金曜日

スコープとクロージャコードが実行されるコンテクストにスコープが割り当てられる。スコープには、下記の３つのタイプがある。

グローバルスコープ

ローカルスコープ（関数スコープ）

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日金曜日