Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

JavaScript 핵심 개념 이해

JavasScript 의 핵심 개념을 쉽게 이해 할 수 있도록 알고 있는 지식을 바탕으로 정리 하였다.
by

seung hak choi

on 1 July 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of JavaScript 핵심 개념 이해

JavaScript 핵심 개념 이해
this
prototype
Execution Context
실행 코드에서 생성된 모든 값은

메모리 주소
로 참조된다.
MEMORY
var a = { };
var b = a;
a.a = 1
{ }
a : 1
참조 count = 1
참조 count = 2
1개의 참조가 있을때 count가 1이라면
0 일때 메모리에서 제거된다.
Garbage Collector 가 제거
참조 COUNT
Reference
default 는 window
someObject.someFunc(param) // = someObject.someFunc.apply(someObject, [param])
참조 연산자 "." 으로 실행하면 자동으로 excution context 가 전달 된다고 생각하자.
apply(), call() 함수로 excution context 를 강제로 전달 가능
test source link
http://jsfiddle.net/sghakgun/pzcfK/
prototype 속성은 함수만 가지고 있다.
prototype chain
1.
해당 속성/메서드가
현재 객체
에 정의되어 있는지 확인
2.
없다면
원형 함수 객체의 prototype
을 확인
3.
여기에도 정의되어 있지 않으면 계속
상위 객체의 prototype
확인
4.
최종
Object.prototype 확인
5.
없으면
"undefined"
prototype chain 적용 ?
new 연산자로 함수 객체를 실행하면 자동 적용
prototype 으로 properties 를 선언하는 것이 memory 절약 효과가 크다.
test source link
http://jsfiddle.net/sghakgun/CKHpr/
모든 자바스크립트 코드의 실행은 실행문맥 안에서 이루어 진다.
실행 코드가 실행 될 "공간" (영역) 이라고 생각하자
함수 실행시 생성된 공간
현재 실행되고 있는 공간(실행문맥) 안에 중첩 생성
실행 문맥의 참조 유효범위는 선언된 곳이 중요하다. 실행되는 곳은 상관없음
window context
function a() 의 context
function outer() context
outer()
=> function inner() 의 context
function a() { ... }
function outer() {
function inner(){
....
}
}
생성된 객체의 공간 (array, JSON, new 연산으로 실행된 함수)
test source link
http://jsfiddle.net/sghakgun/VyfBY/
test source link
http://jsfiddle.net/sghakgun/a4xuJ/
Closure
실행문맥은 stack 구조를 따른다.
window context
inner() context
outer() context
function outer(){
function inner(){
....
}
}
top-level 에 위치한 실행문맥
(Last In)
의 실행이 종료되고
외부 참조가 없다면
(clouser 가 발생하지 않았다면)
참조 count 가 0 이므로
메모리에서 Garbage Collector(GC) 에 의해 제거된다.
이것을 이용하여 closure 를 발생 시킨다.
즉, 메모리에서 실행문맥이 제거 되지 않았다는 의미.
Create Object
1. 객체 리터럴을 이용한 생성
var obj = {a:1, b:2};
배열과 다른점은 연관배열 이라는 것 뿐이다.
(key 값으로 단어를 사용)
var arr = [
1,
2,
function(){
return this[0] + this[1];
}
];

// 3
console.log(arr[2]());
2. closure 를 이용한 객체 생성
function testFunction(name) {
var name = name || "please set myName";

return {
getName : function() {
console.log(name);
}
}
}

var obj = testFunction();
var obj_2 = testFunction("obj_2");

obj.getName(); // please set myName
obj_2.getName(); // obj_2
3. new 연산자 사용
var obj = new SomeFunction();
기본은 closure 를 이용한 객체 생성과 동일
prototype chain 이 적용된다.
함수에서 this 가 아닌 객체를 return 하면 적용되지 않는다.
this 가 자동으로 return 된다.
실행
(해석)
순서

var anyVar = 1;

function outerFunc(anyVar) {

console.log(anyVar); // undefined
console.log(a); // undefined

innerFunc() // innerFunc()

var a = 1;

console.log(a); // 1

function innerFunc() {
console.log("innerFunc()");
}
}

outerFunc();
previous load
1. var anyVar;
// parameter 로 선언 되어 있으므로 지역변수로 해석된다.
2. var a;
3. innerFunc() {}
4. 이후 코드는 위에서 아래로 순차적으로 실행
test source link
http://jsfiddle.net/sghakgun/cdbQS/
test source link
http://jsfiddle.net/sghakgun/kKvJd/
이벤트 실행
단계는 총 3단계
1. 캡처단계 (capture)
가장 바깥쪽
(depth1)
Element 에서 안쪽으로
(depth3)
탐색
<div id="depth1">
<div id="depth2">
<p id="depth3"></p>
</div>
</div>
ex. depth3 에서 이벤트 발생 발생
depth1 => depth2 => depth3
addEventListener() 함수로 등록 시켜야 한다. (W3C 표준)
add 할 때 실행 단계를 지정할 수 있다. (캡쳐 OR 버블)
IE는 IE9 부터 지원
즉, IE 는 캡쳐 단계를 지원하지 않는다.
따라서 cross browser 를 지향한다면 캡처단계는 사용해서는 안된다.
2. 목표 (target)
최초 이벤트가 발생한 요소
3. 버블링 (bubbling)
기본적으로 등록한 이벤트는 모두 버블링단계에 등록된다.
가장 외부의 노드로 이동하면서 탐색
각 단계에서 탐색중 캡처와 버블링 단계에서 등록된 이벤트가 있다면 실행한다.
전파를 중지 시키면 이후는 실행이 안됨
test sourcd url
http://jsfiddle.net/sghakgun/D8LSu/
test source url
http://jsfiddle.net/sghakgun/EtnMW/
http://jsfiddle.net/sghakgun/Yv227/
http://jsfiddle.net/sghakgun/vxyQp/
Full transcript