[SK고용디딤돌] 자바스크립트 (5/7) - 2주차

/** 복습 **/

 

* prototype

- 모든 객체는 __proto__ 가 존재하고 함수 객체에는 prototype이 존재한다.

- __proto__는 constructor의 prototype의 객체를 가리킨다.

- 상수나 메서드는 프로토타입 객체에 둔다.

- 프로토타입은 자바스크립트에서 중요한 정보 → 상속 메커니즘을 프로토타입 체인으로 구성한다. → 핵심 컴포넌트

- 프로토타입은 상속을 이야기 한다.

- 프로토타입 객체에는 상수와 메서드를 넣어 둠 → 자바스크립트는 상수가 없음 → 하지만 상수처럼 쓰이는 것을 넣어 둠 → ECMAScript5 까지는 상수라는 것이 존재하지 않음 ECMAScript6 부터는 상수가 존재

- 자바스크립트의 상속을 이야기 할 때 사용

 

* constructor 함수

- 대분자로 만드는 convention을 갖음

- return 문을 쓰지 않음

- this를 생성자 함수 내에서 생략할 수 없음

- 객체의 상태정보만 저장

- 생성자함수는 그 타입을 나타내도록 명시적으로 이름을 부여야 해야함 → 객체를 만들면 그 타입 정보가 있어야 함

 

* 객체의 멤버

- 객체의 property와 method이다.

 

* 정보은닉은 데이터와 관련

 

* Asymentic Encryption

- 대칭키를 이용한 des 방식, 비대칭키틀 이용한 rsa

 

* 콜백

- 어떤 작업이 완료됬을 때 호출되도록 하는 함수 : completion callback

- 어떤 에러가 발생했을 때 처리하는 함수 : error callback

 

* 코드상에서 this 가 있다면 prototype chain을 따라서

  this가 없으면 지역변수. 함수가 호출되야 호출. 이것은 scope chain을 따라감

 

* 클로저

- 린턴된 중첩 함수

- 함수의 지역변수에 대한 중첩함수를 만들면 비공개 속성과 접근자 메소드를 구현해 객체지향의 정보은닉을 실현할 수 있음

  → 더 나아가 캡슐화를 구현할 수 있음

- 클로저 함수 호출할 때마다 스코프가 만들어짐 outer 에 레퍼런스 카운터가 늘어남.

- property는 public 으로 되어깄기때문에 private을 구현하기 위해 함수내 지역변수화 시키는 var를 이용

 

/* 5장 */

 

● 비공개 멤버

- this 키워드를 사용해서 추가하는 모든 프로퍼티와 메소드는 공개 멤버가 되는 이유로, 비공개 멤버로서의 프로퍼티와 메서드는 생성자 함수외베엇 접근이 불가능하다록 var키워드를 이용해 선언

- 비공개 멤버에 접근할 수 있는 접근자 메소드는 생성자 함수 내에서 작성

- 접근자 메소드는 생성자 함수의 지역변수를 참조하는 클로저이며, 외부로 부터 접근이 가능한 공개 멤버

 

● 네임스페이스

- 자바스크립트는 네임스페이스 구조를 지원하지 않음

- 빈 객체를 이용해 네임스페이스와 같은 기능을 제공할 수 있음

- 네임스페이스를 정의하기 위해 구현 코드가 없는 생성자 함수를 작성하고, 생성자 함수에 프로퍼티를 추가하는 것과 동일한 방법으로 하위의 생성자 함수를 정의

- 네임스페이스를 사용할 경우 하위 생성자 함수를 이용해 객체를 생성할 경우, 네임스페이스를 포함한 FQN#으로 생성자 함수를 호풀해야 함에 유의 (FQN : Fully Qualified Name)

- 이름 충돌을 막아준다

- 배포 구조를 만들 수 있음 → 자바에서 패키지

 

ForBeTo.prototype.area = function () {}; // 프로토타입에 추가하는것   ForBeto.Circle.prototype = {  // 프로토타입 자체의 정보를 바꾸는것   area : function () { // 프로퍼티 : 값 return x * y;   }; } // 객체에 프로퍼티를 추가한 것   ForBeTo.Circle.prototype.constructor = ForBeTo.Circle; 을 해줘야 한다.

 

 

※ {} = new Object();

 

 

<ForBeTo.Circle.prototype.constructor = ForBeTo.Circle; 의 결과> <<<<------ 시험문제

 

 

/** 6장 상속 **/

 

● 객체 생성 과정

1) new 연산자는 빈 객체를 생성합니다.

2) 생성자 함수는 this 키워드를 통해 전달된 새로운 객체에 생성자 함수 내에 작성된 프로퍼티 혹은 메소드를 추가하는 초기화 작업을 수행합니다.

3) 새로운 객체의 prototype 프로퍼티에 생성자 함수의 prototype 프로퍼티 값이 전달되어 객체와 생성자 함수는 동일한 프로토타입 객체를 참조하게 됩니다.

4) this가 가리키는 객체를 반환합니다.

 

● 프로토타입 체인과 프로토타입 멤버 상속

- 자바스크립트는 프로토타입 기반의 상속 메커니즘을 제공

- 객체를 생성하면 객체의 생성자 함수의 프로토타입 객체에 정의된 멤버를 상속

- 객체의 생성자 함수의 프로토타입 객체와 Object() 생성자 함수의 프로토 타입객체가 연결되어 있음

- 객체를 거쳐 프로토타입 객체로 멤버를 검색할 수 있는 연결을 프로토타입 체인이라 함

- 멤버에 대한 검색은 맨 먼저 객체를 대상으로 수행하고, 만일 해당 멤버를 찾지 못하면 프로토 타입 객체를 다음으로 검색하고, 마지막으로 Object 생성자 함수의 프로토타입 객체까지 검색하게 됨

 

Object 객체의 주요 멤버

멤버	설명
constructor	객체 생성자 함수를 참조하는 프로퍼티
toString()	객체의 문자열 표현을 반환
valueOf()	객체의 기본형 표현을 반환
hasOwnProperty(prop)	객체가 직접 prop 프로퍼티를 갖고 있는가? (프로토타입 객체의 프로퍼티는 fasle를 반환)
propertyIsEnumberable(prop)	for ... in 문으로 prop 프로퍼피/메서드를 열거할 수 있는가?
isPrototypeOf(obj)	호출 객체가 obj 객체의 프로토타입인가?

 

function 객체의 주요 멤버

멤버	설명
apply
call
toString	함수를 정의하는 코드를 반환

 

 

 

* apply

arrayLikeObject 는 실행 context 이다. arrayLikeObject 있는 정보를 하나씩 꺼내다가 출력을 하고 있음.

만약에 null 이 들어가면 window Object

 

※ 조건만 맞으면 다 돌릴 수 있다.

 

* call

 

 

 

● 프로토타입 체인과 프로토타입 멤버 상속

- 모든 함수는 Function 객체의 프로토타입 멤버를 상속하고, 모든 함수의 프로토타입 객체는 Object 객체의 프로토타입 객체를 상속하며, 모든 생성자 함수의 객체는 Object 객체의 프로토타입 객체를 상속함

- 프로토타입 멤버 상속은 하위 생성자 함수의 prototype 프로퍼티가 new 연산자와 상위 생성자 함수 호출을 통해 생성된 객체를 참조해서 구현하며, 상위 생성자 함수의 프로토타입 멤버를 상소갛게 됨

- 프로토타입 객체가 상위 생성자 함수를 통해 만들어졌기 때문에 constructor 프로퍼티는 상위 생성자 함수를 참조하고 있어 constructor 프로퍼티를 하위 생성자 함수로 변경함

 

 

K5.constructor === K5

K5.superconstructor = Car

자바스크립트는 super 참조가 없기에 다음 처럼 접근 가능 Car === K5.constructor.prototype.__proto__.constructor 그러나

 

일반함수를 호출하는 것처럼 apply 또는 call을 써서 접근

 

● 객체 멤버 상속

- 프로토타입 멤버 뿐만 아니라 특정 객체의 멤버를 상속해야 하는 경우 Function 객체의 메소드 apply() 혹은 call()을 사용해 생성자 체이닝을 구현

- 상위 생성자 함수의 new 연산자와 하위 생성자 함수를 통해 생성할 객체의 멤버로 추가하는 객체 멤버 상속을 수행함

- 하위 생성자 함수의 프로토타입 객체가 new 연산자와 상위 생성자 호출을 통해.. 생성...

 

[객체지향에서의 상속관계]

 

 

[실습코드 06-02 p.145 ~ p.147] - 생성자 체이닝

 

그냥 Car를 쓰면 window에 생성 됨 그래서 Car.apply(this, [f])라고 함 → 하면은 k5의 객체에 변수 fuel, velocity, isDriving이 생김

 

Context란 memory 공간이라는 뜻. 그 중 실행 context 현재 cpu에서 실행되는 영역

 

new랑 결합하여 생성자 함수를 쓰지 않으면 일반함수랑 똑같아짐

 

Car(1000); 하면 일반함수이기 때문에

 

Window.fuel =1000

          .velocity = 0

          .isDriving = false  됨

 

그래서 Car.apply(this, 1000)을 하여서 구현

 

 

[보충]

 

 

 

apply(지정할 객체, [arg1]) // apply는 인자가 배열에 존재 해야함

 

arguments => array like Object

 

 

※ 일반함수의 this는 window이다.

 

[자바스크립트의 일반함수 vs 생성자함수 비교]

 

 

* 자바스크립트의 함수

(1) 일반함수

(2) 생성자함수가 있다.

 

ex) 일반함수의 대표적 케이스 sayHello("안녕");

ex) 생성자함수의 대표적 케이스 new Greetings("안녕"); // new하고 결합안하면 일반함수가 된다

 

new하고 결합 할려고 만드는 함수를 생성자 함수라고 한다.

생성자 함수에 그 this가 new 연산자에 의해서 결정된 값이다.

new 연산자가 this 값을 결정한다.

new 연산자는 동적 메모리 할당 연산자이다.

 

 

그 참조를 생성자는 this 이다

 

- 일반함수의 this는 global scope 의 window 객체를 가르킴

- 생성자함수의 this는 new 에 의해 할당된 메모리 정보가 msg 객체 정보가 생김 이를 프로퍼티라고 함. 이제 그주소를 obj 가 받음. 이를 참조 변수라고 함

 

global scope object ≒ 클라이언트에서 작헙할 때 window

 

[예제1]

 

msg에 var 가있으면 sayHello() scope Object에 생성 됨

일반함수의 this 는 window(즉, global scope)

 

[예제2]

 

msg에 this 를 붙이면 obj의 객체에 msg 가 생성된다.

 

● 객체 멤버 상속

- 하위 생성자 함수는 상위 생성자 함수를 명시적으로 호출해야하는 생성자 체이닝이 필요

- 생성자 함수의 프로토타입 객체에 superconstructor라는 이름의 프로퍼티를 추가해 상위 생성자 함수를 참조하면 apply()나 call()함수를 사용하지 않고도 생성자 체이닝을 구현할 수 있음

 

※ sayHello.prototype 객체에 superconstructor라는 이름의 프로퍼티를 추가!

 

function 문은 Car 밑에서 해야함 function literal은 어디든 상관 무, 두 함수의 생성 시점이 다름.

 

* 시험문제 >> Car.prototype.constructor = Car;