객체2. this와 생성자(constructor)

목차

1. this란?
2. 생성자란?(Constructor)

 

 

 

1. this란?

• 현재 코드가 동작되고 있는 해당 객체를 가리킴
• 하나 이상의 객체에서 생성된 모든 객체에 대하여 같은 메서드 속성/메서드를 사용할 수 있게 해줌
• (단, 각각의 객체의 속성에 부여된 값에 따라 반환 값은 다르다)

 

 

가령, 아래와 같은 person1과 person2라는 객체가 있다고 가정해보자.

아래의 코드에서 보다시피 두 객체의 속성명은 동일하다.

 

const person1 = {
    name: {
        first: 'Conan',
        last: `O'brien`
    },
    age: 59,
    bio: function() {
        console.log(`${this.name['first']} ${this.name['last']} is ${this.age} years old.`);
      }
}


const person2 = {
    name: {
        first: 'Conan',
        last: 'Edogawa'
    },
    age: 8,
    bio: function() {
        console.log(`${this.name['first']} ${this.name['last']} is ${this.age} years old.`);
      }
}

 

그렇다면, bio메서드를 호출해서, 두 객체의 this.속성들이 어떤 값을 반환하는 지 확인해보자

person1.bio()		//Conan O'brien is 59 years old.
person2.bio()		//Conan Edogawa is 8 years old.

 

 

각각의 경우에서 둘은 완전히 동일한 메서드의 코드를 가졌음에도 불구하고 다른 결과값이 반환된다.

 

this는 현재 실행중인 코드가 속해있는 객체를 나타내므로

 

this 키워드 사용 시에는

객체의 속성.메서드의 context가 변경(동적으로 객체 생성)되는 경우에도, 언제나 의도한 값을 사용 할 수 있다.

 

(쉽게 말해, 아직 객체가 생성되지 않은 경우라 할 지라도 생성 예정 인 객체의 속성을 사용할 수 있게 해준다!)

 

 

 

2. 생성자(Constructors)

• 생성자는 new라는 키워드를 사용하여 호출되는 함수
• 생성자 호출 시

• 새로운 객체 생성
• 새로운 객체를 this로 묶어서, 생성자 코드 내부에서 this 사용 가능
• 생성자 내에서 코드 실행
• 새로운 객체 반환

 

<참고>
생성자는 관례적으로 대문자로 시작하며 생성한 객체의 유형에 따라 이름 붙여짐

 

2-1. 생성자를 통해 객체 생성해보기

(1) 생성자 선언

function Person (name,bio){
    this.name = name;
    this.introduceSelf = function() {
        console.log(`Hi! I'm ${this.name}.`);
      }
}

 

(2) new 키워드로 생성자 호출

const person1 = new Person(`Conan O'brien`);
console.log(person1.name);	//Conan O'brien
person1.introduceSelf();		//Hi! I'm Conan O'brien.