본 정리글은 인프런 김영보 강사님의 자바스크립트 중고급 : 근본 핵심 논리 강의를 수강하고 정리한 글입니다.

자바스크립트 중고급 : 근본 핵심 논리

📖 Function Instance 2

📌 Prototype 확장 방법

• Prototype에 프로퍼티를 연결하여 작성
  -- Prototype.name = value

• name에 프로퍼티 이름 작성

• value에 JS 데이터 타입 작성
  -- 일반적으로 function을 사용

• prototype에 num을 설정하면 확장 불가능

📌 프로퍼티 연결 고려 사항

• prototype에 연결한 프로퍼티가 많을 때
  -- Book.prototype.name1, 2, 3, ..., N 형태는 Book.prototype = {name1 : value, ...} 형태로 작성

• constructor가 지워지는 문제와 대책
  -- {name 1 : value, ...} 형태로 설정한 후 prototype에 constructor를 다시 연결 - 가독성이 좋음

📌 constructor 연결

function Book(){};
Book.prototype = {
 	constructor : Book,
  	setPoint : function(){}
};
var obj = new Book();
log(obj.constructor);

function Book(){}

1. 오브젝트 리터럴 {}을 사용하여 프로퍼티를 연결할 때는 Constructor가 지워지는 것을 고려해야 함

2. Constructor가 없어도 인스턴스가 생성되지만, Constructor가 연결된 것이 정상이므로 코드 처럼 Construcor에 Book function을 할당합니다

📌 Prototype 확장과 인스턴스 형태

• Prototype을 확장하는 방법과 생성한 인스턴스 형태를 살펴 봄

function Book(point){
 	this.point = point; 
};
Book.prototype.getPoint = function(){
  	return this.point;
};
var obj = new Book(100);
obj.getPoint();

obj : {
 	point : 100
  	__proto__ : {
     	constructor : Book,
        getPoint : function(){},
        __proto__ : Object
    }
}

------------------------------------------ prototype 확장 ------------------------------------------

1. function Book(point){}
   -- Book 오브젝트 생성

2. Book.prototype.getPoint = function(){}
   -- Book.prototype에 getPoint 메소드 연결

3. var obj = new Book(100)
   -- 인스턴스를 생성하여 obj에 할당

4. obj.getPoint()
   -- obj 인스턴스의 getPoint() 호출

5. 인스턴스를 생성하면 prototype에 연결된 메소드를 인스턴스.메소드이름() 형태로 호출
   - obj.proto.getPoint()로 호출해도 되긴 하는데 생략해도 됨 -> obj.getPoint()

📌 this로 인스턴스 참조

• this로 메소드를 호출한 인스턴스 참조
  -- var obj = new Book()
  -- obj.get() 형태에서 this로 obj 참조

• 인스턴스에서 메소드 호출 방법
  -- prototype에 연결된 프로퍼티가 proto에 설정되며 인스턴스 프로퍼티가 된다
  -- this.prototype.setPoint() 형태가 아닌, this.setPoint() 형태로 호출

📌 this와 prototype

function Book(){
  	log("1: ", this.point);
};
Book.prototype.getPoint = function(){
  	this.setPoint();
  	log("2 : ", this.point);
};
var obj = new Book();
obj.getPoint();

1 : undefined
2 : 100

• console.log("1 : ", this.point)
  -- 생성자 함수에서 this는 생성하는 인스턴스 참조
  -- 생성하는 인스턴스에 point 프로퍼티가 없더라도 에러가 나지 않고 undefined 반환

• obj.getPoint()
  -- this가 메소드를 호출한 인스턴스 참조
  -- 즉, 메소드 앞에 작성한 인스턴스 참조

• this.setPoint()
  -- this가 인스턴스를 참조하며, 인스턴스에 있는 setPoint() 호출

• this.point = 100
  -- this가 메소드를 호출한 인스턴스 참조
  -- 즉, 메소드 앞에 작성한 인스턴스 참조

📌 prototype 메소드 직접 호출

function Book(point){
  	this.point = point;
};
Book.prototype.getPoint = function(){
  	return this.point;
};
var obj = new Book(100);
log(obj.getPoint());
log(Book.prototype.getPoint());

100
undefined

• Book.prototype.getPoint()
  -- 인스턴스를 생성하지 않고 직접 메소드 호출

• Book.prototype을 getPoint()에서 this로 참조

• obj 인스턴스에는 point가 있지만 Book.prototype에는 point가 없으므로 undefined 반환
  -- 인스턴스를 생성하여 메소드를 호출하는 것과 직접 prototype을 작성하여 호출하는 것의 차이

📌 프로퍼티 공유 시점

• 사용하는 시점에 prototype의 프로퍼티 공유

• prototype의 프로퍼티로 인스턴스를 생성하지만 인스턴스의 프로퍼티는 원본 prototype의 프로퍼티를 참조
  -- 복사하여 인스턴스에 갖고 있는 개념이 아니다

• 인스턴스의 메소드를 호출하면 원본 prototype의 메소드를 호출

• 원본 prototype에 메소드를 추가하면 생성된 모든 인스턴스에서 추가한 메소드 사용가능
  -- 원본 prototype의 메소드를 호출하기 때문

function Book(){
  	this.point = 100;
};
var obj = new Book();
log(obj.getPoint);
Book.prototype.getPoint = function(){
 	return this.point; 
};
var result = obj.getPoint();
log(result);

undefined
100

1. var obj = new Book()

• 인스턴스를 생성하여 obj 할당

2. console.log(obj.getPoint)

• obj 인스턴스에 getPoint()가 없음

3. Book.prototype.getPoint = function(){
   return this,point
   }
   -- Book.prototype에 getPoint() 추가
   -- 앞에서 생성한 obj 인스턴스에서 getPoint 사용 가능

4. var result = obj.getPoint()
   -- 인스턴스 생성 당시에는 obj에 getPoint가 없었지만, getPoint()를 호출하기 전에 Book.prototype에 getPoint를 추가했으므로 호출 가능

5. return this.point
   -- 추가 하더라도 this가 인스턴스 참조

6. 이런 특징을 활용하여 상황(필요)에 따라 메소드를 추가
   -- 역동적인 프로그램 개발 가능

📌 인스턴스 프로퍼티

obj 인스턴스 : {
 	point : 100,
    getPoint : function(){},
    __proto__ : {
     	getPoint : function(){} 
    }
}

• prototype에 연결된 프로퍼티도 인스턴스 프로퍼티가 됩니다
  -- 직접 인스턴스에 연결된 프로퍼티와 차이 있음

• 인스턴스의 프로퍼티를 prototype으로 만든 인스턴스 프로퍼티보다 먼저 사용

• 인스턴스마다 값을 다르게 가질 수 있음
  -- 인스턴스를 사용하는 중요한 목적

📌 인스턴스 프로퍼티 우선 사용

function Book(point){
	this.point = point;
};
Book.prototype.getPoint = function(){
  	return 100;
};
var obj = new Book(200);
obj.getPoint = function(){
  	return this.point;
};
log(obj.getPoint());

200

Obj 인스턴스 = {
 	getPoint : function(){
     	return this.point 
    }
  	__proto__ : {
  		getPoint : function() {
         	return 100 
        }
	}
}

1. Book.prototype.getPoint = function(){
   return 100
   }
   -- prototype에 getPoint 연결
   -- 인스턴스의 getPoint()를 호출하면 100 반환

2. obj.getPoint = function(){
   return this.point
   }
   -- 생성한 인스턴스에 getPoint 연결
   -- 함수가 호출되면 200 반환

3. obj 인스턴스 구성 형태

4. obj.getPoint()
   -- obj 인스턴스의 getPoint() 호출
   -- prototype의 getPoint()가 호출되지 않고 인스턴스의 getPoint()가 호출 됨
   -- 인스턴스에 연결한 프로퍼티를 먼저 사용하기 때문

5. 인스턴스 프로퍼티는 공유되지 않는다

6. Class 접근
   -- 설계 중요
   -- OOP 개념의 이해 필요