자바스크립트 this, bind 가 뭘까

------ ------ ------ ------ ------ ------  
 This와 Bind
------ ------ ------ ------ ------ ------ 

----- this -----
전역
 - this는 window 객체

개발자도구에서 아무것도 안하고 콘솔에 this를 입력하면 window를 리턴해준다!!

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

 ** 이제 this는 각자 자기가 만든 함수단위에서 많이 쓸텐데 이게 중요함
 
-- 전역 함수

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

main();

 

 

윈도우가 찍힌당

콘솔에 전역으로 함수 main을 하나 만들고 this를 찍어보면 window가 나옴!!

-- 객체

 

그렇다면 얘를 객체 안에 함수를 넣어서 돌려보면 우짤까??

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

const aa = { a: 'aa', main }
aa.main();

==> this => aa호출

오 ㅋ.. window가 아니라 aa 객체에 main 함수를 실행하니까

main 함수 안에 console.log(this)가 실행되니까

this가 aa 객체가 튀어나오네용!!!!
위에 한번 언급한 것 처럼 this는 함수를 호출한 객체이다!! 요게 증명됐구용.

간단히 보면 aa.main() 이렇게 선언을 하니까 main 입장에서 this 는 aa가 되는거죵.

 

이게 어떻게 실제 사용 할 때 쓰여질까 싶은데 아래에 간단 예시를 하나 넣어봤음

const aa = {
    msg: '얼럿 메시지', 
    alertMsg: function() {
        alert(this.msg)
    }
}

aa.alertMsg();

간단히 보면 aa라는 객체 안에 msg, alertMsg라는 요소들이 있고

alertMsg 함수가 실행되면 alert을 띄우는데 노출되는 메시지를 this.msg로 가져오도록 해놓음.

이렇게 사용하면 본인을 호출한 객체 내에 선언된 다른 변수에 접근을 해서 가져다 쓸 수 있는 장점이 있는 것..

계쏙 반복되는 동일 작업이라면 함수 하나를 선언해놓고 걔를 this에서 가져다 쓴다거나(validate 같은..) 활용이 가능!!

 

---

----- bind -----

바인드는 뭐 여러 복잡한 세부 내용이 있겠지만,, 여기서 설명하는건 단순히 this 값을 내가 원하는대로 1회!!만 변경 해줄 수 있는것 정도로 이해하려고 함.. 예시로 바로 보여주면

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

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

위에 함수를 실행하면 기존에 this 를 설명할 때 전역 함수에 this는 window라고 말했으니

위에 main 함수 까지만 보면 window가 나와야 하는건데

밑에서 다른 객체 값으로 바인드를 진행하고 실행을 해보면

위와 같은 결과값이 리턴되는데 내가 하다보면서 궁금해서 bind 이후에 main을 한번 찍어보니 main 자체가 바뀌는건아니고

main에 대해서 bind할 값을 mainBind로 받아서 사용을 해야 원하는대로 bind가 이루어짐!!! main 함수 자체가 변경되진 않고

 

그러면 위에서 this를 설명할 때 this는 함수를 호출한 객체라고 설명했는데

바인드 하고나서 호출하면 어떤 결과가 나오는지 한번 볼게용

 

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

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

const object = {
    mainBind,
};

object.mainBind();

위 처럼 object 객체에 함수를 넣고 실행을 해보면!!

 

자기를 불러준 객체가 this가 되는게 아니고 bind 된 값이 this 인걸로 증명댐..

이런건 나중에 일하다가 this를 찍었는데 자꾸 자기 객체 안보고 이상한게 this로 찍히면 bind가 된 게 아닌가 의심을 해볼만 할듯함!!

 

* 단 bind는 1번만 가능
* 화살표 함수는 bind 불가함