More Related Content Similar to JavaScript入門 (20) More from Ryo Maruyama (15) JavaScript入門1. JavaScript入門
2011/10/24
h13i32maru@Twitter
maruyama-r@KLab
2. 自己紹介
• 丸山 亮(h13i32maru) 最近はJSを触ってます
• KLab株式会社所属
32 http://blog.h13i32maru.jp
http://twitter.com/h13i32maru
https://www.facebook.com/ryo.maruyama
https://github.com/h13i32maru
6. JavaScriptとは
• プロトタイプベースのオブジェクト指向言語
• 関数言語の性質もあり
• シングルスレッド
• 全てパブリック
8. オブジェクト指向
• JavaScriptはプロトタイプベース
- JavaやPHPはクラスベース
• あるオブジェクト(プロトタイプ)をカスタマイズ
9. var MyConstructor = function(){
this.print = function(){
console.log("this is MyClass");
};
}
var a = new MyConstructor();
a.print();
10. 継承
• あるオブジェクトを継承したオブジェクトを作る
- Object#prototype
• MyConstructorを継承してChildConstructor作る
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 MyConstructor
b.childPrint(); //this is ChildConstructor
12. スコープ
• グローバルスコープと関数スコープのみ
• ブロックスコープは無し
• var hogeで関数スコープになる
• 変数宣言はスコープ先頭になる
13. function func(){
var x = 20;
for(var i = 0; i < 100; i++){
var x = i;
}
console.log(x);
}
func(); //99
14. x = 10;
y = -10;
function func(){
x = 20;
var y = -20;
}
func();
console.log(x); //20
console.log(y); //-10
15. function func(){
console.log(x); //undefined
var x = 10;
console.log(y); //error
}
func();
17. 実行時コンテキスト
• 関数は実行時にコンテキスト(this)が決定される
- JavaやC++などではコンテキストは不変
• あるオブジェクトのメソッドを別のオブジェクトのメ
ソッドとして実行できる
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. var obj = {
hoge: 100,
func: function(){
console.log(this.hoge);
}
}
function piyo(func){
func();
}
function fuga(func, context){
func.apply(context);
}
piyo(obj.func); //undefined
fuga(obj.func, obj); //100
20. クロージャ
• 関数外の変数を関数内に内包(クロージング)する
• 関数実行時のスコープ解決に関数生成時のスコープを使
用する
21. function hoge(){
var x = 10;
var func = function(){
console.log(x);
}
foo(func);
}
function foo(func){
var x = 100;
func();
}
hoge(); //10
22. func = null;
function hoge(){
var x = 10;
func = function(){
console.log(x);
x++;
}
}
hoge();
func(); //10
func(); //11
func(); //12
23. a = [];
for(var i = 0; i < 10; i++){
a[i] = function(){
console.log(i);
}
}
a[0]();
a[2]();
a[4]();
24. a = [];
for(var i = 0; i < 10; i++){
a[i] = function(){
console.log(i);
}
}
a[0](); //10
a[2](); //10
a[4](); //10
25. a = [];
for(var i = 0; i < 10; i++){
a[i] = makeFunc(i);
}
function makeFunc(index){
return function(){
console.log(index);
}
}
a[0](); //0
a[2](); //2
a[4](); //4
26. a = [];
for(var i = 0; i < 10; i++){
a[i] = function(index){
return function(){
console.log(index);
}
}(i);
}
a[0](); //0
a[2](); //2
a[4](); //4
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(); //10
obj.inc();
obj.print(); //11
console.log(obj.x); //11
29. var init = function(){
var x = 10;
this.print = function(){
console.log(x);
};
this.inc = function(){
x++;
}
};
var obj = new init();
obj.print(); //10
obj.inc();
obj.print(); //11
console.log(obj.x); //undefined
var obj2 = new init();
obj2.print(); //10
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/
• Felix's Node.js Style Guide
• http://popkirby.github.com/contents/nodeguide/style.html
• JavaScript? style guide
• https://developer.mozilla.org/ja/JavaScript_style_guide