JavaScript - 생성자 함수

개요

생성자 함수의 정의

생성자 함수를 통해 객체, 인스턴스를 생성하는 방법

 

1. function 키워드 사용

2. this 키워드로 인스턴스의 속성(프로퍼티) 정의

3. new 연산자를 통해 인스턴스 생성

---

 

생성자 함수는 관례적으로 이름이 대문자로 시작

인스턴스 : 생성자 함수로 만들어진 객체
this.~ :  생성될 각 인스턴스의 프로퍼티 접근 및 정의
new 연산자 : new 연산자와 함께 사용
생성자 함수에서는 메서드 정의 불가

생성자 함수 정의

인스턴스 생성

객체 프로퍼티에 접근

 

JS에서 메서드

메서드 (Methods)

JavaScript에서 메서드는 객체의 프로퍼티로 할당된 함수입니다. 객체의 데이터와 기능을 연결하며, 해당 객체의 컨텍스트(this)에서 실행됩니다.

 

---

예시:

 

javascript

Copy code

let 객체 = {

  데이터: "Hello",

  메서드: function() {

    console.log(this.데이터);

  }

};

 

객체.메서드(); // "Hello" 출력

---

 

객체의 프로퍼티로 올 수 있는 함수

객체의 프로퍼티로 할당된 함수는 기본적으로 메서드로 간주. 하지만, 메서드가 아닌 단순한 함수 형태로도 사용할 수 있습니다.

이 경우, 함수는 해당 객체와 특별한 컨텍스트(this) 연결을 갖지 않고, 독립적인 기능을 수행합니다.

---

예시:

 

javascript

Copy code

let 객체 = {

  함수: function() {

    console.log("단순한 함수 호출");

  }

};

 

객체.함수(); // "단순한 함수 호출"

// 이 경우 객체.함수는 객체의 컨텍스트와 연결되어 있지 않음

이러한 함수는 객체의 데이터와 직접적인 상호작용을 하지 않고, 단순히 객체의 프로퍼티로 존재하는 독립된 함수로 볼 수 있습니다.

 

new 를 붙이지 않은 생성자는 undefine 반환

 

new 연산자를 붙여 줌 으로 그냥 함수가 아닌 생성자 함수라는 것을 표시 - 및 동작 됨

 

function 으로 선언된 함수는 기본적으로 생성자 함수의 기능을 갖는다. = 다른 function 이여도 new를 붙일시 객체를 반환한다.

new 을 붙여서 생성자 함수로 사용하는 것

객체를 반환하는 함수와 생성자 함수의 다른 점은?

 

this 바인딩

 자바스크립트에서 this 키워드가 어떤 객체를 참조하는지 결정하는 과정

this의 값은 함수가 호출되는 방식에 따라 결정

 

 이는 자바스크립트의 유연성을 보여주는 중요한 특징 중 하나

 

결국 this 바인딩을 통해 생성자 함수로 생성될 객체의 프로퍼티를 정의할 수 있다.

 

new를 사용하는 경우

1. 새 객체 생성: new를 사용하여 생성자 함수를 호출하면 자바스크립트는 먼저 빈 객체를 생성합니다.
2. this 바인딩: 생성된 빈 객체는 생성자 함수 내부의 this에 바인딩됩니다. 따라서 생성자 함수 내에서 this를 사용하여 속성을 추가하면 모두 새 객체에 추가됩니다.
3. 프로토타입 연결: 생성된 객체는 생성자 함수의 prototype 속성을 상속받습니다. 이는 모든 인스턴스가 생성자 함수의 프로토타입을 공유할 수 있게 합니다.
4. 객체 반환: 생성자 함수의 실행이 끝나면 this에 바인딩된 새 객체가 반환됩니다. 명시적으로 다른 객체를 반환하지 않는 이상 이 객체가 최종 결과가 됩니다.

 

함수가 기본적으로 생성자 함수의 기능을 갖는 이유

자바스크립트에서 함수는 객체입니다. 이는 모든 함수가 생성자 함수로 사용될 수 있다는 것을 의미합니다. 자바스크립트의 함수는 Function 객체의 인스턴스이며, Function.prototype에는 생성자로서 사용될 때 필요한 메소드와 속성이 정의되어 있습니다.

 

즉 함수도 객체 며 모든 함수가 생성자 함수로 사용가능

함수는 Function의 인스턴스이다.

 

프로토타입

자바의 클래스

JS에는 클래스가 없었음 대신 프로토타입 기능

사용성 측면에서 번거롭지만, 강력한 점이 있음 (자바의 클래스도 프로토타입에 기능을 추가한 것)

생성자 함수와 객체가 프로토타입을 통해 유기적으로 연결됨 - (예시. 프로토타입을 사용하여 함수 프로퍼티 추가 )

이후 배울 상속도 프로토타입을 이용함

 

생성자 함수와 그냥 함수, 리터럴 차이점

생성자 함수 : YalcoChicekn

리턴값이 객체인 함수  : createYalcoChicken

객체 리터럴 ( 그냥 선언 ) : chain1

3개의 차이점

 

 

 

new 생략 실수 방지 방법

 

( 리턴 값에 new 을 사용하여) new 를 사용하지 않고 생성자 함수를 호출 할 경우 자동으로 new를 붙여줌