2016 자바카페 스파르탄 스터디

INSIDE Java Script 4

JAVACAFE박진현

2016 자바카페 스파르탄 스터디들어가기 앞서 ..

본 슬라이드는 2016 자바카페 스파르탄 스터디를 위해 제작되었습니다 .

본 슬라이드의 대부분의 내용은 인사이드 자바스크립트(2014 송형주 , 고현준 ) 의 내용을 참고하였습니다 .

2016 자바카페 스파르탄 스터디목 차

함수 정의 ( 생성 ) 함수 객체 다양한 함수 형태 함수 호출과 this 프로토타입과 프로토타입 체이닝

2016 자바카페 스파르탄 스터디함수 정의 ( 생성 )

함수 선언문 함수 표현식 Function() 생성자 함수

2016 자바카페 스파르탄 스터디함수 정의 ( 생성 )

function add(x,y){return x+y;

} // 함수 리터럴 && 기명함수 표현식 함수도 하나의 값으로 취급 == 객체 함수를 변수에 할당하는 것도 가능 var add = function(x,y){

return x+y;} // 함수 표현식 // 익명함수 표현식

2016 자바카페 스파르탄 스터디함수 정의 ( 생성 )

함수 표현식 형태의 변화

2016 자바카페 스파르탄 스터디함수 정의 ( 생성 )

함수 끝에는 꼭 ; 을 씁시다 ! 안쓰면 자동으로 세미콜론을 삽입해주지만…

2016 자바카페 스파르탄 스터디함수 정의 ( 생성 )

Function 생성자 : new Function(a1,a2,…aN, fBody) 쓰는사람 보신분 ..? 내부적으로 사용할듯 ..

2016 자바카페 스파르탄 스터디함수 호이스팅

함수를 선언하기 전에 사용해도 동작함 Hoisting : Hoisting is JavaScript's default behavior of moving dec-

larations to the top. 변수 생성과 초기화가 별도로 분리되어 진행됨 (5 장에서 ..)

2016 자바카페 스파르탄 스터디함수 객체

함수도 객체 == 함수 자체가 프로퍼티를 가짐 ! 리터럴에 의한 생성 변수나 배열의 요소 , 객체의 프로퍼티등에 할당 함수의 인자로 전달가능 함수의 리턴값으로 리턴 가능 동적으로 프로퍼티 생성 및 할당

일급 객체 ! == 함수가 일반 객체처럼 값으로 취급됨

2016 자바카페 스파르탄 스터디함수 객체

함수도 객체 == 함수 자체가 프로퍼티를 가짐 ! 리터럴에 의한 생성 변수나 배열의 요소 , 객체의 프로퍼티등에 할당 함수의 인자로 전달가능 함수의 리턴값으로 리턴 가능 동적으로 프로퍼티 생성 및 할당

2016 자바카페 스파르탄 스터디함수 객체

기본 프로퍼티

__proto__ == Function.prototype __proto__ != prototype 함수 생성시 함수 자신과 연결된 prototype 객체를 동시 생성

2016 자바카페 스파르탄 스터디함수 형태

콜백함수 : 이벤트 발생시 시스템이 호출해줌 즉시실행 함수 : 정의와 동시에 실행

최초 한번만 실행 ( 초기화에 유용 ) 대부분 라이브러리에서 사용 함수 유효범위

함수 내부의 매개변수와 함수는 함수 내에서만 유효 변수 이름충돌등을 막을 수 있음

내부 함수

2016 자바카페 스파르탄 스터디함수 형태

내부 함수 : 함수내에 정의된 함수 부모함수 변수에 접근이 가능 내부함수는 일반적으로 부모함수 내부에서만 호출 가능

클로저 : 부모 함수 스코프 내의 변수를 외부에서 참조하는 함수 ??? 5 장에서 계속

2016 자바카페 스파르탄 스터디함수 호출과 this

arguments 함수 호출시 암묵적으로 arguments 객체가 넘어감 매개변수 체크를 엄하게 안함 유사배열 객체 == Object != Array

2016 자바카페 스파르탄 스터디함수 호출과 this

arguments 함수 호출시 암묵적으로 arguments 객체가 넘어감 매개변수 체크를 엄하게 안함 유사배열 객체 == Object != Array

2016 자바카페 스파르탄 스터디함수 호출과 this

this 함수 호출시 암묵적으로 전달 함수 호출 패턴에 따라 다른 this 객체를 참조함 객체의 메소드를 호출할때 this 바인딩

자신을 호출한 객체에 바인딩됨

2016 자바카페 스파르탄 스터디함수 호출과 this

함수를 호출할때 this 바인딩 전역 객체가 바인딩됨 (window, global) 내부함수를 호출했을때도 똑같이 적용됨 !?

내부 함수 호출패턴이 정의가 안되어있음 .. 이를 막기 위해선 .. this 를 다른변수에 저장해야함

2016 자바카페 스파르탄 스터디함수 호출과 this

생성자 함수를 호출할때 this 기존함수에 new 를 붙이면 생산자 함수

되도록 대문자로 표기 동작순서

빈 객체 생성 → this 바인딩 → 자신을 생성한 생성자 함수의 prototype 프로퍼티를 자신의 프로토타입 객체로 설정 (???) this 를 이용하여 프로퍼티 생성 생성한 객체를 리턴

2016 자바카페 스파르탄 스터디함수 호출과 this

객체 리터럴 방식과의 차이점 객체 리터럴방식은 재생성 불가 생성자 함수는 재생성 가능 ( 피카츄 공장 만들기 등 ..) 프로토타입 객체가 틀림 ( 가짜 포켓몬 ) new 를 안붙이고 호출하면 엉뚱하게 동작함 ..

instanceof

2016 자바카페 스파르탄 스터디함수 호출과 this

call 과 apply 메소드를 이용한 명시적 this 바인딩 기본적인 기능은 함수 호출 다만 호출시 첫번째 인자로 넘어간 객체가 this 에 바인딩됨 apply 는 인자로 배열을 , call 은 각각 하나하나 값으로 넘김 대표적인 용도는 유사배열객체에서 배열메소드 사용

2016 자바카페 스파르탄 스터디함수 리턴

일반 함수나 메서드는 리턴값을 지정하지 않으면 undefined 리턴 생성자 함수에서 리턴값을 지정하지 않으면 생성된 객체가 리턴

생성자 함수에서 리턴값으로 넘긴 값이 객체가 아닌 불린 숫자 문자열의 경우 이런값을 무시하고 this 로 바인딩된 객체가 리턴됨

2016 자바카페 스파르탄 스터디프로토타입 체이닝

프로토타입 기반 객체지향 프로그래밍 클래스 개념이 없음 모든 객체는 자신의 부모인 프로토타입 객체를 가리키는 링크가 있음 (__proto__)함수 객체의 prototype 과 __proto__ 는

다른거임 ! 자바스크립트에서 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가

가리키는 프로토타입 객체를 자신의 부모 객체로 설정하는 __proto__ 링크로 연결한다(?)

자기자신의 프로퍼티는 물론 , 자기의 부모역활을 하는 프로토타입객체의 프로퍼티도 접근 가능

0

2016 자바카페 스파르탄 스터디프로토타입 체이닝

객체 리터럴 방식으로 생성된 객체의 프로토타입 체이닝 객체 리터럴 객체의 __proto__ == Object.prototype

생성자 함수로 생성된 객체의 프로토타입 체이닝 자바스크립트의 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체로 취급한다

Object.prototype 객체는 프로토타입 체이닝의 종점 ( 자바의 Object)

2016 자바카페 스파르탄 스터디프로토타입 체이닝

객체 리터럴 방식으로 생성된 객체의 프로토타입 체이닝 객체 리터럴 객체의 __proto__ == Object.prototype

생성자 함수로 생성된 객체의 프로토타입 체이닝 자바스크립트의 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체로 취급한다

Object.prototype 객체는 프로토타입 체이닝의 종점 ( 자바의 Object)