스파르탄Js in sidejs4

2016 자바카페 스파르탄 스터디
INSIDE Java Script 4
JAVACAFE
박진현

2016 자바카페 스파르탄 스터디들어가기 앞서..
 본 슬라이드는 2016 자바카페 스파르탄 스터디를 위해
제작되었습니다.
 본 슬라이드의 대부분의 내용은
인사이드 자바스크립트
(2014 송형주, 고현준) 의
내용을 참고하였습니다.

2016 자바카페 스파르탄 스터디목 차
 함수 정의(생성)
 함수 객체
 다양한 함수 형태
 함수 호출과 this
 프로토타입과 프로토타입 체이닝

2016 자바카페 스파르탄 스터디함수 정의(생성)
 함수 선언문
 함수 표현식
 Function() 생성자 함수

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

 함수 표현식 형태의 변화

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

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

2016 자바카페 스파르탄 스터디함수 호이스팅
 함수를 선언하기 전에 사용해도 동작함
 Hoisting : Hoisting is JavaScript's default behavior of moving
declarations to the top.
 변수 생성과 초기화가 별도로 분리되어 진행됨 (5장에서..)

2016 자바카페 스파르탄 스터디함수 객체
 함수도 객체 == 함수 자체가 프로퍼티를 가짐!
 리터럴에 의한 생성
 변수나 배열의 요소, 객체의 프로퍼티등에 할당
 함수의 인자로 전달가능
 함수의 리턴값으로 리턴 가능
 동적으로 프로퍼티 생성 및 할당
 일급 객체! == 함수가 일반 객체처럼 값으로 취급됨

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

 기본 프로퍼티
 __proto__ == Function.prototype
 __proto__ != prototype
 함수 생성시 함수 자신과 연결된 prototype 객체를 동시 생성

2016 자바카페 스파르탄 스터디함수 형태
 콜백함수 : 이벤트 발생시 시스템이 호출해줌
 즉시실행 함수 : 정의와 동시에 실행
 최초 한번만 실행(초기화에 유용)
 대부분 라이브러리에서 사용
 함수 유효범위
 함수 내부의 매개변수와 함수는 함수 내에서만 유효
 변수 이름충돌등을 막을 수 있음
 내부 함수

2016 자바카페 스파르탄 스터디함수 형태
 내부 함수 : 함수내에 정의된 함수
 부모함수 변수에 접근이 가능
 내부함수는 일반적으로 부모함수 내부에서만 호출 가능
 클로저 : 부모 함수 스코프 내의 변수를 외부에서 참조하는 함수
 ???
 5장에서 계속

2016 자바카페 스파르탄 스터디함수 호출과 this
 arguments
 함수 호출시 암묵적으로 arguments 객체가 넘어감
 매개변수 체크를 엄하게 안함
 유사배열 객체 == Object != Array

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

 함수를 호출할때 this 바인딩
 전역 객체가 바인딩됨(window, global)
 내부함수를 호출했을때도 똑같이 적용됨!?
 내부 함수 호출패턴이 정의가 안되어있음..
 이를 막기 위해선.. this를 다른변수에 저장해야함

 생성자 함수를 호출할때 this
 기존함수에 new를 붙이면 생산자 함수
 되도록 대문자로 표기
 동작순서
 빈 객체 생성 → this 바인딩
→ 자신을 생성한 생성자 함수의 prototype 프로퍼티를 자신의
프로토타입 객체로 설정(???)
 this를 이용하여 프로퍼티 생성
 생성한 객체를 리턴

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

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

2016 자바카페 스파르탄 스터디함수 리턴
 일반 함수나 메서드는 리턴값을 지정하지 않으면
undefined 리턴
 생성자 함수에서 리턴값을 지정하지 않으면 생성된
객체가 리턴
 생성자 함수에서 리턴값으로 넘긴 값이 객체가 아닌 불린 숫자 문자열의
경우 이런값을 무시하고 this로 바인딩된 객체가 리턴됨

2016 자바카페 스파르탄 스터디프로토타입 체이닝
 프로토타입 기반 객체지향 프로그래밍
 클래스 개념이 없음
 모든 객체는 자신의 부모인 프로토타입 객체를 가리키는 링크가 있음 (__proto__)
 함수 객체의 prototype 과 __proto__ 는 다른
거임!
 자바스크립트에서 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가
리키는 프로토타입 객체를 자신의 부모 객체로 설정하는 __proto__ 링크로 연결한다(?)
 자기자신의 프로퍼티는 물론, 자기의 부모역활을
하는 프로토타입객체의 프로퍼티도 접근 가능
0

2016 자바카페 스파르탄 스터디프로토타입 체이닝
 객체 리터럴 방식으로 생성된 객체의 프로토타입 체이닝
 객체 리터럴 객체의 __proto__ == Object.prototype
 생성자 함수로 생성된 객체의 프로토타입 체이닝
 자바스크립트의 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가
가리키는 객체를 자신의 프로토타입 객체로 취급한다
 Object.prototype 객체는 프로토타입 체이닝의 종점(자바의 Object)

스파르탄Js in sidejs4

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to 스파르탄Js in sidejs4

Similar to 스파르탄Js in sidejs4 (20)

Recently uploaded

Recently uploaded (6)

스파르탄Js in sidejs4