This

inner	VariableEnvironment	environmentRecord
		outerEnvironmentReference
	LexicalEnvironment	environmentRecord
		outerEnvironmentReference
	ThisBinding

This binding은 실행 컨텍스트가 활성화 될 때 한다! (함수가 호출될 때)

호출하는 방식에 따라 다르다!

전역공간에서	window / global
함수 호출시	window / global (ES6에서는 arrow function을 이용해 해결 가능)
메서드 호출시	메서드 호출 주체 (메서드명 앞) a.b(); a가 this
callback 호출시	기본적으로는 함수내부에서와 동일
생성자함수 호출시	인스턴스

메서드 호출시

// 메서드 내부함수에서의 우회법

var a = 10;
var obj = {
  a: 20,
  b: function() {
    console.log(this.a); // 20
    
    function c() {
      console.log(this.a); // 10
    }
    c();
  }
}
obj.b();

전역 변수가 전역 객체의 프로퍼티로 동작을 한다.(자바스크립트 설계상의 오류)

this 가 전역 객체가 아닌 obj를 바라보게끔 하려면 어떻게 해야할까?

 

// 메서드 내부함수에서의 우회법(scope chain을 이용해 변수를 하나 만든다)

var a = 10;
var obj = {
  a: 20,
  b: function() {
    var self = this;
    console.log(this.a); // 20
    
    function c() {
      console.log(self.a); // 20
    }
    c();
  }
}
obj.b();

// 메서드 내부함수에서의 우회법 (ES6 arrow function 사용)

var a = 10;
var obj = {
  a: 20,
  b: function() {
    console.log(this.a); // 20
    
    const c = () => {
      console.log(this.a); // 20
    }
    c();
  }
}
obj.b();

// 메서드 내부함수에서의 우회법 (ES5 call, apply 사용)

var a = 10;
var obj = {
  a: 20,
  b: function() {
    console.log(this.a); // 20
    
    function c() {
      console.log(this.a); // 20
    }
    c.call(this);
  }
}
obj.b();

callback 호출시

*call, apply, bind 메서드

call : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call

apply : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

bind : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

function a(x, y, z) {
  console.log(this, x, y, z);
}
var b = {
  bb: 'bbb';
};

a.call(b, 1, 2, 3);

a.apply(b, [1, 2, 3]);

var c = a.bind(b);
c(1, 2, 3);

var d = a.bind(b, 1, 2);
d(3);

전부 {bb: "bbb"} 1 2 3 이 호출된다.

var callback = function() {
  console.dir(this); // window
};
var obj = {
  a: 1,
  b: function(cb) {
    cb();
  }
};
obj.b(callback);



var callback = function() {
  console.dir(this); // obj
};
var obj = {
  a: 1,
  b: function(cb) {
    cb.call(this);
  }
};
obj.b(callback);

var callback = function() {
  console.dir(this); // window
};
var obj = {
  a: 1
};
setTimeout(callback, 100);


var callback = function() {
  console.dir(this); // obj
};
var obj = {
  a: 1
};
setTimeout(callback.bind(obj), 100);

document.body.innerHTML += '<div id="a">클릭하세요</div>';

document.getElementById('a').addEventListener('click', function() {
  console.dir(this); // HTML DOM element 가 나온다
});

<callback 호출시 정리>

- 기본적으로 함수의 this와 같다.

- 제어권을 가진 함수가 콜백의 this를 지정해둔 경우도 있다.

- 이 경우에도 개발자가 this를 binding해서 콜백을 넘기면 그에 따른다.

 

생성자 함수 호출시

function Person(n, a) {
  this.name = n;
  this.age = a;
}
var roy = Person('곤', 32);
console.log(window.name, window.age); // 곤 32


function Person(n, a) {
  this.name = n;
  this.age = a;
}
var roy = new Person('곤', 32);
console.log(roy); // Person { name: '곤' , age: 32 }