bind 함수 구현

우연히 유튜브 영상을 시청 중 유튜버 바닐라코딩님의 영상 중 "라이브 코딩 테스트 'Bind 함수' 구현이라는 영상을 보게되었다.

https://youtu.be/xR2YkQxOtI4

 

 

■ 문제

 

function bind(fn, context){
	// TODO...
}

const obj = { title: "vaco" };

function logTitle(){
	console.log(this.title)
}

const fn = bind(logTitle, obj);

 

■ 정답#1

 

function bind(func, context){
    return () => func.call(context);
}

function myFunc(){
    console.log("text: " + this.text);
}

const obj = { text : "HELLO" };

const func = bind(myFunc, obj);

func();

 

위와 같이 영상에서 위 문제를 푸신 분은 외와 같이 call 메서드를 이용해 console.log를 출력하는 함수를 래핑하였고, this를 강제로 바인딩시켰다. call, apply, bind는 this의 값을 강제로 연결해준다는 부분에 있어서 형제같은 느낌이다. call 메서드를 사용하지 않는 방법은 없을까? 

 

■ 정답#2

 

function bind(func, context){
    this.text = context.text;
    return () => func.call(context);
}

function myFunc(){
    console.log("text: " + this.text);
}

const obj = { text : "HELLO" };

const func = bind(myFunc, obj);

func();

 

전역객체에 text 프로퍼티를 넣어버리는 것이다. 그런데 전역객체에 굳이굳이 넣을 필요가 없을 것 같다. 그리고 단순한 기능을 위해 전역객체를 조작하는건 좋지 않은 것 같다.

 

---

 

★주의할 부분★

 

■ 정답#3 (화살표 함수)

 

const bind = (func, context) => {
    this.text = context.text;
    return () => func();
}

const myFunc = () => {
    console.log(this); 
    console.log("text: " + this.text);
}

const obj = { text : "HELLO" };

const func = bind(myFunc, obj);

func();

 

역시 전역객체(window)에 프로퍼티를 추가한 케이스이다.

 

함수 호출방식

1. 일반함수 호출

     1-1. 함수 표현식 : this → 전역객체(window)

     1-2. 함수 선언식

2. 메서드 호출

3. 생성자 함수 호출

4. 화살표 함수 호출 : this → 전역객체(window)

 

- 일반한수는 호출방식에 따라 this가 가르키는 객체가 다르다. 화살표 함수는 자신이 선언된 곳에서 스코프 체인으로 this를 찾는다. 그렇기 때문에 정적이다라고 말하는 것이다. 

 

1. 일반 함수: 함수 표현식, 함수 선언식

 

2. 화살표 함수: 함수 표현식