[javascript] this키워드

this 키워드는 사용되는 위치에 따라 this키워드에 바인드 된 객체가 달라짐!

 

콘솔에 this를 입력하면

console.log(this)

출력값

 

함수 안에 넣었을 때

function a() {
    console.log(this)
}

a()

출력값

this는 기본적으로 window를 가리킴!!!!!!!!!

 

객체 메서드

var obj = {
    a: function () {
    console.log(this)
}}


obj.a()

출력값

 

객체 메소드 a안의 this는 객체를 가리킴

이유는 객체의 메소드를 호출할 때 this를 내부적으로 바꿔주기 때문임

 

밑에 자료와 같이 바꿔주면 결과값 달라짐

 

 

명시적으로 this를 바꾸는 함수 메소드는 bind, call, apply를 사용하면 this가 객체를 가리킵니다

 

생성자일 경우!!!!

1. new라는 키워드로 생성자 함수를 호출하지 않는다면

function Person(name, age) {
            this.name = name;
            this.age = age;
        }

        Person.prototype.sayHi = function(){
            console.log(this.name, this.age)
        }

        Person('zeroCho', 25);
        
        console.log(name, age)
        console.log(window.name, window.age)

 

결과값

그냥 함수에서 this는 window를 가리킴 그래서 this.name, this.age는 window.name, window.age가 됨

this가 가리키는게 window가 안되게 하려면 new라는 키워드를 사용해서 생성자 함수를 호출해야 함

 

2. new키워드 사용하여 호출

function Person(name, age) {
            this.name = name;
            this.age = age;
        }

        Person.prototype.sayHi = function(){
            console.log(this.name, this.age)
        }

        let hero = new Person('Hero', 33)
        hero.sayHi();

 

결과값

이렇게 new를 붙이면 this가 생성자를 통해 생성된 인스턴스(hero자신)가 됩니다.