Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript入門                2011/10/24       h13i32maru@Twitter         maruyama-r@KLab
自己紹介• 丸山 亮(h13i32maru) 最近はJSを触ってます• KLab株式会社所属32   http://blog.h13i32maru.jp     http://twitter.com/h13i32maru     https:/...
JavaScript面白いよ(´ω`)
でも良く分からないとはまっちゃう(´・ω・`)
今日は他の言語とは少し違うところのお話
JavaScriptとは•   プロトタイプベースのオブジェクト指向言語•   関数言語の性質もあり•   シングルスレッド•   全てパブリック
“関数”超重要
オブジェクト指向•   JavaScriptはプロトタイプベース    -   JavaやPHPはクラスベース•   あるオブジェクト(プロトタイプ)をカスタマイズ
var MyConstructor = function(){   this.print = function(){      console.log("this is MyClass");   };}var a = new MyConstru...
継承•   あるオブジェクトを継承したオブジェクトを作る    -   Object#prototype•   MyConstructorを継承してChildConstructor作る
var MyConstructor = function(){   this.print = function(){      console.log("this is MyConstructor");   };}var ChildConstr...
スコープ•   グローバルスコープと関数スコープのみ    •   ブロックスコープは無し•   var hogeで関数スコープになる•   変数宣言はスコープ先頭になる
function func(){   var x = 20;   for(var i = 0; i < 100; i++){      var x = i;   }   console.log(x);}func(); //99
x = 10;y = -10;function func(){   x = 20;   var y = -20;}func();console.log(x); //20console.log(y); //-10
function func(){   console.log(x); //undefined   var x = 10;   console.log(y); //error}func();
x = 10;function func(){   console.log(x);   var x = 20;}func(); //undefined
実行時コンテキスト•   関数は実行時にコンテキスト(this)が決定される    -   JavaやC++などではコンテキストは不変•   あるオブジェクトのメソッドを別のオブジェクトのメ    ソッドとして実行できる
var obj = {   hoge: 100,   func: function(){      console.log(this.hoge);   }}//case 1: “this”はobjコンテキストobj.func(); //100/...
var obj = {   hoge: 100,   func: function(){      console.log(this.hoge);   }}function piyo(func){   func();}function fuga...
クロージャ•   関数外の変数を関数内に内包(クロージング)する•   関数実行時のスコープ解決に関数生成時のスコープを使    用する
function hoge(){   var x = 10;   var func = function(){      console.log(x);   }    foo(func);}function foo(func){   var x...
func = null;function hoge(){   var x = 10;    func = function(){       console.log(x);       x++;    }}hoge();func(); //10...
a = [];for(var i = 0; i < 10; i++){   a[i] = function(){      console.log(i);   }}a[0]();a[2]();a[4]();
a = [];for(var i = 0; i < 10; i++){   a[i] = function(){      console.log(i);   }}a[0](); //10a[2](); //10a[4](); //10
a = [];for(var i = 0; i < 10; i++){   a[i] = makeFunc(i);}function makeFunc(index){   return function(){      console.log(...
a = [];for(var i = 0; i < 10; i++){   a[i] = function(index){       return function(){          console.log(index);       ...
プライベート変数•   クロージャを使ってプライベート変数やメソッドを作る    ことができる
var init = function(){   this.x = 10;     this.print = function(){        console.log(this.x);     };     this.inc = funct...
var init = function(){   var x = 10;     this.print = function(){        console.log(x);     };     this.inc = function(){...
コーディングスタイル•   Google JavaScript Style Guide    •   http://cou929.nu/data/google_javascript_style_guide/#id8•   JavaScript?...
おわり
Upcoming SlideShare
Loading in …5
×

JavaScript入門

1,711 views

Published on

Published in: Technology
  • Be the first to comment

JavaScript入門

  1. 1. JavaScript入門 2011/10/24 h13i32maru@Twitter maruyama-r@KLab
  2. 2. 自己紹介• 丸山 亮(h13i32maru) 最近はJSを触ってます• KLab株式会社所属32 http://blog.h13i32maru.jp http://twitter.com/h13i32maru https://www.facebook.com/ryo.maruyama https://github.com/h13i32maru
  3. 3. JavaScript面白いよ(´ω`)
  4. 4. でも良く分からないとはまっちゃう(´・ω・`)
  5. 5. 今日は他の言語とは少し違うところのお話
  6. 6. JavaScriptとは• プロトタイプベースのオブジェクト指向言語• 関数言語の性質もあり• シングルスレッド• 全てパブリック
  7. 7. “関数”超重要
  8. 8. オブジェクト指向• JavaScriptはプロトタイプベース - JavaやPHPはクラスベース• あるオブジェクト(プロトタイプ)をカスタマイズ
  9. 9. var MyConstructor = function(){ this.print = function(){ console.log("this is MyClass"); };}var a = new MyConstructor();a.print();
  10. 10. 継承• あるオブジェクトを継承したオブジェクトを作る - Object#prototype• MyConstructorを継承してChildConstructor作る
  11. 11. var MyConstructor = function(){ this.print = function(){ console.log("this is MyConstructor"); };}var ChildConstructor = function(){ this.childPrint = function(){ console.log("this is ChildConstructor"); }}ChildConstructor.prototype = new MyConstructor();var b = new ChildConstructor();b.print(); //this is MyConstructorb.childPrint(); //this is ChildConstructor
  12. 12. スコープ• グローバルスコープと関数スコープのみ • ブロックスコープは無し• var hogeで関数スコープになる• 変数宣言はスコープ先頭になる
  13. 13. function func(){ var x = 20; for(var i = 0; i < 100; i++){ var x = i; } console.log(x);}func(); //99
  14. 14. x = 10;y = -10;function func(){ x = 20; var y = -20;}func();console.log(x); //20console.log(y); //-10
  15. 15. function func(){ console.log(x); //undefined var x = 10; console.log(y); //error}func();
  16. 16. x = 10;function func(){ console.log(x); var x = 20;}func(); //undefined
  17. 17. 実行時コンテキスト• 関数は実行時にコンテキスト(this)が決定される - JavaやC++などではコンテキストは不変• あるオブジェクトのメソッドを別のオブジェクトのメ ソッドとして実行できる
  18. 18. var obj = { hoge: 100, func: function(){ console.log(this.hoge); }}//case 1: “this”はobjコンテキストobj.func(); //100//case 2: “this”はグローバルコンテキストvar foo = obj.func;foo(); //undefined//case 3: “this”はfugaコンテキストvar fuga = {hoge: -10};fuga.piyo = obj.func;fuga.piyo(); //-10
  19. 19. var obj = { hoge: 100, func: function(){ console.log(this.hoge); }}function piyo(func){ func();}function fuga(func, context){ func.apply(context);}piyo(obj.func); //undefinedfuga(obj.func, obj); //100
  20. 20. クロージャ• 関数外の変数を関数内に内包(クロージング)する• 関数実行時のスコープ解決に関数生成時のスコープを使 用する
  21. 21. function hoge(){ var x = 10; var func = function(){ console.log(x); } foo(func);}function foo(func){ var x = 100; func();}hoge(); //10
  22. 22. func = null;function hoge(){ var x = 10; func = function(){ console.log(x); x++; }}hoge();func(); //10func(); //11func(); //12
  23. 23. a = [];for(var i = 0; i < 10; i++){ a[i] = function(){ console.log(i); }}a[0]();a[2]();a[4]();
  24. 24. a = [];for(var i = 0; i < 10; i++){ a[i] = function(){ console.log(i); }}a[0](); //10a[2](); //10a[4](); //10
  25. 25. a = [];for(var i = 0; i < 10; i++){ a[i] = makeFunc(i);}function makeFunc(index){ return function(){ console.log(index); }}a[0](); //0a[2](); //2a[4](); //4
  26. 26. a = [];for(var i = 0; i < 10; i++){ a[i] = function(index){ return function(){ console.log(index); } }(i);}a[0](); //0a[2](); //2a[4](); //4
  27. 27. プライベート変数• クロージャを使ってプライベート変数やメソッドを作る ことができる
  28. 28. var init = function(){ this.x = 10; this.print = function(){ console.log(this.x); }; this.inc = function(){ this.x++; }};var obj = new init();obj.print(); //10obj.inc();obj.print(); //11console.log(obj.x); //11
  29. 29. var init = function(){ var x = 10; this.print = function(){ console.log(x); }; this.inc = function(){ x++; }};var obj = new init();obj.print(); //10obj.inc();obj.print(); //11console.log(obj.x); //undefinedvar obj2 = new init();obj2.print(); //10
  30. 30. コーディングスタイル• Google JavaScript Style Guide • http://cou929.nu/data/google_javascript_style_guide/#id8• JavaScript? Coding Guidelines for Mac OS X • http://developer.apple.com/jp/documentation/ScriptingAutomation/Conceptual/ JSCodingGuide/• Felixs Node.js Style Guide • http://popkirby.github.com/contents/nodeguide/style.html• JavaScript? style guide • https://developer.mozilla.org/ja/JavaScript_style_guide
  31. 31. おわり

×