More Related Content Similar to みゆっき☆Think#7 「本気で学ぶJavascript」 Similar to みゆっき☆Think#7 「本気で学ぶJavascript」 (20) More from techtalkdwango (18) みゆっき☆Think#7 「本気で学ぶJavascript」5. • (id: tlync)
•
•
• … 3
8. “JavaScript is the only language that
people think they can program without
actually learning it.”
- Douglas Crockford
23. 1. Object
Object
Object
2. Function
Function 2
- prototype __proto__
24. 1. Object
Object
Object
2. Function
Function 2
- prototype __proto__
3. Closure
-
27. •
…
… Mozilla
•
… DOM Ajax
… IE (ry
28. •
…
… Mozilla
•
… DOM Ajax
… IE (ry
• ECMA Script 5
…
…
29. Agenda
•5 JavaScript
•Object JavaScript
•Function 2
•Closure
•
43. Scheme …
http://brendaneich.com/tag/history/
44. !? !
※SICP
http://brendaneich.com/tag/history/
46. Java
http://brendaneich.com/tag/history/
47. !? Scheme …?
※SICP
http://brendaneich.com/tag/history/
48. • …
•Java ……
•Gabage Collection !? ………
49. Scheme Self Java
( ) (Prototype OOP) ( )
JavaScript
51. “
Global Object
…”
http://brendaneich.com/tag/history/
73. ES 3
※
•
• String
• try/catch
•
79. ES 5
※
• ES 3.1
•
• strict
• JSON
•
http://kangax.github.com/es5-compat-table/
80. ES Harmony
• Class ES 4 ?
•2 ?
• wiki
http://wiki.ecmascript.org/doku.php?id=harmony:harmony
85. Object
Object
Object
string Function
null
number Array
undefined
boolean String
Number
※ Boolean
RegExp
Date
etc...
95. • Object {} new Object()
{} new Object()
Java
• Object
Object
98. (__proto__)
miyukki Object.prototype
name miyukki toString
age 18 …
__proto__ __proto__
99. (__proto__)
miyukki Object.prototype
name miyukki toString
age 18 …
__proto__ __proto__
※ __proto__
IE
ES 5
102. Object
• Object
null, undefined Object
Object
103. Object
• Object
null, undefined Object
Object
• Object (= )
( ) ( )
104. Object
• Object
null, undefined Object
Object
• Object (= )
( ) ( )
• Object (__proto__)
OK
115. Object
typeof Object => 'function'
typeof Function => 'function'
typeof Array => 'function'
typeof String => 'function'
typeof Number => 'function'
typeof Boolean => 'function'
typeof RegExp => 'function'
typeof Date => 'function'
...
116. Object
Object instanceof Function=> true
Function instanceof Function => true
Array instanceof Function => true
String instanceof Function => true
Number instanceof Function => true
Boolean instanceof Function => true
RegExp instanceof Function => true
Date instanceof Function => true
...
124. 1. Object
2. [[Class]]
3. prototype Object
__proto__
4. Object this
5. Object
126. var miyukki = new Person('miyukki');
miyukki.toString(); // Object.prototype
Person Function Object
__proto__ Function.prototype __proto__ Object.prototype __proto__
sayHello <function> … <function> … <function>
__proto__
130. Function
• Function new
- prototype
(__proto__)
- Prototype Chain
• 2
- Function prototype
- Object __proto__
( )
132. • ES5 new Object.create
• ES3 null prototype
Object
139. <script type="text/javascript">
// => =>
var count = 10;
console.log(count); //=> 10
var hello = function(){
// => =>
var hoge = 'hoge';
// =>
console.log(hoge); //=> hoge
// =>
console.log(count); //=> 10
}
</script>
140. <script type="text/javascript">
// => =>
var count = 10;
console.log(count); //=> 10
=>
var hello = function(){
// => =>
var hoge = 'hoge';
// =>
=>
console.log(hoge); //=> hoge
// =>
console.log(count); //=> 10
}
</script>
146. n1 10
<script type="text/javascript"> n2 20
var hoge = ‘hoge’; sum undefined
arguments {0: 10, 1: 20,...}
function add(n1, n2){
var sum = n1 + n2;
return sum;
}
add(10, 20);
</script>
147. n1 10
<script type="text/javascript"> n2 20
var hoge = ‘hoge’; sum undefined
arguments {0: 10, 1: 20,...}
function add(n1, n2){
var sum = n1 + n2;
return sum;
}
add(10, 20); hoge 'hoge'
</script>
add <function>
148. n1 10
hoge 'hoge'
n2 20
add <function>
sum undefined
arguments {0: 10, 1: 20,...}
162. 1. Object
Object
2. Function
Function
2
3. Closure
2
Editor's Notes \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n > var obj = {}\n> obj\n{}\n> typeof obj\n'object'\n> Object.prototype.call.toString(obj);\nTypeError: Cannot call method 'toString' of undefined\n at [object Context]:1:23\n at Interface.<anonymous> (repl.js:171:22)\n at Interface.emit (events.js:64:17)\n at Interface._onLine (readline.js:153:10)\n at Interface._line (readline.js:408:8)\n at Interface._ttyWrite (readline.js:585:14)\n at ReadStream.<anonymous> (readline.js:73:12)\n at ReadStream.emit (events.js:81:20)\n at ReadStream._emitKey (tty_posix.js:307:10)\n at ReadStream.onData (tty_posix.js:70:12)\n> Object.prototype.toString.call(obj);\n'[object Object]'\n> obj.toString()\n'[object Object]'\n> obj\n{}\n> obj.name = 'miyukki'\n'miyukki'\n> obj.age = 18\n18\n> obj.age = '18'\n'18'\n> obj\n{ name: 'miyukki', age: '18' }\n> obj.age = 18\n18\n> obj['age']\n18\n> var key = 'age'\n> obj[key]\n18\n> obj.sayHello = function(){ console.log('hi!') }\n[Function]\n> obj\n{ name: 'miyukki', age: 18, sayHello: [Function] }\n> obj.sayHello()\nhi!\n> obj['sayHello']()\nhi!\n> obj.child = { name: 'Miyukki Jr', age: 0 };\n{ name: 'Miyukki Jr', age: 0 }\n> obj.child\n{ name: 'Miyukki Jr', age: 0 }\n> obj\n{ name: 'miyukki',\n age: 18,\n sayHello: [Function],\n child: { name: 'Miyukki Jr', age: 0 } }\n> \n> \n> \n> \n> \n> \n> \n> \n> \n> \n> new Date();\nThu, 01 Sep 2011 09:48:31 GMT\n> var today = new Date();\n> today.name = 'kyou no namae'\n'kyou no namae'\n> today\n{ Thu, 01 Sep 2011 09:48:35 GMT name: 'kyou no namae' }\n> today.name\n'kyou no namae'\n> today.originalFunction = function(){ console.log('original function') } \n[Function]\n> today.originalFunction()\noriginal function\n > var obj = {}\n> obj\n{}\n> typeof obj\n'object'\n> Object.prototype.call.toString(obj);\nTypeError: Cannot call method 'toString' of undefined\n at [object Context]:1:23\n at Interface.<anonymous> (repl.js:171:22)\n at Interface.emit (events.js:64:17)\n at Interface._onLine (readline.js:153:10)\n at Interface._line (readline.js:408:8)\n at Interface._ttyWrite (readline.js:585:14)\n at ReadStream.<anonymous> (readline.js:73:12)\n at ReadStream.emit (events.js:81:20)\n at ReadStream._emitKey (tty_posix.js:307:10)\n at ReadStream.onData (tty_posix.js:70:12)\n> Object.prototype.toString.call(obj);\n'[object Object]'\n> obj.toString()\n'[object Object]'\n> obj\n{}\n> obj.name = 'miyukki'\n'miyukki'\n> obj.age = 18\n18\n> obj.age = '18'\n'18'\n> obj\n{ name: 'miyukki', age: '18' }\n> obj.age = 18\n18\n> obj['age']\n18\n> var key = 'age'\n> obj[key]\n18\n> obj.sayHello = function(){ console.log('hi!') }\n[Function]\n> obj\n{ name: 'miyukki', age: 18, sayHello: [Function] }\n> obj.sayHello()\nhi!\n> obj['sayHello']()\nhi!\n> obj.child = { name: 'Miyukki Jr', age: 0 };\n{ name: 'Miyukki Jr', age: 0 }\n> obj.child\n{ name: 'Miyukki Jr', age: 0 }\n> obj\n{ name: 'miyukki',\n age: 18,\n sayHello: [Function],\n child: { name: 'Miyukki Jr', age: 0 } }\n> \n> \n> \n> \n> \n> \n> \n> \n> \n> \n> new Date();\nThu, 01 Sep 2011 09:48:31 GMT\n> var today = new Date();\n> today.name = 'kyou no namae'\n'kyou no namae'\n> today\n{ Thu, 01 Sep 2011 09:48:35 GMT name: 'kyou no namae' }\n> today.name\n'kyou no namae'\n> today.originalFunction = function(){ console.log('original function') } \n[Function]\n> today.originalFunction()\noriginal function\n \n \n node &#x306F;&#x99C4;&#x76EE;\n\n\n var obj &#x306E; __proto__ &#x304C; Object.prototype &#x3067;&#x3042;&#x308B;&#x3053;&#x3068;\n\n\n \n \n \n \n \n &#x306A;&#x3093;&#x306E;&#x5909;&#x54F2;&#x3082;&#x306A;&#x3044;&#x95A2;&#x6570;&#x3067;&#x3059;&#x306D;\n &#x306A;&#x3093;&#x306E;&#x5909;&#x54F2;&#x3082;&#x306A;&#x3044;&#x95A2;&#x6570;&#x3067;&#x3059;&#x306D;\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n