this

this

함수 호출 방법에 따라 값이 결정 => 바인딩

 

전역 객체 (global Object)

• 모든 객체의 최상위 객체
• 자바스크립트에서는 window 객체

전역 객체에 바인딩 되는 경우

• this는 전역 객체(window)에 바인딩

1. 전역 함수
2. 내부 함수
3. 콜백 함수

//내부 함수
function sFoo() {
	console.log("sFoo ::: " + this);
}


function mFoo() {
	console.log("mFoo ::: " + this);
	sFoo(); // objuct Window
}
mFoo(); // objuct Window

// this는 전역 객체에 바인딩 된다

1. 기본 바인딩
2. 암시적 바인딩
3. 명시적 바인딩
4. new 바인딩
5. 화살표 함수

바인딩

기본 바인딩

• 기본 규칙
• 전역(global) 바인딩

*웹 브라우저 전역 객체

• Window 객체

// 웹 브라우저에서는 window 객체가 전역 객체
console.log(this === window); // true => 기본 바인딩 = 전역 바인딩 = 글로벌 바인딩 = 자바스크립트에서 전역이며, 글로벌인 객체 = window

a = 37; 
console.log(window.a); // 37  = 전역변수 선언

this.b = "MDN"; // = this는 전역객체
console.log(window.b)  // "MDN" 
console.log(b)         // "MDN"

	window.a = 20;

	function foo() {
		this.b = 30;
		console.log(this.b); // 30
	}

	//foo(); 
	console.log(this.b); // undefined
    
    /*
    앞에 선언 해 주기 
    
    	window.a = 20;

	function foo() {
		this.b = 30;
		console.log(this.b); // 30
	}

	foo(); 
	console.log(this.b); // 30
    */

암시적 바인딩

• 함수 호출 위치에 따라 바인딩 됨
• 암시적으로 바인딩 되는 것

	window.str = "window";

	function foo() {
		console.log(this === obj); // true this는 obj를 참조함
		console.log(this.str); //10
	}

	var obj = {
		str : 10,
		fn : foo   //foo함수 참조
	}

	obj.fn();  //암시적 바인딩 
	//foo();      //기본 바인딩

명시적 바인딩

• 암시적 바인딩의 반대
• 명시적으로 바인딩 시키는 것
• call, apply 이용

	window.str = "window";

	function foo() {
		console.log(this === obj); // true
		console.log(this.str); //10
	}

	var obj = {
		str : 10,
		fn : foo   //foo함수 참조
	}

	foo.call(obj);  //명시적 바인딩

	function foo(str2) {
		// console.log(this === obj);
		// console.log(this.str1, str2);
		return this.str1 + str2;
	}

	var obj = {
		str1 : "명시적 바인딩"
	};

	var bindingFn = function(){
		// console.log(arguments);
		return foo.apply(obj, arguments);
	};

	console.log(bindingFn(" apply 실습 하기", "1"));

new 바인딩

• new 키워드 사용하여 바인딩
• 함수 호출 시 new 키워드 이용

	function foo(str) {
		console.log(this === obj); // false
		console.log(this.str);  //undifined
		this.str = str;
		console.log(this.str);  //new 바인딩
	}

	var obj = new foo("new 바인딩");
	console.log(obj.str);  //new 바인딩

화살표 함수

• this 바인딩 예외 적용
• 이미 바인딩 된 것은 다시 바인딩 불가
• 암시적, 명시적이던 재바인딩 불가

	function foo() {
		//console.log(str);
		return (str) => {
			console.log(this.str);
		};
	}

	var obj1 = {
		str: "화살표 함수 바인딩 실습"
	};

	var obj2 = {
		str: "화살표 함수 재바인딩 실습"
	};

	//명시적 바인딩 call
	var temp = foo.call(obj1);
	temp.call(obj2);