JavaScript - this

👆 this..?

this는 객체를 가리키는 키워드로 this가 가리키는 객체는 상황에 따라 다르다.
this는 함수를 호출한 객체이다.

🌎 전역 문맥

console.log(this) // Window {...} => 브라우저에 대한 정보를 가지고 있는 전역 객체

전역적인 문맥에서 this에 접근하면 use strict와는 상관없이 this는 윈도우 객체가 된다.

🌃 함수 문맥

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

함수 내부에 있는 this는 함수를 어떻게 호출했느냐에 따라 값이 달라진다.
자바스크립트 내에서 함수를 정의하게 되면 함수는 window 객체에 등록이 된다.
전역적으로 함수를 호출하면 main() = window.main()과 같다. main 함수는 window 객체 내부의 함수이기 때문..

하지만 use strict를 사용하면서 main()만 호출한다면 결과는 undefined이다.
window 객체를 얻고 싶다면 window.main()으로 호출해야한다.

const object = {
	name: 'Mia',
    main: function() {
    	console.log(this);
    }
};

object.main(); // {name: 'Mia', main: f}

객체의 다른 속성에 접근할 때 유용하다. (this.name => Mia)
this는 함수를 호출한 객체이기 때문에 this는 함수를 호출한 객체만 생각하는 것이다.

const main2 = object.main;
main2(); // Window {...}

왜..? 👉 main2를 호출한 객체는 object가 아니기 때문에!!

this는 함수가 정의된 위치나 방법에 영향을 받지 않는다.
main함수를 먼저 정의하고 그 이후에 객체를 만든 후 객체의 구성원으로 main을 포함해주어도 this는 object객체가 된다.
함수가 object 안에서 정의되어도, 밖에서 정의되어도 상관없이 main 함수를 호출한 객체가 object라면 this는 object가 된다.

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

const object = {
	name: 'Mia',
    main,
};

object.main(); // {name: 'Mia', main: f}

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

const object = {
	name: 'Mia',
};

object.main = main;
object.main(); // {name: 'Mia', main: f}

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

const object = {
	name: 'Mia',
    smallObject: {
    	name: "small Mia"
        main,
    }
};

object.smallObject.main(); // {name: 'small Mia', main: f}

🎀 bind

동적으로 바뀌는 this값을 일일이 추적하는 일은 무척이나 번거로운 일이다.
함수를 누가 호출하던 어떻게 호출하던 this값이 바뀌지 않도록 this값을 고정해주기 위해서는 bind를 사용하면 된다.

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

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

mainBind(); // {name: 'hi'}

const object = {
	mainBind,
};

object.mainBind(); // {name: 'hi'}

🚨 주의! 이미 bind한 것을 또 bind할 수 없다.
bind에 추가로 bind하면 후에 bind한 부분을 무시해버린다.

const mainBindBind = mainBind.Bind({});
mainBindBind(); // {name: 'hi'}

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

🎉 이벤트 처리기

const button = document.getElementById('btn');
button.addEventListener('click', function() {
	console.log(this);
}) 
// <button id="btn">버튼</button>

const button = document.getElementById('btn');
button.addEventListener('click', function(event) {
	console.log(event.target === this);
}) 
// true