this

this 라는 놈은 꽤나 지독하다..

IE 때문에 우시더니 외..외!!! 눈물을 흘리시ㄴr요 ...
" dis.. 때문입니다 .."

this가 왜 싫나요.

foo 함수 안에서 출력되는 this와 setTimeout의 인자로 callback 함수에서의 this는 같을까요 다를까요?

같다면 싫어할 이유도 없을 것입니다.

foo 함수 안에서 출력되는 this는 person 이고 setTimeout의 callback의 this는 window 랍니다..

person.foo(function(){
  console.log(`hi! my name is ${this.name}`);

위 함수에서 출력되는 값은
1.hi! my name is (브라우저 환경)
2.hi! my name is undefined(node.js 환경)

입니다.

이렇게 this 바인딩은 함수 호출 방식에 따라서 동적으로 (window 가 되기도 하고..호출할 인스턴스가 되기도 하고 왔다리 갔다리한다.) 결정된다.

this를 쓰려면 이렇게 고민해야하는것을 !!! 개발자로서 this를 안보고 살 순 없을까?

프로젝트하면서 이리저리 쓰게 되더라고요 흑흑 🥲 API 를 끌어올 때 클래스로 하면 정말 편리해서 this를 쓸 수 밖에 없더라구요 흑흑 🥲

바인딩 혹은 binding

서론이 길고 길었다.
그래서 this를 바인딩 한다는 것은 어떤 의미일까?

다시 이 코드를 가져왔다. 우리는 분명, hi! my name is kim 이런 형식을 원했을 것이다. this를 가르킬 객체를 연결해주는 것이 바인딩 인 것이다.

함수호출 방식과 this 바인딩

1. 일반 함수 호출되는 경우

function foo(){
	console.log("foo's this : ", this);
}
foo()

위와 같이 일반함수로 호출하는 경우 함수 내부의 this는 전역객체 (window) 가 자동적으로 바인딩된다.

2. 메서드로 호출되는 경우

const person={
  name: 'lee',
  getName(){	
  	return this.name;
	}
};

console.log(person.getName());

메서드로 호출 된 경우에는 메서드를 호출한 객체 (person) 에 자동적으로 바인딩된다.

3. 생성자 함수 호출되는 경우

function Circle(radius){
  this.radius = radius;
  this.diameter=function(){
    return 2*this.radius;
  };
}

const circle = new Circle(5);

생성자 함수로 호출 되는 경우에는 미래에 생성할 인스턴스가 바인딩된다.
만약, new Circle(5)이 아닌, Circle(5)로 호출한다면 일반함수 호출이 되어 this는 전역객체가 할당된다.

4. call / apply / bind 되시겠다.

call, apply, bind 는 Function.prototype 의 메서드다.

call, apply

call과 apply 모두 obj를 this 에 바인딩시켜주는 것은 동일하다.
두 개의 차이점은 arguments를 출력해보았을 때, apply는 배열로 넣어도 객체로 알아서 풀어주고, call은 직접 풀어서 객체에 넣어주어야 한다는 것이다.

정리 !
첫 번째 인자로 받은 객체를 this 에 바인딩시켜주는 것은 동일하지만 arguments 를 어떻게 전달하느냐가 다르다.

bind

bind 또한 call, apply 와 동일하게 this 를 동작하지만 함수를 즉각적으로 호출하지 않는다.

obj를 this 를 바인딩시켜주고 bind 는 자신의 할 일을 마친다.
그럼 어떻게 bindingName을 호출해서 console을 찍을까?

위와 같이 변수에 담아서 호출해주면, hello my name is kim이 정상적으로 잘 호출된다 !

---

Reference |

모던자바스크립트 Deep Dive / 위키북스