Javascript - this, bind

Hong·2022년 11월 4일
0

😭
과제하다가 this라는걸 보게되었는데 뭔지 모르겠더라
그런데 this옆에는 보통 bind라는 녀석이 항상 붙어있었다.

전에 this가 무엇인지 검색했을 때 누가 "'이거'라고 생각하시면 됩니다." 라고 적은 글을 본적이 있는데
그러니까 이거가 뭡니까..



👉🏻 this

 let A = {  
    prop: 'Hello',
    sayHello: function() {
        console.log( this.prop );
    }
};
 
A.sayHello(); //"Hello"

자바스크립트에서 객체 안의 메소드 thisthis자체가 포함된 object를 가리킨다.
다시 정리하자면, this는 this가 포함되어 있는 객체 A를 의미한다.


그런데 이런 경우는 어떨까?

let A = {  
    prop: 'Hello',
    sayHello: function() {
        console.log( this.prop );
    }
};

let B = A.sayHello();
console.log(B); // undefined

이번에는 A의 sayHello()를 B라는 변수에 넣어 출력해보면 undefined가 출력되는 것을 확인할 수 있다.
그 이유는 바로 변수 B에 A.sayHello가 담길 때 sayHello()와 A와의 관계가 상실됐기 때문이다.

내가 생각할 때 유실된 이유가 자바스크립트에서 객체가 참조값으로 분류되기 때문인것 같다.

이럴때 필요한 것이 바로 "bind"이다.




🔗 bind

bind는 묶다라는 뜻이 있다.

코딩에서 bind는 두 데이터의 소스를 일치시키는 방법을 의미한다.

let A = {  
    prop: 'Hello',
    sayHello: function() {
        console.log( this.prop );
    }
};
 
let B = A.sayHello.bind(A); //이렇게 적어줌으로써 B가 바라보는 값과 A가 바라보는 참조값을 같게 만들어준다.
console.log(B); // Hello

A.sayHello()를 전달할 때 A.sayHello.bind(A)와 같이 A까지 바인딩시켜서 보냈다.







참고했다
https://www.youtube.com/watch?v=PAr92molMHU
https://velog.io/@zinukk/%EB%B0%94%EC%9D%B8%EB%94%A9

profile
Notorious

0개의 댓글