- PDF Free Download

Size: px

Start display at page:

Download ""

やすもりこいたばし
6 years ago
Views:

3 ios 4% Android 10% Python 1% Design 15% Web(PHP/JS) 10% Windows(C#) 20% 40%

4 最近のボクお嫁 Web/WordPress Windows Android Design Python Python Android 1% 5% Design Windows 5% 15% お嫁 50% Web/WordPress 25% 2013年6月1日株式会社フォーエンキー調べ愛恐

6 Simple and Powerfull

7 var obj = {}

8 var obj = { } key: value

9 var f = function() {...}

10 var obj = { } key: function() {...}

11 var obj = { } key: function() {...}

14 ( _ )

16 ( _ )

34 クラス Class (型) new new new クラスという型を元にしてオブジェクトを生成するイメージクラスから生成されたオブジェクトはクラスの特性属性や機能を受け継ぐ Object 実体 Object 実体 Object 実体

37 Object (実体) prototype dele gate dele gate dele gate プロトタイプオブジェクトは自分自身が備えていない特性機能や属性を別のオブジェクトにお願い委譲するイメージこの時お願いする先をプロトタイプと言ったりします Object 実体 Object 実体 Object 実体

40 var obja = { name : 'Yome', say : function () { alert('i Love ' + this.name); } }; var objb = { name : 'Nikole' }; objb. proto = obja; var objc = { }; objc. proto = objb; objc.say(); I Love Nicole

41 var obja = { name : 'Yome', say : function () { alert('i Love ' + this.name); } }; var objb = { name : 'Nikole' }; objb. proto = obja; var objc = { }; objc. proto = objb; objc.say();

43 objc.say objc. proto.say (objb) objc. proto. proto.say (objb) (obja)

44 objc.name objc. proto.name (objb) objc. proto. proto.say (objb) (obja)

45 obj. proto. proto.property このように自分に無い機能や属性を proto に入っている別のオブジェクトから連鎖的に検索して探す仕組みが

46 obj. proto. proto.property

48 var obja = { name : 'Yome', say : function () { alert('i Love ' + this.name); } }; var objb = { name : 'Nikole' }; objb. proto = obja; var objc = { name : 'Gyu-Ri' }; objc. proto = obja; objb.say(); // I Love Nikole objc.say(); // I Love Gyu-Ri

50 class A extends class B extends class C new obj A of B obj A (delegete) obj B (delegete) obj C (delegete) obj D new new obj B of C obj C of C (delegete) obj F (delegete) obj E

59 あまり見たコトない obj. proto = otherobj 実は proto は標準仕様ではありませんつまり proto が利用できない環境もありだから通常このようなことはしませんここまではプロトタイプチェインの概念を分かり易くするために proto を使って説明していましたがそういうことなので実際のプログラミングではこんなことしないでくださいねー ( )/ では逆に良く見かけるのは

60 こっちのがよく見る感じ var o = new Person('Nicole') これは new 演算子とコンストラクタ関数によるオブジェクトの生成です JavaScript におけるオブジェクトの生成でよく見られるコードですこのあたりの記法がクラスベースの言語を学んだ方を惑わしますね

62 var Person = function (name) { this.name = name; } Person.prototype.sayHello = function() { alert('hello ' + this.name); } var person = new Person('Nicole');

63 var Person = function (name) { } this.name = name; Person.prototype.sayHello = function() { } alert('hello ' + this.name); var person = new Person('Nicole');

64 var Person = function (name) { } this.name = name; Person.prototype.sayHello = function() { } alert('hello ' + this.name); var person = new Person('Nicole');

69 var o = new Person('Nicole')

70 var newobj = {}; newobj. proto = Person.prototype; Person.apply(newObj, arguments); return newobj;

71 だいたいこんな意味 var newobj = {}; newobj. proto = Person.prototype; ①新しい Object が生成される Person.apply(newObj, arguments); return newobj; new する度に新しい個別のオブジェクトが生成されます

72 だいたいこんな意味 var newobj = {}; newobj. proto = Person.prototype; Person.apply(newObj, arguments); return newobj; ②プロトタイプのオブジェクトの参照を代入コンストラクタ関数の Person.prototype を新しいオブジェクトの proto に参照を代入しプロトタイプチェインの仕組みでその特性を継承します

73 だいたいこんな意味 var newobj = {}; ③ newobj を this にコンストラクタ関数を実行 newobj. proto = Person.prototype; Person.apply(newObj, arguments); return newobj; これによってコンストラクタ関数の中で生成される新しいオブジェクトを this として参照しその属性をセットしたりできるようになります

74 だいたいこんな意味 var newobj = {}; newobj. proto = Person.prototype; ④完成したオブジェクトを返す Person.apply(newObj, arguments); return newobj; Person.prototype の特性を継承しコンストラクタ関数によって初期化済みの新しいオブジェクトが返されプログラムで利用できるようになります

75 newobj. proto = Person.prototype;

76 整理すると proto プロトタイプチェインで検索されるプロトタイプオブジェクトが入ってるプロトタイプチェインで使われるもの prototype プロトタイプオブジェクトの控え室 new とコンストラクタ関数でオブジェクトを生成する時に proto に代入されるオブジェクト生成で使われるもの

78 (function() { var Person = function (name){ this.name = name; }; Person.prototype.name = 'nanashi'; Person.prototype.say = function () { alert('i Love ' + this.name); }; var p = new Person('Nicole'); alert( p. proto === Person.prototype ); // true p.say(); // I Love Nicole p.name = 'Gyu-Ri'; p.say(); // I Love Gyu-Ri Person.prototype.name = 'Ha-Ra'; p.say(); // I Love Gyu-Ri delete p.name; p.say(); // I Love Ha-Ra })();

79 (function() { var Person = function (name){ this.name = name; }; Person.prototype.name = 'nanashi'; Person.prototype.say = function () { alert('i Love ' + this.name); }; Person: { prototype: { name:'nanashi' say: functon () { } } } var p = new Person('Nicole'); alert( p. proto === Person.prototype ); p.say(); })(); p.name = 'Gyu-Ri'; p.say(); Person.prototype.name = 'Ha-Ra'; p.say(); delete p.name; p.say();

80 (function() { var Person = function (name){ this.name = name; }; Person.prototype.name = 'nanashi'; Person.prototype.say = function () { alert('i Love ' + this.name); }; Person: { prototype: { name:'nanashi' say: functon () { } } } var p = new Person('Nicole'); alert( p. proto === Person.prototype ); p.say(); p.name = 'Gyu-Ri'; p.say(); var newobj = {}; newobj. proto = Person.prototype.name = 'Ha-Ra'; p.say(); delete p.name; p.say(); Person.apply(newObj, ['Nicole']) return newobj; })();

81 (function() { var Person = function (name){ this.name = name; }; Person.prototype.name = 'nanashi'; Person.prototype.say = function () { alert('i Love ' + this.name); }; Person: { prototype: { name:'nanashi' say: functon () { } } } var p = new Person('Nicole'); alert( p. proto === Person.prototype ); p.say(); p.name = 'Gyu-Ri'; p.say(); Person.prototype.name = 'Ha-Ra'; p.say(); delete p.name; p.say(); p: { name:'nicole' proto : } })();

82 (function() { var Person = function (name){ this.name = name; }; Person.prototype.name = 'nanashi'; Person.prototype.say = function () { alert('i Love ' + this.name); }; Person: { prototype: { name:'nanashi' say: functon () { } } } var p = new Person('Nicole'); alert( p. proto === Person.prototype ); p.say(); p.name = 'Gyu-Ri'; p.say(); Person.prototype.name = 'Ha-Ra'; p.say(); delete p.name; p.say(); p: { name:'nicole' proto : } })();

83 (function() { var Person = function (name){ this.name = name; }; Person.prototype.name = 'nanashi'; Person.prototype.say = function () { alert('i Love ' + this.name); }; Person: { prototype: { name:'nanashi' say: functon () { } } } var p = new Person('Nicole'); alert( p. proto === Person.prototype ); p.say(); p.name = 'Gyu-Ri'; p.say(); Person.prototype.name = 'Ha-Ra'; p.say(); delete p.name; p.say(); p: { name:'nicole' proto : } })();

84 (function() { var Person = function (name){ this.name = name; }; Person.prototype.name = 'nanashi'; Person.prototype.say = function () { alert('i Love ' + this.name); }; Person: { prototype: { name:'nanashi' say: functon () { } } } var p = new Person('Nicole'); alert( p. proto === Person.prototype ); p.say(); p.name = 'Gyu-Ri'; p.say(); Person.prototype.name = 'Ha-Ra'; p.say(); delete p.name; p.say(); p: { name:'gyu-ri' proto : } })();

85 (function() { var Person = function (name){ this.name = name; }; Person.prototype.name = 'nanashi'; Person.prototype.say = function () { alert('i Love ' + this.name); }; Person: { prototype: { name:'ha-ra' say: functon () { } } } var p = new Person('Nicole'); alert( p. proto === Person.prototype ); p.say(); p.name = 'Gyu-Ri'; p.say(); Person.prototype.name = 'Ha-Ra'; p.say(); delete p.name; p.say(); p: { name:'gyu-ri' proto : } })();

86 (function() { var Person = function (name){ this.name = name; }; Person.prototype.name = 'nanashi'; Person.prototype.say = function () { alert('i Love ' + this.name); }; Person: { prototype: { name:'ha-ra' say: functon () { } } } var p = new Person('Nicole'); alert( p. proto === Person.prototype ); p.say(); p.name = 'Gyu-Ri'; p.say(); Person.prototype.name = 'Ha-Ra'; p.say(); delete p.name; p.say(); p: { name:'gyu-ri' proto : } })();

95 function myfunc() { } var name = 'Gyu-Ri'; myfunc(); alert(name); //ReferenceError

97 var a = 123; function func1() { var b = 3; function func2() { var c = 2; alert(a * b * c); //738 } } func2(); func1();

100 var name = 'Nicole'; function myfunc() { var name = 'Gyu-Ri'; } myfunc(); alert(name); //Nicole

101 var name = 'Nicole'; function myfunc() { name = 'Gyu-Ri'; } myfunc(); alert(name); //???

102 var name = 'Nicole'; function myfunc() { } name = 'Gyu-Ri'; myfunc(); alert(name); //Gyu-Ri

103

104 var name = 'Nicole'; function myfunc() { Before var name = 'Gyu-Ri'; }

105 var name = 'Nicole'; function myfunc() { After name = 'Gyu-Ri'; }

106 var name = 'Nicole'; function myfunc() { var name = 'Gyu-Ri'; var }

107

108 var a = 123

109

110 var a = 123; function func1() { var b = 3; function func2() { var c = 2; alert(a * b * c); } } func2(); func1(); //738

111 var a = 123; function func1() { var b = 3; function func2() { var c = 2; alert(a * b * c); } } func2(); func1(); //738

112 var a = 123; function func1() { var b = 3; function func2() { var c = 2; alert(a * b * c); } } func2(); func1(); //738

113 var a = 123; function func1() { var b = 3; function func2() { var c = 2; alert(a * b * c); } } func2(); func1(); //738

114

115

116 scope.a (func2) scope. scope.a (func2) (func1) scope. scope. scope.a (func2) (func1) (global)

117

118 scope. scope. scope.identifier このように今のスコープに無い識別子をより外側のスコープから連鎖的に検索して探す仕組みが

119 scope. scope. scope.identifier

120

121 余談ですが実はJavaScriptでは変数のスコープでさえも内部的にはオブジェクトで構成されています変数オブジェクトつまりつまるところスコープチェインもプロトタイプチェインもオブジェクトの特殊なプロパティによる連結リストによるデータ構造とそれを終端に向かって連鎖的に検索するというよく似たシンプルな仕組みに過ぎませんまたこれは JavaScriptにおけるスコープの実体がグローバルスコープグローバル変数オブジェクトをrootとする変数オブジェクトが連なった巨大なオブジェクトのツリー構造だということでもあります興味深いですね残念ながらそれらのスコープを構成するオブジェクトのツリーをプログラマが直接参照することは出来ませんしかしプロトタイプチェインを構成する proto 属性については ECMA Script標準では無いものの幾つかのブラウザ実装では実際に目にしてその仕組みを確認することが出来ますこれを良く観察することでスコープチェインとプロトタイプチェイン両方の理解を深めることが出来るはずです

122

123

124

125 var a = 123; function func1() { var b = 3; function func2() { var c = 2; alert(a * b * c); } ( ) } func2(); func1(); //738

126

127

128

129 var a = 123; function func1() { var b = 3; function func2() { var c = 2; alert(a * b * c); } } func2(); func1(); //738

130 var a = 123; function func1() { var b = 3; function func2() { var c = 2; alert(a * b * c); } } func2(); func1(); //738

131 var a = 123; function func1() { var b = 3; function func2() { var c = 2; alert(a * b * c); } } func2(); func1(); //738

132

133

134

135 var Person = (function($) { var privatevalue = 'Hogeta'; function Person(name) {... } Person.prototype.xxxx =... return Person; })(jquery);

136

137 function newcounter() { } var i = 0; return function() { } i = i + 1; return i; var c1 = newcounter(); alert(c1()); // 1 alert(c1()); // 2 alert(c1()); // 3

138

139

140

141

142

143

144

145 var Person = function (name) { this.name = name; } Person.prototype.sayHello = function() { alert('hello ' + this.name); } var person = new Person('Nicole'); var btn = $('button#say-hello'); btn.on('click', function() { person.sayhello(); });

146 var Person = function (name) { this.name = name; } Person.prototype.sayHello = function() { alert('hello ' + this.name); } var person = new Person('Nicole'); var btn = $('button'); btn.on('click', person.sayhello);

147

148

149 var obj = { } key: function() {...}

150

151 person sayhello btn.on('click', person.sayhello);

152 sayhello btn.on('click', person.sayhello);

153

154

155 person.sayhello();

156

157 ...nothing... sayhello();

158 function sayhello() { alert('hello ' + this.name); } sayhello(); global object = window 関数のコール時にレシーバーが無い時 this はグローバルオブジェクトになりますブラウザ実装の場合これは通常 window オブジェクトです

159

160

161

162

163

164

165 call apply bind

166 call(object, arg1, arg2,...) apply(object, Array) bind(object, arg1, arg2,...)

167

168 call apply

169 call の例 function say(arg1, arg2) { alert(arg1 + this.name + arg2); } var person = new Person('Nicole'); say.call(person, 'Hello ', ' chan'); person を this として実行 call の第１引数が this に第２引数以降の引数が say関数の引数に

170 apply の例 function say(arg1, arg2) { alert(arg1 + this.name + arg2); } var person = new Person('Nicole'); say.apply(person, ['Hello ', ' chan']); person を this として実行 call の第１引数が this に第２引数の配列の内容が say関数の引数になる引数の渡し方以外は call と同じ

171 var p1 = { name: 'Gyu-Ri', say: function (arg1, arg2) { alert(arg1 + this.name + arg2); } }; var person = new Person('Nicole'); p1.say.call(person, 'Hello ', ' chan');

172 var p1 = { name: 'Gyu-Ri', say: function (arg1, arg2) { alert(arg1 + this.name + arg2); } }; var person = new Person('Nicole'); p1.say.call(person, 'Hello ', ' chan');

173 bind

174 function say(arg1, arg2) { alert(arg1 + this.name + arg2); } var person = new Person('Nicole'); var say2 = say.bind(person); say2('hello ', ' chan');

175 bind

176 var Person = function (name) { this.name = name; } Person.prototype.sayHello = function() { alert('hello ' + this.name); } var person = new Person('Nicole'); var btn = $('button'); btn.on('click', person.sayhello);

177 var Person = function (name) { this.name = name; } Person.prototype.sayHello = function() { alert('hello ' + this.name); } var person = new Person('Nicole'); var btn = $('button'); btn.on('click', person.sayhello.bind(person));

178 apply

179 // this function bind (self, func) { return function () { return func.apply(self, arguments); }; } // function Person (name) { this.name = name; this.say = bind(this, this.say); } Person.prototype.say = function (prefix) { alert(prefix + this.name); } // var person = new Person('Nicole'); // nicole.say('i Love '); // I Love Nicole // OK settimeout(person.say.bind(null, 'I Just Realy Love to '), 2000);

180

181

182

183

184

185

186

187

188

189

190

191 var obj = {}

192

193 @yuka2py

194

Microsoft PowerPoint - JavaScript.pptx

Microsoft PowerPoint - JavaScript.pptx Ajax や来るべき HTML5 時代に向けて大規模な JavaScript 開発にも耐えられる基礎をおさえる JavaScript をなんらか入門したことのある方を対象山田祥寛 yoshihiro@wings.msn.to http://www.wings.msn.to/ 汎用的なコア JavaScript の理解を深めることが目的ブラウザオブジェクト Ajax などは扱いませんなるべく考え方を中心に説明するので