[JavaScript] this, bind

this : 객체를 가리키는 키워드

'this는 함수를 호출한 객체이다'

 

입력

함수 안에 있는 this 값은 함수를 호출한 객체이다.

아래 코드에서 main() 함수를 직접적으로 호출한 객체는 window이다.

(this 값: window)

function main() {
    console.log(this);
}

main(); // window.main(); 과 같다.

 

출력

Window..

 

 

 

입력

const object = {
    name: "별코딩",
    main: function() {
        console.log(this);
    }
}

object.main();

 

출력

this는 함수를 호출한 객체이다. → 함수를 호출한 객체가 누구인지만 중요하다.

main() 함수는 object라는 객체가 호출시킨 것이다.

{ name: '별코딩', main: [Function: main] }

 

 

입력

this는 객체의 다른 속성에 접근할 때 유용하다. 

const object = {
    name: "별코딩",
    main: function() {
        console.log(this.name);
    }
}

object.main();

 

출력

별코딩

 

 

this는 함수가 정의된 위치나 방법에 영향을 받지 않는다.

 

입력

function main() {
    console.log(this);
}

// 바깥에 있는 함수를 객체의 메서드로 넣어준다.
const object = {
    name: '별코딩',
    main: main,
    // 키와 값이 똑같은 이름이므로 생략 가능하니 아래와 같이 적어도됨
    // main,
}

object.main();

function main() {
    console.log(this);
}

const object = {
    name: '별코딩',
}

object.main = main;

object.main();

 

출력

{ name: '별코딩', main: [Function: main] }

 

 

입력

function main() {
    console.log(this);
}

const object = {
    name: '별코딩',
    smallObject: {
        name: '작은 별코딩',
        main,
    },
};


object.smallObject.main();

 

출력

{ name: '작은 별코딩', main: [Function: main] }

 

 

this 값을 일일히 추적하는 것은 비효율적이다. 

this 값이 바뀌지 않도록, 원하는 객체로 고정하고 싶다면 bind()를 사용한다.

 

입력

function main() {
    console.log(this);
}

const mainBind = main.bind({name: 'hi'});
mainBind();

 

출력

{ name: 'hi' }

 

 

 

입력

function main() {
    console.log(this);
}

const mainBind = main.bind({name: 'hi'});
mainBind();

const object = {
    mainBind,
};

object.mainBind();

 

출력

mainBind() 를 호출한 객체는 object임에도 불구하고 아래와 같은 결과가 나온다.

{ name: 'hi' }
{ name: 'hi' }

 

bind() - 객체가 this 값으로 설정된 새로운 함수를 반환해준다.

 

 

 

입력

const object = {
    name: '별코딩',
    main: function() {
        console.log(this);
    }.bind({name : '멋진 객체'}),
};

object.main();

 

출력

{ name: '멋진 객체' }