Download as PDF, PPTX
![apply()
var myObject = {};
var myFunction = function (param1, param2) {
this.foo = param1;
this.bar = param2;
console.log(this)
};
myFunction.apply(myObject, ['foo', 'bar']);
console.log(myObject);
配列](https://image.slidesharecdn.com/jskakusei-140806204611-phpapp01/75/JavaScript-32-2048.jpg)
![var foo = 'foo';
var myObject = { foo: 'I am myObject.foo' };
var sayFoo = function () {
console.log(this['foo']);
};
myObject.sayFoo = sayFoo;
myObject.sayFoo();
sayFoo();
プロパティに関数指定する
オブジェクトメソッド実行
関数実行](https://image.slidesharecdn.com/jskakusei-140806204611-phpapp01/75/JavaScript-47-2048.jpg)
![クロージャ失敗例
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].();
子関数からは共通のiにアクセス
関数の参照を保持](https://image.slidesharecdn.com/jskakusei-140806204611-phpapp01/75/JavaScript-61-2048.jpg)
![クロージャ成功例
var foo = function () {
var funcArray = [];
var i;
var func = function (i) {
return function () {
console.log(i);
};
}
for (i = 0; i < 3; i++) {
funcArray[i] = func(i);
}
return funcArray;
}();
独自に持つローカル変数変数
クロージャを配列に格納](https://image.slidesharecdn.com/jskakusei-140806204611-phpapp01/75/JavaScript-62-2048.jpg)
![配列に格納された関数を実行
funcArray[0]();
funcArray[1]();
funcArray[2]();
出力: 0
出力: 1
出力: 2](https://image.slidesharecdn.com/jskakusei-140806204611-phpapp01/75/JavaScript-63-2048.jpg)
Uploaded byHaraguchi Go
覚醒!JavaScript
7月19日に行った「覚醒！JavaScript」勉強会で使用したスライドです。 http://connpass.com/event/7082/
覚醒!JavaScript
- 1.
- 2. 自己紹介 • 原口 剛(はらぐち ごう) • フロントエンドエンジニア • ２０１２年 gumi入社 • スマホWebゲーム
- 3.
- 4.
- 5. それは、”jQueryJavaScript”だった・・・ $('.carousel-prev').click(function () { $('.carousel').carousel('scroll','-=1'); }); $('.carousel-next').click(function () { $('.carousel').carousel('scroll', '+=1'); }); (勝手に命名)
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. オブジェクト 『名前』と『値』を持つプロパティを 格納するコンテナ var man =new Object(); man.living = true; man.age = 35; man.gender = 'male'; 値 名前
- 15.
- 16. メソッド var man =new Object(); man.living = true; man.age = 35; man.gender = ‘male'; man.getGender = function(){ return man.gender; } ふるまい
- 17.
- 18.
- 19. var Person =function (living, age, gender) { this.living = living; this.age = age; this.gender = gender; this.getGender = function () { return this.gender; }; }; var haraguchi_10 = new Person(true, 10, ‘male’); var haraguchi_20 = new Person(true, 20, ‘male’); var haraguchi_30 = new Person(true, 30, ‘male'); コンストラクタ関数
- 20.
- 21. ９つのオブジェクト Number() 、String()、 Boolean()、Object()、 Array() Function()、 Date()、 RegExp()、 Error() 言語の深層部を理解するには、以上のネイティブ オブジェクトコンストラクタ関数を知っておくこ とが になる
- 22. リテラル オブジェクト生成のショートカット リテラルはnew演算子が行うことを隠 しているにすぎない オブジェクトの生成はリテラルの方がお手軽だし便利 var myNumber= new Number(10000); var myNumberLiteral = 10000; console.log(myNumber.constructor, myNumberLiteral.constructor); Number() Number() newする リテラル
- 23. プリミティブ値 null, undefiend, ’string’,10, true, falseなどは オブジェクトではなくプリミティブ型 一部のプリミティブ型はオブジェクトのように扱 うとオブジェクトのようにふるまう var name= “Haraguchi”; console.log(name.toString()); オブジェクト型化
- 24. オブジェクトの保持 • オブジェクトは参照によって保存・操作される • 変数名からメモリ上のアドレスにアクセスする •変数に代入すると参照(アドレス)がコピーされる • 参照先の変更は、同じ参照をしている変数全てに かかる
- 25. var myObject ={}; var copyOfMyObject = myObject; myObject.foo = 'bar'; console.log(myObject, copyOfMyObject); // 出力： 参照をコピー 同じ参照 同じ参照
- 26.
- 27. var objectFoo ={ same: 'same' }; var objectBar = { same: 'same' }; console.log(objectFoo === objectBar); ! ! 別参照 別参照 出力: false
- 28.
- 29. 関数(Function()) 一般的にはfunction演算子（関数リテラル）を使う 方法で生成する var addNumber =function(num1, num2){ return num1 + num2}; console.log(addNumber(2, 3));
- 30.
- 31. 関数の実行方法 • 関数として実行 • メソッドとして実行 •コンストラクタとして実行 • apply()もしくはcall()を使って実行 new Hoge() foo.hoge() hoge()
- 32. apply() var myObject ={}; var myFunction = function (param1, param2) { this.foo = param1; this.bar = param2; console.log(this) }; myFunction.apply(myObject, ['foo', 'bar']); console.log(myObject); 配列
- 33. apply() var myObject ={ myFunction: function (param1, param2) { this.foo = param1; this.bar = param2; console.log(this) } }; myObject.myFunction('foo', 'bar'); console.log(myObject);
- 34. call() var myObject ={}; var myFunction = function (param1, param2) { this.foo = param1; this.bar = param2; console.log(this) }; myFunction.call(myObject, 'foo', 'bar'); console.log(myObject); 第二引数以降
- 35. call() var myObject ={ myFunction: function (param1, param2) { this.foo = param1; this.bar = param2; console.log(this) } }; myObject.myFunction('foo', 'bar'); console.log(myObject);
- 36.
- 37.
- 38. var countdown =function countdown(num) { console.log(num); num--; if (num < 0) { return false; } countdown(num); }; countdown(5); 再帰 中断
- 39.
- 40.
- 41. グローバル関数 decodeURI(encodedURI), decodeURIComponent(encodedURIComponent), encodeURI(uri), encodeURIComponent(uriComponent), eval(x), isFinite(number),isNaN(number), parseFloat(string), parseInt(string, radix)
- 42.
- 43. var a =10; b = 100; delete a; delete b; グローバル変数 グローバルプロパティ 削除できない 削除できる
- 44.
- 45. this 関数が実行される際、thisキーワードの値が設定さ れる。このとき設定される値は、関数を呼び出す オブジェクトへリンク var man ={ name: “Haraguchi”, getName: function(){return this.name}; }; manを示す
- 46.
- 47. var foo ='foo'; var myObject = { foo: 'I am myObject.foo' }; var sayFoo = function () { console.log(this['foo']); }; myObject.sayFoo = sayFoo; myObject.sayFoo(); sayFoo(); プロパティに関数指定する オブジェクトメソッド実行 関数実行
- 48.
- 49. var myObject ={ func1: function () { console.log(this); var func2 = function () { console.log(this) ; var func3 = function () { console.log(this); }(); }(); } } myObject window window
- 50. 入れ子関数内でのthisの保持 入れ子関数内でのthisの値見失わないために、一般 的に入れ子関数からアクセスできるスコープに var self =thisなどで保持して、そのselfを使用する ことでthisを見失うことがない
- 51. var myObject ={ myProperty: 'I can see the light', myMethod: function () { var self= this; var helperFunction = function () { console.log(self.myProperty); console.log(this); }; helperFunction(); } } myObject.myMethod(); window myObject thisを保持
- 52.
- 53.
- 54. スコープ別出力例 var foo =o; console.log(foo); var myFunction = function(){ var foo = 1; console.log(foo); } eval(‘var foo = 3; console.log(foo);’); グローバルスコープ ローカルスコープ evalスコープ
- 55. ブロックスコープは無い var foo =1; if (true) { foo = 2; foo = i; console.log(foo); } fooの値が書き換わる 同じスコープ 同じスコープ
- 56. スコープチェーン 変数を参照する時、近いローカルスコープから探し、見つからな かったらグローバルスコープまで る var x= 10; var foo = function () { var y = 20; var bar = function () { var z = 30; console.log(z + y + x); }; }; foo(); 「bar」のローカルスコープ 「foo」のローカルスコープ グローバルスコープ
- 57. 静的スコープ • 関数定義時の場所にもとづいてスコープが決定 • thisの決定(実行時)とは、違う •定義済みの関数を別スコープへ渡しても、スコー プチェーンは変わらない
- 58. var parentFunction =function () { var foo = 'foo'; return function () { console.log(foo); } } var nestedFunction = parentFunction(); nestedFunction(); 出力: 'foo' 無名関数を参照 出力: 'foo'
- 59.
- 60. カプセル化 var countUp =function () { var count = 0; return function () { return ++count; }; }(); console.log(countUp()); console.log(countUp()); console.log(countUp()); 子関数からのみアクセス可能 スコープチェーンをだとる スコープチェーンをだとる スコープチェーンをだとる
- 61. クロージャ失敗例 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].(); 子関数からは共通のiにアクセス 関数の参照を保持
- 62. クロージャ成功例 var foo =function () { var funcArray = []; var i; var func = function (i) { return function () { console.log(i); }; } for (i = 0; i < 3; i++) { funcArray[i] = func(i); } return funcArray; }(); 独自に持つローカル変数変数 クロージャを配列に格納
- 63.
- 64.
- 65.
- 66.