This

1. this 와 메서드

JavaScript에서 함수의 this는 다른 언어와 조금 다르게 동작합니다. 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다.
자바스크립트에서 this는 런타임에 결정됩니다. 메서드가 어디서 정의되었는지에 상관없이 this는 ‘점 앞의’ 객체가 무엇인가에 따라 ‘자유롭게’ 결정됩니다.

1-1 일반함수(단순 호출)

this가 전역 객체를 참조합니다.
브라우저 환경에선 window라는 전역 객체를 참조한다.

	let data = 10;
	
	function outer() {
		this.data = 20;
		data =30;
		console.log(data);// 30
		console.log(this.data);//30 전역객체
		console.log(window.data); // 30
	}

1-2 객체

함수를 어떤 객체의 메서드로 호출하면 this의 값은 그 객체를 사용합니다.

	let data = 10;
	
	function MyClass() {
		this.data = 0;
	} //new를 이용한 생성자 함수 this가 객체를 가르킨다. 
	
	MyClass.prototype.method1 = function() {
		this.data =20;
		data = 30;
		
		console.log(data); //30
		console.log(this.data); //30 해당객체 자기자신을 가르킨다. 
		console.log(window.data); //30
	}
	
	var m1 = new MyClass();
	m1.method1();

1-3 이벤트

내부의 this는 실행하는 이벤트를 참조한다.
아니, 이건 그냥 함수인데 this가 window가 아닙니다. 객체 메서드도 아니고, bind한 것도 아니고, new 붙인 것도 아닌데 말이죠. 바로 이벤트가 발생할 때, 내부적으로 this가 바뀐 것입니다. 내부적으로 바뀐 것이기 때문에 동작을 외울 수밖에 없습니다. ㅠㅠ
zerocho "this는 무엇인가"에서 참고했습니다.

let data = 10;

window.onload = function() {
	let btn = document.getElementById("btn");
	btn.onclick = function() {
		this.data =20;
		data = 30;
		
		console.log(data); //30
		console.log(this.data); // 이벤트에서 this는 이벤트를 가르킨다.
		console.log(window.data); //30
	}
}

2. bind, apply, call

함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 바인딩 메서드를 도입했다.

func.apply(obj1) : 두번째 인자에 단순한 파라미터 넘길 수 있다.
func.call(obj1) : 두번째 인자부터 모두 배열에 넣어서 넘겨야 한다.
func.bind(obj1) : 바운드 함수를 리턴한다.

	let data = "Global data";
	let obj1 = {'data':'obj1 data'};
	let obj2 = {'data':'obj2 data'};
	
	function func() {
		console.log(this.data); //일반함수에서 this는 window객체를 가르킨다.
	}
	func();
	func.apply(obj1); //this를 change하기 위해서