JavaScript 프로토타입(prototype)

프로토타입과 상속

자바스크립트는 프로토타입(prototype) 기반 상속을 지원하는 객체 지향 프로그래밍 언어입니다.

자바와 같은 클래스 기반 언어와는 달리 자바스크립트는 모든 객체가 다른 객체를 상속받을 수 있는 프로토타입 체인(prototype chain)을 사용합니다.

 

프로토타입 객체란?

프로토타입 객체는 생성자 함수로 생성된 모든 인스턴스에 상속하려는 속성과 메서드를 정의하기 위한 부모 객체입니다.생성자 함수를 정의하면 자바스크립트 엔진은 생성 단계에서 생성자 함수와 연결된 프로토타입 객체를 자동으로 생성합니다.

 

프로토타입 체인

모든 자바스크립트 객체의 최상위 부모 객체는 Object 프로토타입 객체입니다.

 

_proto_ 와 prototype 프로퍼티

• _proto_ 프로퍼티는 생성된 인스턴스의 부모(프로토타입)를 참조합니다.
• prototype 프로퍼티는 생성자 함수의 프로토타입을 참조합니다.

 

프로토타입 상속 활용

생성자 함수안에서 메서드를 정의하지 않고 생성된 인스턴스들이 상속받을  수 있도록 프로토타입 객체에 메서드를 추가하는 것이 좋습니다. 이렇게 하면 동적으로 메서드를 추가할 수 있습니다.

 

 

 

Object.prototype 객체

모든 자바스크립트 객체의 최상위 객체인 Object.prototype 객체에는 모든 자바스크립트 인스턴스가 사용할 수 있는 공통적인 속성과 메서드가 정의되어 있습니다.

 

Function.prototype 객체

일반 함수와 생성자 함수의 최상위 객체는 Function.prototype 객체입니다.

주요 메서드로 call() , apply() , bind() 가 있습니다.

 

 

call() , apply() , bind() 메서드

자바스크립트의 Function.prototype 객체에는 call() , apply() , bind() 메서드가 있습니다. 이 메서드들은 함수를 호출할 때 this 값을 지정하거나 함수를 간접적으로 호출하는 데 유용합니다.

 

call() :

call() 메서드는 함수 호출 시 첫 번째 인자로 전달된 객체를 this 로 바인딩하고 그 다음 인자로 전달된 값을 함수의 매개변수로 사용합니다.

 

greet 함수는 this가 person 객체에 바인딩되고 'Hello' 와 '!' 가 각각 greeting , punctuation 매개변수로 전달 됩니다.

 

apply() : 

apply() 메서드는 call() 과 거의 동일하지만 함수 매개변수를 배열로 전달합니다.

greet 함수는 this 가 person 객체로 바인딩되고 ['Hello' , '!'] 배열이 각각 greeting , punctuation 매개변수로 전달됩니다.

 

bind() : 

bind() 메서드는 새로운 함수를 생성하고 첫 번째 인자로 전달된 객체를 this 로 바인딩합니다.

또한 미리 매개변수를 설정할 수 있으며 나중에 호출할 때 추가 매개변수를 전달할 수 있습니다.

greet 함수는 새로운 함수 boundGreet로 바인딩되며, this가 person 객체로 설정되고, 'Hello'가 미리 매개변수로 설정됩니다. 이후 boundGreet를 호출할 때 '!'를 추가 매개변수로 전달합니다.

 

비교

• call() 과 apply() 는 즉시 함수를 호출하지만 bind() 는 새로운 함수를 반환합니다.
• call() 은 개별 인자로 매개변수를 전달하고 apply() 는 배열로 매개변수를 전달합니다.
• bind() 는 함수를 호출하지 않고 특정 this 값을 바인딩한 새로운 함수를 생성합니다.

요약

• call() : 함수를 호출하면서 this 값을 설정하고 인자를 개별적으로 전달
• apply() : 함수를 호출하면서 this 값을 설정하고 인자를 배열로 전달
• bind() : this 값과 인자를 설정한 새로운 함수를 생성

각 메서드는 특정 상황에서 유용하며 this 값을 명시적으로 설정할 필요가 있을 때 사용됩니다.