Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie JavaScript基礎勉強会
Ähnlich wie JavaScript基礎勉強会 (20)
JavaScript基礎勉強会
- 2. JavaScript道 1. 必須の基礎知識 2. モダンJavaScript 初級編 3. JavaScript最新事情 4. 以後未定 ECMAScript 今日はここやります
- 6. strict mode （厳格モード）とは？ "use strict"; // global ! function() { "use strict"; // innner only }
- 9. 変数の巻き上げ 以下がどうなるかわかりますか？ (function () { console.log(a); var a = 'aaaa'; console.log(a); })(); undefined “aaaa” エラーにならない！
- 10. 変数の宣言 変数の巻き上げ どうしてエラーにならなかったの？ (function () { var a; console.log(a); var a = 'aaaa'; console.log(a); })(); こういう風に解釈されたから
- 11. 変数の宣言 全部 ”button No. ${buttons.length}” と表示されてしまう！ なんか問題あんの？ 適当に書けて便利じゃん？ var buttons = document.querySelectorAll('button'); for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener( 'click', function () { console.log('button No.' + i); } ); }
- 13. 関数定義 案外ややこしい
- 14. 関数宣言 関数式 // statement function hoge() {} ! // expression var hoge = function() {}; 何がちがうの…… わからん！
- 16. スコープ 基本です
- 17. スコープ 二種類しかないよ var globar = 'global desu'; ! function scope1() { var locar = 'local desu'; console.log(globar); // global desu function scope2() { var locarSecond = 'local mark2 desu'; console.log(locar); // local desu } console.log(locarSecond); // ReferenceError: locarSecond is not defined } console.log(locar); // ReferenceError: locar is not defined
- 18. スコープ 応用テクニック (function() { var locar = 'local desu'; window.globar = 'global desu'; })(); console.log(locar); // ReferenceError: locar is not defined console.log(globar); // global desu グローバル汚染を防ぐため、ほんとに最低限の作法。 モダンJSにおいてはモジュール化の手法を学ぶべし。
- 20. その前に
- 22. 簡単な実装 var i = 0; ! var inc = function() { i += 1; return i; }; ! inc(); // 1 inc(); // 2 inc(); // 3 いけてない……
- 23. var i = 0; var h = 0; ! var inc1 = function() { i += 1; return i; }; ! var inc2 = function() { h += 1; return h; }; 何がダメか グローバル汚染、汎用性なし、拡張性なし……
- 24. クロージャ使えってか？
- 25. クロージャを使った解答 var incrementGenerator = function (start) { var inc = function () { start += 1; return start; } return inc; }; ! var inc1 = incrementGenerator(0); var inc2 = incrementGenerator(0); ! inc1(); // 1 inc2(); // 1 inc1(); // 2 inc2(); // 2
- 27. 復習：スコープ var globar = 'global desu'; ! function scope1() { var locar = 'local desu'; console.log(globar); // global desu function scope2() { var locarSecond = 'local mark2 desu'; console.log(locar); // local desu } console.log(locarSecond); // ReferenceError: locarSecond is not defined } console.log(locar); // ReferenceError: locar is not defined
- 28. 復習：スコープ var staticScope = (function () { var locar = 'local desu'; var innerEnvironment = function () { return locar; }; return innerEnvironment; })(); ! console.log(staticScope()); // local desu console.log(staticScope()); // local desu 参照した変数が生き続ける
- 29. レキシカルスコープ 理解のポイント • 上のスコープ（関数）の変数を参照（束縛）出来る • 束縛した環境は持ち運べる • 実行ごとに新しい環境が作られる • 定義時の静的なスコープが参照範囲 それだけ
- 30. Q：何に使えるの？ 例えば • データと振る舞いの結合が出来る • プライベート変数、関数みたいなものを作れる • カリー化などの関数型テクニック • その他…… A：色んなところ
- 34. case: プロトタイプ var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; })(); ! var greeter = new Greeter("world"); console.log(greeter.greet());
- 35. class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } ! var greeter = new Greeter("world"); console.log(greeter.greet()); case: クラス
- 37. Caution!