자바스크립트-new 연산자와 생성자 함수

new 연산자와 생성자 함수

-생성자 함수

생성자 함수와 일반 함수의 기술적인 차이는 없다. 하지만 두 관례가 있다.

1. 함수의 첫 글자는 대문자
2. 반드시 'new' 연산자를 붙여 실행

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}


let user = new User("보라");

alert(user.name); // 보라
alert(user.isAdmin); // false

위 코드에 있는 주석은 new User가 실행되면 무슨 일이 일어나는지를 써 놓은 것이다.

this 객체가 암시적으로 만들어지고 마지막에 this가 리턴된다.

 

• new를 붙여 실행하면 모든 함수는 생성자 함수가 될 수 있다.

-재사용할 필요가 없는 객체를 만드는 법

let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // 사용자 객체를 만들기 위한 여러 코드.
  // 지역 변수, 복잡한 로직, 구문 등의
  // 다양한 코드가 여기에 들어갑니다.
};

익명 생성자 함수로 감싸주는 방식을 사용한다.

익명 함수라서 어디에도 저장되지 않는다. 그리고 재사용이 불가능하다.

 

-생성자와 return문

생성자 함수엔 보통 return 문이 없다. 반환할 것들을 this에 저장되고, this는 자동적으로 반환되기 때문에 명시적으로 쓸 필요가 없다.

만약 return 문이 있으면 발생하는 일

1. 객체를 return하면 this 대신 객체가 반환
2. 원시형을 return하면 return문이 무시

function BigUser() {

  this.name = "원숭이";

  return { name: "고릴라" };  // <-- this가 아닌 새로운 객체를 반환함
}

alert( new BigUser().name );  // 고릴라

이 코드에선 객체가 반환된다.

 

function SmallUser() {

  this.name = "원숭이";

  return; // <-- this를 반환함
}

alert( new SmallUser().name );  // 원숭이

아무것도 하지 리턴하지 않으면 this가 반환된다.

 

-생성자 내 메서드

생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성 가능하다 이는 엄청난 유연성이 확보된다.

지금까잔 this에 프로퍼티를 더해주는 예시만 봤는데 메서드도 더해줄 수 있다.

 

function User(name) {
  this.name = name;

  this.sayHi = function() {
    alert( "제 이름은 " + this.name + "입니다." );
  };
}

let bora = new User("이보라");

bora.sayHi(); // 제 이름은 이보라입니다.

/*
bora = {
   name: "이보라",
   sayHi: function() { ... }
}
*/

new User(name)은 프로퍼티 name과 메서드 sayHi를 가진 객체를 만들어준다.

 

-예시

1번 계산기

• read() – prompt 함수를 이용해 사용자로부터 값 두 개를 받고, 이를 객체 프로퍼티에 저장합니다.
• sum() – 프로퍼티에 저장된 값 두 개를 더한 후 반환합니다.
• mul() – 프로퍼티에 저장된 값 두 개를 곱한 후 반환합니다.

function Calculator() {
    this.read = function() {
        this.a = +prompt('a?', 0);
        this.b = +prompt('b?', 0);
    };
    this.sum = function () {
        return this.a + this.b;
    };
    this.mul = function() {
        return this.a * this.b;
    };
}

let calculator = new Calculator();
calculator.read();

alert( "Sum=" + calculator.sum() );
alert( "Mul=" + calculator.mul() );

객체 안에 함수 만드는거 다시 공부

 

2번 누산기

생성자 함수 Accumulator(startingValue)를 만들어 보세요.

Accumulator(startingValue)를 이용해 만드는 객체는 아래와 같은 요건을 충족해야 합니다.

• 프로퍼티 value에 현재 값(current value)을 저장합니다. 최초 호출 시엔 생성자 함수의 인수, startingValue에서 시작값(starting value)을 받아옵니다.
• 메서드 read()에선 prompt 함수를 사용해 사용자로부터 숫자를 받아오고, 받은 숫자를 value에 더해줍니다.

프로퍼티 value엔 startingValue와 사용자가 입력한 모든 값의 총합이 더해져 저장됩니다.

 

function Accumulator(startingValue) {
    this.value = startingValue;

    this.read = function () {
        this.value += +prompt("입력");
    };
}

let accumulator = new Accumulator(1); // 최초값: 1

accumulator.read(); // 사용자가 입력한 값을 더해줌
accumulator.read(); // 사용자가 입력한 값을 더해줌

alert(accumulator.value); // 최초값과 사용자가 입력한 모든 값을 더해 출력함