みゆっき☆Think#7 「本気で学ぶJavascript」

• (id: tlync)

•
•
• … 3

“JavaScript is the only language that
people think they can program without
actually learning it.”

- Douglas Crockford

“JavaScript
HAHA” ( )

-

( )

1. Object
Object
Object

1. Object
Object
Object

2. Function
Function 2
- prototype __proto__

1. Object
Object
Object

2. Function
Function 2
- prototype __proto__

3. Closure
-

•
…
… Mozilla

•
… DOM Ajax
… IE (ry

•
…
… Mozilla

•
… DOM Ajax
… IE (ry

• ECMA Script 5
…
…

Agenda

•5 JavaScript

•Object JavaScript

•Function 2

•Closure
•

@bad_at_math

http://www.slideshare.net/badatmath/js-shistory

JavaScript
( LiveScript )

Netscape Navigator
!

Mozilla CTO

http://brendaneich.com/tag/history/

Scheme …


!? !
※SICP


Java


!? Scheme …?
※SICP


• …

•Java ……

•Gabage Collection !? ………

Scheme Self Java
( ) (Prototype OOP) ( )

JavaScript

“
Global Object
…”


JScript

•Netscape
•JavaScript

JScript

•Netscape
•JavaScript

…

IE 3.0 Beta

JavaScript !

Netscape

• MS …

•

ES 1
•
•
•
• IEEE754 ( …)

•

ES 3
※

•
• String
• try/catch
•

ES 4
•
•
•
• …

•

ES 5
※

• ES 3.1
•
• strict
• JSON
•
http://kangax.github.com/es5-compat-table/

ES Harmony

• Class ES 4 ?

•2 ?

• wiki

http://wiki.ecmascript.org/doku.php?id=harmony:harmony

Object
Object
Object
string Function
null
number Array
undeﬁned
boolean String
Number
※ Boolean
RegExp
Date
etc...

• Object
…
…

•
… ?

• Object {} new Object()
{} new Object()

Java

• Object
Object

(__proto__)

miyukki Object.prototype

name miyukki toString

age 18 …

__proto__ __proto__

(__proto__)

miyukki Object.prototype

name miyukki toString

age 18 …

__proto__ __proto__

※ __proto__
IE
ES 5

Object
• Object
null, undeﬁned Object
Object

Object
• Object
Object

• Object (= )
( ) ( )

Object
• Object
Object

• Object (= )
( ) ( )

• Object (__proto__)
OK

function sayHello(){
console.log('Hello!');
}

> typeof sayHello
'function'

Object
Object
Function
Array
String
Number
Boolean
RegExp
Date
etc...

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'
...

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
...

1. Object

2. [[Class]]

3. prototype Object
__proto__

4. Object this

5. Object

var miyukki = new Person('miyukki');
miyukki.toString(); // Object.prototype

Person Function Object

__proto__ Function.prototype __proto__ Object.prototype __proto__

sayHello <function> … <function> … <function>

__proto__

Function
• Function new

- prototype

(__proto__)
- Prototype Chain

Function
• Function new

- prototype

(__proto__)
- Prototype Chain

• 2
- Function prototype

- Object __proto__
( )

• ES5 new Object.create

• ES3 null prototype
Object

2

•
•

※ with

// => =>
var count = 10;
=>
var hello = function(){
// => =>
var hoge = 'hoge';

// =>
=>
console.log(hoge); //=> hoge

// =>
}
</script>

var hoge = ‘hoge’;

function add(n1, n2){
var sum = n1 + n2;
return sum;
}

add(10, 20);
</script>

n1 10

<script type="text/javascript"> n2 20

var hoge = ‘hoge’; sum undefined

arguments {0: 10, 1: 20,...}
var sum = n1 + n2;
return sum;
}

add(10, 20);
</script>

n1 10

<script type="text/javascript"> n2 20

var hoge = ‘hoge’; sum undefined

arguments {0: 10, 1: 20,...}

var sum = n1 + n2;
return sum;
}

add(10, 20); hoge 'hoge'

</script>
add <function>

n1 10
hoge 'hoge'
n2 20
add <function>
sum undefined

arguments {0: 10, 1: 20,...}

Closure +
• 2
-
- =

Closure +
• 2
-
- =

•
-
Activation

-

Closure +
• Closure
-
- jQuery
-

1. Object
Object

2. Function
Function
2

1. Object
Object

2. Function
Function
2

3. Closure
2

みゆっき☆Think#7 「本気で学ぶJavascript」

More Related Content

みゆっき☆Think#7 「本気で学ぶJavascript」

Editor's Notes