View
435
Download
2
Category
Preview:
Citation preview
비전공자의 자바스크립트 도전기
Freelancer / 아프리카 TV BJ / Brunch Writer기발자
2014 년 10 월개발 공부 시작
HTMLCSS
JavaScriptSwift
Python
BootstrapAngularReactMEANIonic
WhyJavaScript
Versatile
실행 컨텍스트
클로저
호이스팅
객체지향
프로토타입클래스
스코프메서드
컴파일
콜백재귀함수디버깅
생활코딩 Udemy Treehouse W3School …
여러 채널을 통해 공부했지만…
Too ManyTo Fail
K.O
Image + Structure
+ =1 1 2
+ =
+ =1 1 2
값과 연관된 이름으로서 , 이를 통해 데이터를 저장하고 조작할 수 있는 것
var 값과 연관된 이름으로서 ,
이를 통해 데이터를 저장하고 조작할 수 있는 것
=var name “inkwon”
=var name “inkwon”
“inkwon”name
JavaScript 에서 기본적인 빌딩 블록 중의 하나로 작업을 수행하거나 값을 계산하는
문장의 집합과 같은 자바스트립트 절차
JavaScript 에서 기본적인 빌딩 블록 중의 하나로 작업을 수행하거나 값을 계산하는
문장의 집합과 같은 자바스트립트 절차
function
function coffeeMachine(coffee beans) { ……}coffeeMachine(“ 브라질 산토스” )
function coffeeMachine(coffee beans) { ……}
coffeeMachine(“ 브라질 산토스” )
function coffeeMachine(coffee beans) { ……}
coffeeMachine(“ 브라질 산토스” )
Parameter
Arguments
function coffeeMachine(coffee beans) { return 브라질 산토스 원두로 만들어진 커피}
coffeeMachine(“ 브라질 산토스” )
스크립트가 실행되면서 생성되는 것으로 생성된 순서대로 Stack 메모리에 삽입되며 언제나 1 개의 Variable Environment,
1 개의 Lexical Environment, 그리고 1 개의 This Binding 속성으로 구성되어 있는 것
Execution Context
스크립트가 실행되면서 생성되는 것으로 생성된 순서대로 Stack 메모리에 삽입되며 언제나 1 개의 Variable Environment,
1 개의 Lexical Environment, 그리고 1 개의 This Binding 속성으로 구성되어 있는 것
var korName = “Inkwon”전역에서의 실행 컨텍스트
var korName = “Inkwon”
전역 실행 컨텍스트전역 변수 객체
scope ( 스코프 체인 )
korName : undefined -> Inkwon
this
함수 호출 시 실행 컨텍스트var korName = “Inkwon”
function test() { var korName = “Lee”}
test();
var korName = “Inkwon”
function test() { var korName = “Lee”}
test();
전역 실행 컨텍스트전역 변수 객체
scope ( 스코프 체인 )
korName
test
this
test 함수 실행 시 test 실행 컨텍스트 생성
전역 실행 컨텍스트전역 변수 객체
scope ( 스코프 체인 )
korName
test
this
var korName = “Inkwon”
function test() { var korName = “Lee”}
test();
전역 실행 컨텍스트
var korName = “Inkwon”
function test() { var korName = “Lee”}
test();
test 실행 컨텍스트test 변수 객체
scope ( 스코프 체인 )
korName
this
전역 실행 컨텍스트
test2 실행 컨텍스트test2 변수 객체
scope ( 스코프 체인 )
this
test 실행 컨텍스트
var korName = “Inkwon”
function test() { var korName = “Lee” function test2() { return korName } test2();}
test();
var korName = “Inkwon”
function test() { function test2() { return korName } return test2();}
console.log(test());
전역 실행 컨텍스트
test2 실행 컨텍스트test 실행 컨텍스트
스코프 체인
var korName = "inkwon";
function test1() { return korName; }
function test2() { var korName = "Lee"; return test1(); }
console.log(test2());
전역 실행 컨텍스트전역 변수 객체
scope ( 스코프 체인 )
korName
test1
test2
var korName = "inkwon";
function test1() { return korName; }
function test2() { var korName = "Lee"; return test1(); }
console.log(test2());
this
var korName = "inkwon";
function test1() { return korName; }
function test2() { var korName = "Lee"; return test1(); }
console.log(test2());
전역 실행 컨텍스트
test2 실행 컨텍스트test2 변수 객체
scope ( 스코프 체인 )
korName
this
var korName = "inkwon";
function test1() { return korName; }
function test2() { var korName = "Lee"; return test1(); }
console.log(test2());
전역 실행 컨텍스트
test1 실행 컨텍스트test1 변수 객체
scope ( 스코프 체인 )
this
test2 실행 컨텍스트
var korName = "inkwon";
function test1() { return korName; }
function test2() { var korName = "Lee"; return test1(); }
console.log(test2());
전역 실행 컨텍스트
test1 실행 컨텍스트test2 실행 컨텍스트
전역 실행 컨텍스트
test1 실행 컨텍스트전역 실행 컨텍스트
test2 실행 컨텍스트
var korName = "inkwon";
function test1() { return korName; }
function test2() { var korName = "Lee"; return test1(); }
console.log(test2());
JavaScript 에서 prototype 은 함수의 속성이며 생성자 함수에서 만든 개체의 속성입니다 . 함수의 프로토타입은 개체입니다 .
이는 함수가 생성자로 사용될 때 주로 사용됩니다 .
Prototype
var add = function(x, y) { return x + y;}
var add = function(x, y) { return x + y;}
console.dir(add.prototype);console.dir(add.prototype.constructor);
add 함수 객체 add.prototype( add 프로토타입 객체 )
prototype 프로퍼티constructor 프로퍼티
객체지향 프로그래밍 (OOP) 에서 클래스는 특정 종류의 객체내에 있는 변수와 메서드를 정의하는 일종의 틀 , 즉 템플릿이다 . 따라서 , 객체는 클래스로
규정된 인스턴스로서 , 변수 대신 실제값을 가진다 .
Class
function Person(name) { this.name = name; this.getName = function() {…} this.setName = function(reName) {…}}
var korName = new Person(“inkweon”);
var usName = new Person(“Christy”);
function Person(name) { this.name = name; this.getName = function() {…} this.setName = function(reName) {…}}
Person
name
getName
setName
Person
name
getName
setName
korName
name
getName
setName
Person
name
getName
setName
korName
name
getName
setName
usName
name
getName
setName
Person
name
getName
setName
korName
name
getName
setName
usName
name
getName
setName
불필요한 메모리 공간을 차지
Person.prototype.getName = function() {…}
Person.prototype.setName = function(reName) {…}
var korName = new Person(“inkweon”);
var usName = new Person(“Christy”);
function Person(name) { this.name = name;}
Person
name
getName
setName
Person.prototype
korName
name
usName
name
남은 JavaScript 주요 개념객체지향 (OOP), 재귀함수 , 클로저 등
감사합니다 .
Recommended