This

this : 실행 컨텍스트가 생성될 때 결정 = 함수를 호출할때 결정된다.

1. 전역공간에서

   var a = 1;
   console.log(a);        //1 (window.)생략된것이라고 여기자
   console.log(window.a); //1
   console.log(this.a)    //1

   • 전역공간에서의 this는 전역객체를 의미하므로 두 값이 같은 값을 출력한다.
   • 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당한다.

2. 함수 호출시

   • 그 자체로 독립적인 기능 수행

   • 함수에서의 this는 전역객체를 가리킵니다.

   • 설계상의 오류?!😂

     var func = function(x){
     		console.log(this, x);
     };
     func(1);  //window { ... } 1 > 함수로 오출한것.
     
     var obj = {
     	method: func
     };
     obj.method(2); // { method: f } 2 > 메서드로서 호출한 것.

   • 점 표기법, 대괄호 표기법이던, 호출할때 함수 이름 앞에 객체가 명시되어 있는 경우에는 메서드로 호출한 것, 그렇지 않은 모든 경우에는 함수로 호출한 것.

     var obj = {
     	method: function(x) {console.log(this, x); }
     };
     obj.method(1); //{ method: [Function: method] } 1 =
     obj['method'](2); //{ method: [Function: method] } 2 

     var obj1 = {
     	outer: function() {
     		console.log(this);  //(1) obj1
     		var innerFunc = function() {
     			console.log(this);   //(2)window(전역객체) (3)obj2
     		}
     		innerFunc(); //함수로서 호출 -> this지정 x  -> 전역객체 window 바인딩
     
     		var obj2 = {
     			innerMethod: innerFunc 
     		};
     		obj2.innerMethod(); //메서드로서 호출 this -> .앞 객체 obj2가 바인딩
     	}
     };
     obj1.outer(); //메서드로서 호출 -> .앞 객체 obj1가 바인딩

   

   7번째와 12번째 줄.. 같은 함수임에도 바인딩되는 this의 대상이 서로 다르다!!

   ⇒ this바인딩에서는 오직 해당 함수를 호출하는 구문앞에 점 또는 대괄호 표기가 있는지 없는지가 관건이다.

   var obj = {
   	outer : function() {
   		console.log(this);
   		var innerFunc1 = function() {
   			console.log(this);
   		};
   		innerFunc1(); //내부 this는 window를 가리킴..
   		 
   		var self = this;
   		var innerFunc2 = function () {
   			console.log(self);
   		};
   		innerFunc2();
   	}
   };
   obj.outer();

   

   innerFunc1 내부에서는 this전역객체를 가리킨다.

   한편 outer 스코프에서 self라는 변수에 this를 저장한 상태에서 호출한 innerFunc2의 경우 self에는 객체 obj가 출력된다.

   var self = this; 를 통해서 상위 스코프의 this를 저장해 내부함수에서 사용

   var obj = {
   	outer: function() {
   		console.log(this);        //(1) { outer : f }
   		var innerFunc = () => {
   			console.log(this);      //(2) { outer  :f }
   		};
   		innerFunc();
   	}
   };
   obj.outer();

3. 메서드 호출시

• 자신을 호출한 대상객체에 관한 동작을 수행
• 점 앞에 명시된 객체가 곧 this가 된다.

  var obj = {
  	methodA: function() {console.log(this); },
  	inner: {
  		methodB: function() {console.log(this);}
      }
  };
  obj.methodA(); //methodA: [Function: methodA],
  							 //inner: { methodB: [Function: methodB] }
  obj['methodA']();  //위와 동일
  
  obj.inner.methodB(); //{ methodB: [Function: methodB] }
  obj.inner['methodB'](); //{ methodB: [Function: methodB] }
  obj['inner'].methodB(); //{ methodB: [Function: methodB] }
  obj['inner']['methodB'](); //{ methodB: [Function: methodB] }

4. callback 호출시

• 기본적으로 함수의 this와 같다. = 전역객체를 보게된다.
• 제어권을 가진 함수가 콜백의 this를 지정해둔 경우도 있다.
• 이 경우에도 개발자가 this를 바인딩 해서 콜백을 넘기면 그에 따른다.

setTimeout(function() { console.log(this); }, 300);

[1, 2, 3, 4, 5].forEach(function (x) {
	console.log(this, x);
});

document.body.innerHTML += '<button id="a">클릭</button>';
document.body.querySelector('#a')
	.addEventListener('click', function(e) {
		console.log(this, e);
});

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);

cb를 그냥 호출하지 않고 this 인자를 넘겨줌
cb의 this는 obj이므로 ⇒ obj

⇒ 콜백이라는 함수를 처리할때 this를 obj라고 해라라는 명령이 있으면 ⇒ obj

그렇지 않으면 전역객체(window)가 나온다. (기본적으로는 전역 객체)

function a () {
	var argv = Array.protorype.slice.call(arguments);
	argv.forEach(function (arg) {
		console.log(arg);
	});
}
a(1,2,3);

document.body.innerHTML = '<div>a</div><div>b</div><div>c</div>';
var nodeList = document.querySelectorAll('div');
var nodeArr = Array.prototype.slice.call(nodeList);
nodeArr.forEach(function (node) {
	console.log(node);
});

call, apply, bind 메소드

• call과 apply는 this객체를 지정하며 함수를 호출하는 메소드.
  첫번째 인자에 this로 지정하고 싶은 객체를 넘겨주어 this를 바꾸고 나서 해당함수를 실행

1. 생성자 함수 내부에서의 this

• 어떤 공통된 성질을 지니는 객체들을 생성하는데 사용하는 함수.
• 객체지향 언어에서는 생성자를 클래스, 클래스를 통해 만든 객체를 인스턴스라고 함.