Movatterモバイル変換

[0]ホーム
URL:

Uploaded byikdysfm
PDF, PPTX35,342 views

JavaScriptの落とし穴

社内勉強会用の発表資料

Embed presentation

Download as PDF, PPTX
2013/4/27 @ HC社内勉強会JavaScriptの落とし穴
今日話すこと普通のOOPL経験者から見たコアJSのハマりどころ→ 基礎的な話→ イディオムの理解
基礎編
JSのオブジェクトは連想配列みたいなもの1 // 空のオブジェクトを作成2 var dog = {};34 // プロパティをひとつ追加5 dog.name = "Pochi";67 // ブラケットでもアクセスできる8 dog['breed'] = "Shih Tzu";910 // 関数をひとつ追加 -> メソッド11 dog.getBreed = function () {12 return this.breed;13 }
JSのオブジェクトは連想配列みたいなもの1 // 同じものをオブジェクトリテラルで表記2 var dog = {3 name: "Pochi",4 breed: "Shih Tzu",5 getBreed: function () {6 return this.breed;7 }8 };
クラスっぽいものとコンストラクタ関数1 // Stringはコンストラクタなのか?2 var str1 = new String(123);3 console.log(str1); // "123"45 // 関数? それともキャスト???6 var str2 = String(456);7 console.log(str2); // "456"
クラスっぽいものとコンストラクタ関数1 // クラスっぽいものを作るコンストラクタ2 var Person = function (name) {3 this.name = name;4 this.say = function () {5 return "I am " + this.name;6 };7 };89 // new をつけて呼び出す10 var adam = new Person("Adam");11 console.log(adam.say()); //"I am Adam"1213 // new をつけずに呼び出す14 var eve = Person("Eve");15 console.log(eve); //undefined!オブジェクトthisname : Adamsay : {...}adam
クラスっぽいものとコンストラクタ関数1 // クラスっぽいものを作るコンストラクタ2 var Person = function (name) {3 this.name = name;4 this.say = function () {5 return "I am " + this.name;6 };7 };89 // new をつけて呼び出す10 var adam = new Person("Adam");11 console.log(adam.say()); //"I am Adam"1213 // new をつけずに呼び出す14 var eve = Person("Eve");15 console.log(eve); //undefined!オブジェクトthisname : Adamsay : {...}adam
クラスっぽいものとコンストラクタ関数1 // クラスっぽいものを作るコンストラクタ2 var Person = function (name) {3 this.name = name;4 this.say = function () {5 return "I am " + this.name;6 };7 };89 // new をつけて呼び出す10 var adam = new Person("Adam");11 console.log(adam.say()); //"I am Adam"1213 // new をつけずに呼び出す14 var eve = Person("Eve");15 console.log(eve); //undefined!オブジェクトthisname : Adamsay : {...}adam
クラスっぽいものとコンストラクタ関数1 // クラスっぽいものを作るコンストラクタ2 var Person = function (name) {3 this.name = name;4 this.say = function () {5 return "I am " + this.name;6 };7 };89 // new をつけて呼び出す10 var adam = new Person("Adam");11 console.log(adam.say()); //"I am Adam"1213 // new をつけずに呼び出す14 var eve = Person("Eve");15 console.log(eve); //undefined!オブジェクトthisname : Adamsay : {...}adam
クラスっぽいものとコンストラクタ関数1 // クラスっぽいものを作るコンストラクタ2 var Person = function (name) {3 this.name = name;4 this.say = function () {5 return "I am " + this.name;6 };7 };89 // new をつけて呼び出す10 var adam = new Person("Adam");11 console.log(adam.say()); //"I am Adam"1213 // new をつけずに呼び出す14 var eve = Person("Eve");15 console.log(eve); //undefined!オブジェクトthisname : Adamsay : {...}adam
クラスっぽいものとコンストラクタ関数1 // クラスっぽいものを作るコンストラクタ2 var Person = function (name) {3 this.name = name;4 this.say = function () {5 return "I am " + this.name;6 };7 };89 // new をつけて呼び出す10 var adam = new Person("Adam");11 console.log(adam.say()); //"I am Adam"1213 // new をつけずに呼び出す14 var eve = Person("Eve");15 console.log(eve); //undefined!オブジェクトthisname : Adamsay : {...}adam
クラスっぽいものとコンストラクタ関数1 // クラスっぽいものを作るコンストラクタ2 var Person = function (name) {3 this.name = name;4 this.say = function () {5 return "I am " + this.name;6 };7 };89 // new をつけて呼び出す10 var adam = new Person("Adam");11 console.log(adam.say()); //"I am Adam"1213 // new をつけずに呼び出す14 var eve = Person("Eve");15 console.log(eve); //undefined!オブジェクトthisname : Adamsay : {...}adam
関数のnew呼び出し明示的な指定呼び出しメソッド呼び出しそれ以外(グローバル)第一の鬼門、this
明示的な指定呼び出し1 var prop = "gProp";2 var obj = {prop : "rProp"};34 var func = function (str) {5 console.log(this.prop + "::" + str);6 };78 func("normal"); // gProp::normal9 func.call(obj, "call"); // rProp::call10 func.apply(obj, ["apply"]); // rProp::apply
メソッド呼び出し1 var prop = "gProp";2 var obj = {3 prop : "rProp",4 func : function (str) {5 console.log(this.prop + "::" + str);6 }7 };89 obj.func("dot"); // rProp::dot10 obj['func']("bracket"); // rProp::bracket1112 var func2 = obj.func;13 func2("func2"); // gProp::func2
第二の鬼門、暗黙の型変換1 '100' - 1; // 992 '100' - '1'; // 993 '100' + 1; // “1001”4 1 + '100'; // “1100”5 typeof +'100'; // “number”67 // null,undefined,0,-0,NaN,"" はfalse扱い8 var b = new Boolean(false);9 if (b) {/* 実行される */}1011 var n = new Number(0);12 if (n) {/* 実行される */}
第二の鬼門、暗黙の型変換1 function Person (name, age) {2 this.name = name || "Guest";3 this.age = age || 20;4 }56 // {name:"Guest", age:20}7 var p1 = new Person();89 // {name:"Baby", age:20} になってしまう10 var p2 = new Person("Baby", 0);
1 "Str" == "Str"; // true. ★型が同じ場合2 null == undefined; // true.3 10 == "1e+1"; // true. ★数値と文字列4 true == 1; // true. ★Booleanと数値。数値で比較される!5 true == 10; // false.6 false == 0; // true.7 true == "0x01"; // true. ★Booleanと文字列。数値比較8 false == "0e+0"; // true.9 100 == {}; // false. ★数値とオブジェクト。数値比較10 123 == { // true.valueOf:function(){return 123}};11 "Str" == {}; // false. ★文字列とオブジェクト12 "Str" == { // truetoString:function(){return "Str"}};13 {} == true; // false. ★その他 if ({}) {実行される}14 {} == false; // false.同値演算子 == と ===
問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?問題2:c1は、prototypeというプロパティを持つ。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?第三の鬼門、プロトタイプチェーン1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");というコードがあるとき、
問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?問題2:c1は、prototypeというプロパティを持つ。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?第三の鬼門、プロトタイプチェーン1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");というコードがあるとき、
問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?問題2:c1は、prototypeというプロパティを持つ。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?第三の鬼門、プロトタイプチェーン1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");というコードがあるとき、
問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?問題2:c1は、prototypeというプロパティを持つ。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?第三の鬼門、プロトタイプチェーン1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");というコードがあるとき、
問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?問題2:c1は、prototypeというプロパティを持つ。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?第三の鬼門、プロトタイプチェーン1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");というコードがあるとき、
問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?問題2:c1は、prototypeというプロパティを持つ。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?第三の鬼門、プロトタイプチェーン1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");というコードがあるとき、
FunctionChildprototype:Object無名constructor:Objectc1name: Cain1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");3 c1.constructor === Child; // true
FunctionChildprototype:Object無名constructor:Objectc1name: Cain1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");3 c1.constructor === Child; // true
FunctionChildprototype:Object無名constructor:Objectc1name: Cain1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");3 c1.constructor === Child; // true
FunctionChildprototype:Object無名constructor:Objectc1name: Cain1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");3 c1.constructor === Child; // true
1 var Child = function (name) {this.name = name;};2 var Parent = function (name) {this.name = name;};3 Child.prototype = new Parent("Adam");45 var c1 = new Child("Cain");6 Parent.prototype.getName = function () {return this.name;};7 c1.getName(); // “Cain”.ChildChildprotoParentParentprotoAdamCainメソッドgetNameObjectObjectprototoStringvalueOfetc...
1 var Child = function (name) {this.name = name;};2 var Parent = function (name) {this.name = name;};3 Child.prototype = new Parent("Adam");45 var c1 = new Child("Cain");6 Parent.prototype.getName = function () {return this.name;};7 c1.getName(); // “Cain”.ChildChildprotoParentParentprotoAdamCainメソッドgetNameObjectObjectprototoStringvalueOfetc...
1 var Child = function (name) {this.name = name;};2 var Parent = function (name) {this.name = name;};3 Child.prototype = new Parent("Adam");45 var c1 = new Child("Cain");6 Parent.prototype.getName = function () {return this.name;};7 c1.getName(); // “Cain”.ChildChildprotoParentParentprotoAdamCainメソッドgetNameObjectObjectprototoStringvalueOfetc...
1 var Child = function (name) {this.name = name;};2 var Parent = function (name) {this.name = name;};3 Child.prototype = new Parent("Adam");45 var c1 = new Child("Cain");6 Parent.prototype.getName = function () {return this.name;};7 c1.getName(); // “Cain”.ChildChildprotoParentParentprotoAdamCainメソッドgetNameObjectObjectprototoStringvalueOfetc...
1 var Child = function (name) {this.name = name;};2 var Parent = function (name) {this.name = name;};3 Child.prototype = new Parent("Adam");45 var c1 = new Child("Cain");6 Parent.prototype.getName = function () {return this.name;};7 c1.getName(); // “Cain”.ChildChildprotoParentParentprotoAdamCainメソッドgetNameObjectObjectprototoStringvalueOfetc...
1 var Child = function (name) {this.name = name;};2 var Parent = function (name) {this.name = name;};3 Child.prototype = new Parent("Adam");45 var c1 = new Child("Cain");6 Parent.prototype.getName = function () {return this.name;};7 c1.getName(); // “Cain”.ChildChildprotoParentParentprotoAdamCainメソッドgetNameObjectObjectprototoStringvalueOfetc...
1 var Child = function (name) {this.name = name;};2 var Parent = function (name) {this.name = name;};3 Child.prototype = new Parent("Adam");45 var c1 = new Child("Cain");6 Parent.prototype.getName = function () {return this.name;};7 c1.getName(); // “Cain”.ChildChildprotoParentParentprotoAdamCainメソッドgetNameObjectObjectprototoStringvalueOfetc...
1 var Child = function (name) {this.name = name;};2 var Parent = function (name) {this.name = name;};3 Child.prototype = new Parent("Adam");45 var c1 = new Child("Cain");6 Parent.prototype.getName = function () {return this.name;};7 c1.getName(); // “Cain”.ChildChildprotoParentParentprotoAdamCainメソッドgetNameObjectObjectprototoStringvalueOfetc...
1 var Child = function (name) {this.name = name;};2 var Parent = function (name) {this.name = name;};3 Child.prototype = new Parent("Adam");45 var c1 = new Child("Cain");6 Parent.prototype.getName = function () {return this.name;};7 c1.getName(); // “Cain”.ChildChildprotoParentParentprotoAdamCainメソッドgetNameObjectObjectprototoStringvalueOfetc...
1 var Child = function (name) {this.name = name;};2 var Parent = function (name) {this.name = name;};3 Child.prototype = new Parent("Adam");45 var c1 = new Child("Cain");6 Parent.prototype.getName = function () {return this.name;};7 c1.getName(); // “Cain”.ChildChildprotoParentParentprotoAdamCainメソッドgetNameObjectObjectprototoStringvalueOfetc...
メソッドはprototypeに1 // クラスっぽいものを作るコンストラクタ(修正前)2 var Person = function (name) {3 this.name = name;4 this.say = function () {5 return "I am " + this.name;6 };7 };89 // 修正後10 var Person2 = function (name) {11 this.name = name;12 };1314 Person2.prototype.say = function () {15 return "I am " + this.name;16 };
暗黙じゃない環境もある1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");34 c1.__proto__ === Child.prototype; // 環境依存でtrueFunctionChildprototype:Object無名constructor:Objectc1name: CainObjectc1__proto__:name: Cain
暗黙じゃない環境もある1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");34 c1.__proto__ === Child.prototype; // 環境依存でtrueFunctionChildprototype:Object無名constructor:Objectc1name: CainObjectc1__proto__:name: Cain
ChildAdamCainParentParentprotoあくまでオブジェクトのチェーンであるEveAbelSeth
ChildAdamCainParentParentprotoあくまでオブジェクトのチェーンであるEveAbelSeth
ChildAdamCainParentParentprotoあくまでオブジェクトのチェーンであるEveAbelSeth
ChildAdamCainParentParentprotoあくまでオブジェクトのチェーンであるEveAbelSeth
ChildAdamCainParentParentprotoあくまでオブジェクトのチェーンであるEveAbelSeth
×Childprototype無名constructorc1__proto__1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?○問題2:c1はprototypeというプロパティをもつか。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?(ただし環境に依る)無名constructorFunctionprototypecall()apply()etc...問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?
×Childprototype無名constructorc1__proto__1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?○問題2:c1はprototypeというプロパティをもつか。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?(ただし環境に依る)無名constructorFunctionprototypecall()apply()etc...問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?
×Childprototype無名constructorc1__proto__1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?○問題2:c1はprototypeというプロパティをもつか。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?(ただし環境に依る)無名constructorFunctionprototypecall()apply()etc...問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?
×Childprototype無名constructorc1__proto__1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?○問題2:c1はprototypeというプロパティをもつか。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?(ただし環境に依る)無名constructorFunctionprototypecall()apply()etc...問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?
×Childprototype無名constructorc1__proto__1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?○問題2:c1はprototypeというプロパティをもつか。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?(ただし環境に依る)無名constructorFunctionprototypecall()apply()etc...問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?
×Childprototype無名constructorc1__proto__1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?○問題2:c1はprototypeというプロパティをもつか。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?(ただし環境に依る)無名constructorFunctionprototypecall()apply()etc...問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?
×Childprototype無名constructorc1__proto__1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?○問題2:c1はprototypeというプロパティをもつか。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?(ただし環境に依る)無名constructorFunctionprototypecall()apply()etc...問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?
×Childprototype無名constructorc1__proto__1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?○問題2:c1はprototypeというプロパティをもつか。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?(ただし環境に依る)無名constructorFunctionprototypecall()apply()etc...問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?
×Childprototype無名constructorc1__proto__1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?○問題2:c1はprototypeというプロパティをもつか。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?(ただし環境に依る)無名constructorFunctionprototypecall()apply()etc...問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?
×Childprototype無名constructorc1__proto__1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?○問題2:c1はprototypeというプロパティをもつか。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?(ただし環境に依る)無名constructorFunctionprototypecall()apply()etc...問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?
×Childprototype無名constructorc1__proto__1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?○問題2:c1はprototypeというプロパティをもつか。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?(ただし環境に依る)無名constructorFunctionprototypecall()apply()etc...問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?
×Childprototype無名constructorc1__proto__1 var Child = function (name) {this.name = name;};2 var c1 = new Child("Cain");問題1:c1のプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?○問題2:c1はprototypeというプロパティをもつか。○か×か?問題3:Child.prototypeとc1.__proto__は同じオブジェクトを参照する。○か×か?(ただし環境に依る)無名constructorFunctionprototypecall()apply()etc...問題4:ChildのプロトタイプオブジェクトはChild.prototypeが参照するオブジェクトである。○か×か?
継承は手段のひとつコードの再利用こそが目的継承にはいくつも方法があるObject.create();委譲、ミックスイン
最後の鬼門、スコープチェーン
1 var temp1 = "grobal1";2 var temp2 = "grobal2"3 console.log(temp1); // "grobal1"4 console.log(temp2); // "grobal2"56 func();7 function func () {8 console.log(temp2); // "grobal2"9 var temp1 = "local";10 console.log(temp1); // "local"1112 if (true) {13 console.log(temp1); // "local"14 var temp1 = "if";15 console.log(temp1); // "if"16 }17 console.log(temp1); // "if"18 }1920 console.log(temp1); // "grobal1"
1 var temp1 = "grobal1";2 var temp2 = "grobal2"3 console.log(temp1); // "grobal1"4 console.log(temp2); // "grobal2"56 func();7 function func () {8 console.log(temp1); // undefined9 console.log(temp2); // "grobal2"10 var temp1 = "local";11 console.log(temp1); // "local"12 }1314 console.log(temp1); // "grobal1"15 console.log(temp2); // "grobal2"変数の巻き上げ
1 var func1 = function () {2 console.log(arg); // undefined3 var arg = "local";4 };56 var func2 = function () {7 var arg = undefined;8 console.log(arg); // undefined9 arg = "local";10 };変数の巻き上げ
1 func("one"); // "one"2 func(); // undefined3 func("one", "two", "three"); // "one"45 function func (arg1) {6 console.log(arg1);7 }もう少し詳しい理解
1 func("one"); // "one"2 func(); // undefined3 func("one", "two", "three"); // "one two three"45 function func (arg1) {6 console.log(arg1);78 for (i = 1; i < arguments.length; i++) {9 console.log(arguments[i]);10 }11 }もう少し詳しい理解
globalオブジェクトf : function{...}x : xxx1 var x = "xxx";2 f(100, 200, 300);34 function f(a1) {5 var y = "yyy";6 g(200);78 function g(a1) {9 console.log(z); // undefined10 console.log(y); // "yyy"11 console.log(x); // "xxx"12 var z = "zzz";13 }14 }CallオブジェクトfのCallオブジェクトarguments : [...]a1 : arguments[0]y : undefinedg : function{...}fのCallオブジェクトarguments : [...]a1 : arguments[0]y : yyyg : function{...}gのCallオブジェクトarguments : [...]a1 : arguments[0]z : undefined
globalオブジェクトf : function{...}x : xxx1 var x = "xxx";2 f(100, 200, 300);34 function f(a1) {5 var y = "yyy";6 g(200);78 function g(a1) {9 console.log(z); // undefined10 console.log(y); // "yyy"11 console.log(x); // "xxx"12 var z = "zzz";13 }14 }CallオブジェクトfのCallオブジェクトarguments : [...]a1 : arguments[0]y : undefinedg : function{...}fのCallオブジェクトarguments : [...]a1 : arguments[0]y : yyyg : function{...}gのCallオブジェクトarguments : [...]a1 : arguments[0]z : undefined
globalオブジェクトf : function{...}x : xxx1 var x = "xxx";2 f(100, 200, 300);34 function f(a1) {5 var y = "yyy";6 g(200);78 function g(a1) {9 console.log(z); // undefined10 console.log(y); // "yyy"11 console.log(x); // "xxx"12 var z = "zzz";13 }14 }CallオブジェクトfのCallオブジェクトarguments : [...]a1 : arguments[0]y : undefinedg : function{...}fのCallオブジェクトarguments : [...]a1 : arguments[0]y : yyyg : function{...}gのCallオブジェクトarguments : [...]a1 : arguments[0]z : undefined
globalオブジェクトf : function{...}x : xxx1 var x = "xxx";2 f(100, 200, 300);34 function f(a1) {5 var y = "yyy";6 g(200);78 function g(a1) {9 console.log(z); // undefined10 console.log(y); // "yyy"11 console.log(x); // "xxx"12 var z = "zzz";13 }14 }CallオブジェクトfのCallオブジェクトarguments : [...]a1 : arguments[0]y : undefinedg : function{...}fのCallオブジェクトarguments : [...]a1 : arguments[0]y : yyyg : function{...}gのCallオブジェクトarguments : [...]a1 : arguments[0]z : undefined
globalオブジェクトf : function{...}x : xxx1 var x = "xxx";2 f(100, 200, 300);34 function f(a1) {5 var y = "yyy";6 g(200);78 function g(a1) {9 console.log(z); // undefined10 console.log(y); // "yyy"11 console.log(x); // "xxx"12 var z = "zzz";13 }14 }CallオブジェクトfのCallオブジェクトarguments : [...]a1 : arguments[0]y : undefinedg : function{...}fのCallオブジェクトarguments : [...]a1 : arguments[0]y : yyyg : function{...}gのCallオブジェクトarguments : [...]a1 : arguments[0]z : undefined
globalオブジェクトf : function{...}x : xxx1 var x = "xxx";2 f(100, 200, 300);34 function f(a1) {5 var y = "yyy";6 g(200);78 function g(a1) {9 console.log(z); // undefined10 console.log(y); // "yyy"11 console.log(x); // "xxx"12 var z = "zzz";13 }14 }CallオブジェクトfのCallオブジェクトarguments : [...]a1 : arguments[0]y : undefinedg : function{...}fのCallオブジェクトarguments : [...]a1 : arguments[0]y : yyyg : function{...}gのCallオブジェクトarguments : [...]a1 : arguments[0]z : undefined
globalオブジェクトf : function{...}x : xxx1 var x = "xxx";2 f(100, 200, 300);34 function f(a1) {5 var y = "yyy";6 g(200);78 function g(a1) {9 console.log(z); // undefined10 console.log(y); // "yyy"11 console.log(x); // "xxx"12 var z = "zzz";13 }14 }CallオブジェクトfのCallオブジェクトarguments : [...]a1 : arguments[0]y : undefinedg : function{...}fのCallオブジェクトarguments : [...]a1 : arguments[0]y : yyyg : function{...}gのCallオブジェクトarguments : [...]a1 : arguments[0]z : undefined
レキシカル(字句的)スコープ1 var x = 100;2 var y = 200;34 f();56 function f () {7 var y = 20;8 g();9 }1011 function g () {12 var z = 3;13 console.log(x); // 10014 console.log(y); // ???15 console.log(z); // 316 }globalオブジェクトプロパティは省略fのCallオブジェクトプロパティは省略gのCallオブジェクトプロパティは省略関数fのスコープチェーン↓関数gのスコープチェーン↓
レキシカル(字句的)スコープ1 var x = 100;2 var y = 200;34 f();56 function f () {7 var y = 20;8 g();9 }1011 function g () {12 var z = 3;13 console.log(x); // 10014 console.log(y); // ???15 console.log(z); // 316 }globalオブジェクトプロパティは省略fのCallオブジェクトプロパティは省略gのCallオブジェクトプロパティは省略関数fのスコープチェーン↓関数gのスコープチェーン↓
レキシカル(字句的)スコープ1 var x = 100;2 var y = 200;34 f();56 function f () {7 var y = 20;8 g();9 }1011 function g () {12 var z = 3;13 console.log(x); // 10014 console.log(y); // ???15 console.log(z); // 316 }globalオブジェクトプロパティは省略fのCallオブジェクトプロパティは省略gのCallオブジェクトプロパティは省略関数fのスコープチェーン↓関数gのスコープチェーン↓
レキシカル(字句的)スコープ1 var x = 100;2 var y = 200;34 f();56 function f () {7 var y = 20;8 g();9 }1011 function g () {12 var z = 3;13 console.log(x); // 10014 console.log(y); // ???15 console.log(z); // 316 }globalオブジェクトプロパティは省略fのCallオブジェクトプロパティは省略gのCallオブジェクトプロパティは省略関数fのスコープチェーン↓関数gのスコープチェーン↓
スコープチェーンまとめスコープは2種類存在する→ letってのもあるけど割愛変数の巻き上げに注意する関数呼び出しでCallオブジェクトが生成される関数のスコープチェーンは関数の定義位置で決まる
ちょっとだけイディオム編
JSには以下の機能を実装するための構文がない名前空間モジュール、パッケージアクセス修飾子(private)
即時関数パターン1 (function () {23 var days = ['日','月','火','水','木','金','土'];4 var day = new Date();5 console.log(days[day.getDay()] + ',' + day.getDate());67 })(); // "土,27"1 var func = function () { // 関数の宣言2 /* 関数の中身 */3 };45 func(); // 関数の実行
クロージャクロージャ（クロージャー、closure、閉包）はプログラミング言語における関数オブジェクトの一種。いくつかの言語ではラムダ式 (Lambda Expression) や無名関数 (Anonymous function) で実現している。引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決することを特徴とする。関数とそれを評価する環境のペアであるともいえる。
クロージャクロージャ（クロージャー、closure、閉包）はプログラミング言語における関数オブジェクトの一種。いくつかの言語ではラムダ式 (Lambda Expression) や無名関数 (Anonymous function) で実現している。引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決することを特徴とする。関数とそれを評価する環境のペアであるともいえる。
1 var makeFunc = function (base) {2 var step = 10;3 var count = 0;45 return function (arg) {6 var result7 = base + step * count + arg;8 count++;9 return result;10 }11 }1213 var c1 = makeFunc(500);14 console.log(c1(3)); // 50315 console.log(c1(6)); // 51616 console.log(c1(9)); // 529globalオブジェクトプロパティは省略makeFuncのCObase : 500step : 10count : 0c1のCOまだ生成されてない!c1のCO 一回目arg : 3makeFuncのCObase : 500step : 10count : 1c1のCO 二回目arg : 6
1 var makeFunc = function (base) {2 var step = 10;3 var count = 0;45 return function (arg) {6 var result7 = base + step * count + arg;8 count++;9 return result;10 }11 }1213 var c1 = makeFunc(500);14 console.log(c1(3)); // 50315 console.log(c1(6)); // 51616 console.log(c1(9)); // 529globalオブジェクトプロパティは省略makeFuncのCObase : 500step : 10count : 0c1のCOまだ生成されてない!c1のCO 一回目arg : 3makeFuncのCObase : 500step : 10count : 1c1のCO 二回目arg : 6
1 var makeFunc = function (base) {2 var step = 10;3 var count = 0;45 return function (arg) {6 var result7 = base + step * count + arg;8 count++;9 return result;10 }11 }1213 var c1 = makeFunc(500);14 console.log(c1(3)); // 50315 console.log(c1(6)); // 51616 console.log(c1(9)); // 529globalオブジェクトプロパティは省略makeFuncのCObase : 500step : 10count : 0c1のCOまだ生成されてない!c1のCO 一回目arg : 3makeFuncのCObase : 500step : 10count : 1c1のCO 二回目arg : 6
1 var makeFunc = function (base) {2 var step = 10;3 var count = 0;45 return function (arg) {6 var result7 = base + step * count + arg;8 count++;9 return result;10 }11 }1213 var c1 = makeFunc(500);14 console.log(c1(3)); // 50315 console.log(c1(6)); // 51616 console.log(c1(9)); // 529globalオブジェクトプロパティは省略makeFuncのCObase : 500step : 10count : 0c1のCOまだ生成されてない!c1のCO 一回目arg : 3makeFuncのCObase : 500step : 10count : 1c1のCO 二回目arg : 6
1 var makeFunc = function (base) {2 var step = 10;3 var count = 0;45 return function (arg) {6 var result7 = base + step * count + arg;8 count++;9 return result;10 }11 }1213 var c1 = makeFunc(500);14 console.log(c1(3)); // 50315 console.log(c1(6)); // 51616 console.log(c1(9)); // 529globalオブジェクトプロパティは省略makeFuncのCObase : 500step : 10count : 0c1のCOまだ生成されてない!c1のCO 一回目arg : 3makeFuncのCObase : 500step : 10count : 1c1のCO 二回目arg : 6
1 var makeFunc = function (base) {2 var step = 10;3 var count = 0;45 return function (arg) {6 var result7 = base + step * count + arg;8 count++;9 return result;10 }11 }1213 var c1 = makeFunc(500);14 console.log(c1(3)); // 50315 console.log(c1(6)); // 51616 console.log(c1(9)); // 529globalオブジェクトプロパティは省略makeFuncのCObase : 500step : 10count : 0c1のCOまだ生成されてない!c1のCO 一回目arg : 3makeFuncのCObase : 500step : 10count : 1c1のCO 二回目arg : 6
privateの実現1 function Animal(arg) {2 // 以下、プライベート3 var name = arg;45 // 以下、パブリック6 this.getName = function () {7 return name;8 };9 }1011 var dog = new Animal("dog");1213 console.log(dog.name); // undefined14 console.log(dog.getName()); // "dog"
Callオブジェクトが分かれば大体のイディオムは分かる即時関数パターン→ 一時的な変数をCallオブジェクトに閉じ込めるクロージャ→ 関数定義時の環境(状態)をSCに閉じ込めるprivateメンバ→ 隠蔽したい変数をCallオブジェクトに閉じ込める
名前空間、モジュール等は以下の書籍で
おまけ
その他、良さげな理由静的型付け + 型推論ECMAScript6準拠IDEとの連携開発が活発
というわけで、TypeScriptやろうぜ!
ご清聴ありがとうございました

Recommended

PDF
TROMPETISTAS Metodo maggio
PDF
Rebelion trombon 2
PDF
మీకా గ్రంథ ధ్యానములు
PDF
యోహాను వ్రాసిన మూడవ పత్రిక (3 john _three persons.pdf)
PDF
პოეტისა და პოეზიის დანიშნულების საკითხი ილიასთან,აკაკისთან და ვაჟასთან
DOCX
თემატური გეგმა მე-5 კლ.
PPTX
გამოკლება ათეულის დაშლით
DOCX
ეკა ლ.
PDF
Gitはじめの一歩
PPTX
C#や.NET Frameworkがやっていること
PDF
Chrome Developer Toolsを使いこなそう！
PDF
GitHub入門　手順編
PPTX
非同期処理の基礎
PDF
数式を綺麗にプログラミングするコツ #spro2013
PDF
ソフトウェア設計のすすめ
PDF
データベース技術の羅針盤
PDF
pythonでオフィス快適化計画
PPTX
論文に関する基礎知識2016
PDF
査読の仕組みと論文投稿上の対策
PDF
5分で分かるgitのrefspec
PDF
機械学習によるデータ分析 実践編
PDF
Xcodeを便利に使って爆速開発する #yxcm
PPTX
Jenkins+Gitによる検証済みマージ(30分版)
PDF
やはりお前らのiOS7対応は間違っている
PDF
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
PDF
はやわかりHTML5ハイブリッドアプリ開発事情
 
PDF
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
 
PDF
iOS アプリのメンテナンス性を高めるための基本的な考え方
PDF
最強オブジェクト指向言語 JavaScript 再入門！
PDF
ちょっと詳しくJavaScript 第3回【prototype】

More Related Content

PDF
TROMPETISTAS Metodo maggio
PDF
Rebelion trombon 2
PDF
మీకా గ్రంథ ధ్యానములు
PDF
యోహాను వ్రాసిన మూడవ పత్రిక (3 john _three persons.pdf)
PDF
პოეტისა და პოეზიის დანიშნულების საკითხი ილიასთან,აკაკისთან და ვაჟასთან
DOCX
თემატური გეგმა მე-5 კლ.
PPTX
გამოკლება ათეულის დაშლით
DOCX
ეკა ლ.
TROMPETISTAS Metodo maggio
Rebelion trombon 2
మీకా గ్రంథ ధ్యానములు
యోహాను వ్రాసిన మూడవ పత్రిక (3 john _three persons.pdf)
პოეტისა და პოეზიის დანიშნულების საკითხი ილიასთან,აკაკისთან და ვაჟასთან
თემატური გეგმა მე-5 კლ.
გამოკლება ათეულის დაშლით
ეკა ლ.

Viewers also liked

PDF
Gitはじめの一歩
PPTX
C#や.NET Frameworkがやっていること
PDF
Chrome Developer Toolsを使いこなそう！
PDF
GitHub入門　手順編
PPTX
非同期処理の基礎
PDF
数式を綺麗にプログラミングするコツ #spro2013
PDF
ソフトウェア設計のすすめ
PDF
データベース技術の羅針盤
PDF
pythonでオフィス快適化計画
PPTX
論文に関する基礎知識2016
PDF
査読の仕組みと論文投稿上の対策
PDF
5分で分かるgitのrefspec
PDF
機械学習によるデータ分析 実践編
PDF
Xcodeを便利に使って爆速開発する #yxcm
PPTX
Jenkins+Gitによる検証済みマージ(30分版)
PDF
やはりお前らのiOS7対応は間違っている
PDF
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
PDF
はやわかりHTML5ハイブリッドアプリ開発事情
 
PDF
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
 
PDF
iOS アプリのメンテナンス性を高めるための基本的な考え方
Gitはじめの一歩
C#や.NET Frameworkがやっていること
Chrome Developer Toolsを使いこなそう！
GitHub入門　手順編
非同期処理の基礎
数式を綺麗にプログラミングするコツ #spro2013
ソフトウェア設計のすすめ
データベース技術の羅針盤
pythonでオフィス快適化計画
論文に関する基礎知識2016
査読の仕組みと論文投稿上の対策
5分で分かるgitのrefspec
機械学習によるデータ分析 実践編
Xcodeを便利に使って爆速開発する #yxcm
Jenkins+Gitによる検証済みマージ(30分版)
やはりお前らのiOS7対応は間違っている
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
はやわかりHTML5ハイブリッドアプリ開発事情
 
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
 
iOS アプリのメンテナンス性を高めるための基本的な考え方

Similar to JavaScriptの落とし穴

PDF
最強オブジェクト指向言語 JavaScript 再入門！
PDF
ちょっと詳しくJavaScript 第3回【prototype】
PPT
[A 3]SSJSでも使える！Javascriptでオブジェクト指向プログラミング入門
PDF
JavaScript入門
PDF
これからのJavaScriptー関数型プログラミングとECMAScript6
PDF
Effective JavaScript Ch.1
PDF
Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで
PDF
ちょっと詳しくJavaScript 特別編【悪霊の神々】
PDF
Web技術勉強会 20110723
PDF
JavaScript/CSS 2015 Autumn
PPTX
大人のお型付け
PDF
JSクラス定義
PDF
Kanazawa.js.Next
PDF
traceur-compilerで ECMAScript6を体験
PDF
JavaScriptおよびXPages Vote技術解説
PDF
TypeScript と Visual Studio Code
PPTX
Javascriptのデザインパターン【勉強会資料】
PDF
Javascripでオブジェクト指向
PDF
ECMAScript 6 Features（PDF 版）
 
PDF
Web技術勉強会 20110514
最強オブジェクト指向言語 JavaScript 再入門！
ちょっと詳しくJavaScript 第3回【prototype】
[A 3]SSJSでも使える！Javascriptでオブジェクト指向プログラミング入門
JavaScript入門
これからのJavaScriptー関数型プログラミングとECMAScript6
Effective JavaScript Ch.1
Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで
ちょっと詳しくJavaScript 特別編【悪霊の神々】
Web技術勉強会 20110723
JavaScript/CSS 2015 Autumn
大人のお型付け
JSクラス定義
Kanazawa.js.Next
traceur-compilerで ECMAScript6を体験
JavaScriptおよびXPages Vote技術解説
TypeScript と Visual Studio Code
Javascriptのデザインパターン【勉強会資料】
Javascripでオブジェクト指向
ECMAScript 6 Features（PDF 版）
 
Web技術勉強会 20110514

Recently uploaded

PDF
ふみこんで学ぶ世界遺産700＜第2版＞世界遺産検定準1級公式テキスト（2026年発売）
PDF
横浜国立大学3年生に向けて研究室を紹介する資料【2026年度研究室配属について】
PDF
プログラミング講座 【小学校高学年向け】Revision 6 2025/11/30
PDF
横浜国立大学3年生に向けて研究室を紹介するスライド【2026年度研究室配属について】
PPTX
Introduction to Japanese Language Learning.pptx
PDF
高等専門学校卒業資格における準学士学位 (Associate Degre) の制度的展望 —国際的学位制度との比較から—
ふみこんで学ぶ世界遺産700＜第2版＞世界遺産検定準1級公式テキスト（2026年発売）
横浜国立大学3年生に向けて研究室を紹介する資料【2026年度研究室配属について】
プログラミング講座 【小学校高学年向け】Revision 6 2025/11/30
横浜国立大学3年生に向けて研究室を紹介するスライド【2026年度研究室配属について】
Introduction to Japanese Language Learning.pptx
高等専門学校卒業資格における準学士学位 (Associate Degre) の制度的展望 —国際的学位制度との比較から—

JavaScriptの落とし穴

[8]ページ先頭
©2009-2025 Movatter.jp