JavaScript_Study_#4

□ 19. 프로토타입

JavaScript는 객체지향 프로그램 능력을 지닌 **[프로토타입 기반의 객체지향]** 프로그램 언어이다.

ㅁ 객체 지향이란?
객체의 집합으로 프로그램을 표현하는 프로그래밍 패러다임
상태(state) = 프로퍼티 를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작(behavior) = 메서드 을 하나의 논리적인 단위로 묶어 생각한다.

• 추상화
  다양한 속성중에서 필요그램에 필요한 속성을 간추려내어 표현하는 것을 추상화라고 한다.

ㅁ 상속과 프로토타입

• 상속은 객체지향 프로그래밍의 핵심 개념으로, 어떤 객체의 프로퍼티나 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것이다.

프로토타입을 기반으로 상속을 구현한다

ex)
function Circle(radius) {
	this.radius = raduis;	
    this.getArea = function(){
    	return Math.PI * this.radius ** 2 ;	
    }
}

// Circle 함수 인스턴스를 생성할때마다, getArea 메서드가 중복생성된다.

function Circle(radius) {
	this.radius = raduis;	    
}

Circle.prototype.getArea = fucntion() {
	return Math.PI * this.radius ** 2 ;	
};

//프로토타입객체를 선언함으로써, 중복을 제거한다.

ㅁ 프로토타입 객체

• 모든 객체는 [[Prototype]] 이라는 내부슬롯을 가진다.

ㅁ 'proto' 접근자 프로퍼티

• 접근자 프로퍼티는 자체적으로 값을 같지 않고, 다른 데이터의 프로퍼티 값을 읽거나 저장할때 사용하는 접근자 함수(get, set) 프로퍼티 어티리뷰트로 구성된다.

• 프로토타입 체인은 단방향 링크드 리스트로 구현되어야 한다.
  따라서 프로퍼티 검색방향이 한쪽방향으로만 흘러가야 한다.(순환참조)

ㅁ 함수 객체의 prototype 프로퍼티

ㅁ프로토타입의 constructor 프로퍼티와 생성자 함수

• 모든 프로토타입은 constructor 프로퍼티를 갖는다.
  이 프로퍼티는 prototype 프로퍼티로 자신이 참조하고 있는 생성자함수를 가르킨다.

ㅁ 프로토타입의 생성시점
생성자 함수가 생성시점에 더불어 생성된다.

□ 20. Strict mode

• 선언하지 않은 변수를 값을 할당하면, 이는 전역변수로 [암묵적 전역]이 된다.
• 이런 실수에 대비하여 strict 모드를 지원한다.

ex) 'use strict'

혹은 eslint를 사용하는 것도 방법중에 하나다.

• 전역에 strict mode를 적용하는것은 피한다.
• 함수단위로 strict mode를 적용하는 것을 피한다.

□ 21. 빌트인 객체

• 표준 빌트인 객체
  표준 빌트인 객체는 ECMAScript 사양에 정의된 객체를 말하며, 전역의 공통 기능을 제공한다.
  전역 변수처럼 언제나 참조가능하다.

• 호스트 객체
  자바스크립트 실행환경(브라우저/node)에서 추가로 제공하는 객체를 말한다.
  DOM BOM XMLHttpRequest, fetch등

• 사용자 정의 객체
  사용자가 직접 정의한 객체를 말한다.

ㅁ 래퍼객체
문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시객체

ㅁ 전역객체
코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체
브라우저 환경에서는 self, this .. Node.js 환경에서는 global

ㅁ 빌트인 전역함수

• eval
  eval 함수는 자바스크립트 코드를 나타내는 문자열을 인수로 전달 받는다.
  전달받은 문자열 코드가 표현식이라면, eval 함수는 문자열 코드를 런타임에 평가하여 값을 생성하고
  전달받은 인수가 문이라면 eval함수는 문자열 코드를 런타임에 실행한다.

□ 22.this

• this 바인딩
  바인딩이란 식별자와 값을 연결하는 과정을 의미한다.
  예를들어, 변수선언은 변수일므과 확보된 메모리공간 주소를 바인딩하는 것이다.

• this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부 에서만 의미가 있다.
  메서드 내부 this => 메서드를 호출한 객체
  생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스를 가리킨다.

ㅁ 함수 호출방식과 this바인딩
this 바인딩은 함수의 호출방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다.

렉시컬 스코프는 함수정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정한다.
this 바인딩은 함수 호출 시점에 결정된다.

• 일반 함수 호출
  기본적으로 this에는 전역객체가 바인딩 된다.
  일반함수로 호출된 모든함수 내부의 this에는 전역 객체가 바인딩된다.

• 화살표함수
  화살표 함수 내부의 this는 상위 스코프 this를 카리킨다.

• 메서드 호출
  매서드 내부의 this는 메서드를 호출한 객체에 바인딩된다.

• 생성자 함수호출
  생성자 함수 내부의 this에는 생성자 함수가 미래에 생성할 인스턴스가 바인딩된다.

• apply / call / bind 메서드에 의한 간접호출
  Function.prototype의 메서드다.
  apply, call 메서드는 this를 사용할 객체와 인수 리스트를 인수로 전달받아 함수를 호출한다.

Function.prototype.apply(thisArg[, argsArray])
Function.prototype.call(thiArg[, arg1[, arg2[, ...]]]]

두 함수의 경우 본질적으로는 함수를 호출하는 것이다.
이 함수를 호출하면 첫번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩한다.

• apply
  호출할 함수의 인수를 배열로 묶어 전달한다.
• call
  호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달한다.