this란 무엇인가?( 추가 수정해야됨)

this는 일반적으로 메서드를 호출한 객체가 저장되어 있는 속성입니다. 하지만 this 속성은 메서드를 호출할 때뿐 아니라 일반 함수를 호출할 때도 만들어지며 이벤트 리스너가 호출될 때에도 this 속성이 만들어진다.
this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구별된다.
this는 객체다.
this 값은 4가지로 나눌 수 있다.

1. 일반 함수 실행방식
   일반 함수 실행 방식으로 함수를 실행했을 때 this는 Node.js에서는 global object이고,
   브라우저 상에서는 window객체를 말한다
   (window 객체는 자바스크립트 프로그램의 전역객체이다)

예제 1 일반모드

function foo() {
console.log(this); // 'this' === global object
}
foo(); // 

예제 2 strict모드

'use strict';
var name = 'ken';
function foo () {
console.log(this.name); // 'this' === undefined
}
foo();

foo함수 안에 있는 this는 글로벌 객체, 브라우저 상에는 window객체를 가리킨다.
위 예시에서 window를 가리키기 위해 this는 실제로 안쓴다

에제 3

var age = 100;

function foo () {
var age = 99;
bar();
}

function bar() {
console.log(this.age);
}

this가 bar에서 쓰고 실행되는 부분은 foo()함수 안에서 실행시키는데
일반함수실행방식으로 실행시켜서 window를 가르키기 때문에 100이 찍힌다

실행되는 부분을 찾는것이 중요!!!

2. 점 방식 (Dot Notataion)

var age = 100;

var ken = {
age : 35,
foo : function foo() {
console.log(this.age);
};
  
ken.foo(); // 35  
}

위의 예처럼 this가 foo()에 들어있는데 마지막에 호출할 때 .을 써서 this는 . 앞에 있는 ken을 가리키게 된다.

var age = 100;

var ken = {
age : 35,
foo : function bar() {
console.log(this.age);
 };
};
var wan = {
  age: 31,
  foo: ken.foo  // ken()에있는 bar()가 실행된다
};

var foo = ken.foo; // bar()를 실행한다

ken.foo(); // 35  
wan.foo(); // 31 
foo(); // 100 일반함수 실행방식이기 때문에 window객체를 가리키게 된다.

3. function.prototype.call,bind.apply

var age = 100;

function foo() {
console.log(this.age);
}

var ken = {
  age: 35
};

var wan = {
  age: 31
};

foo();

foo.call(wan); // 31
foo.apply(ken); // 35

call은 () 안에 있는 wan으로 this가 설정된다.
apply는 인자로 ken을 받는데 call과 동일하게 foo()가 실행되고 kendmfh this가 설정된다.

call과 apply의 차이점

var age =100;

function foo(a,b,c,d,e) {
  console.log(this.age);
  console.log(arguments);
}

var ken = {
age: 35
};

foo.call(ken, 1,2,3,4,5) // foo라는 함수의 인자로 넘어간다 a =1 , b=2, c=3, d=4, e=5
foo.apply(ken, [1,2,3,4,5]);

call은 인자의 수가 정해져있지 않다
apply는 항상 인자를 두 개만 받는다. 첫번쨰인자는 this값으로 설정하고 싶은 객체를 넣으면 되고
두번째 인자는 배열이들어가는데 배열안의 요소들이 foo()안에 각각 요소로 들어간다.

bind

var age = 100;

function foo() {
console.log(this.age);
}

var ken = {
  age: 35
};

var bar = foo.bind(ken);
bar(); //34

bind는 바로 해당 함수를 바로 실행시키지 않는다.
위로 예를들면 foo() 안에 this값을 ken으로 설정해놓은 함수를 반환을 해주고 bar라는 변수에 담고
bar를 실행하면 this값은 bind로

실행 컨텍스트란?
실행할 코드에 제공할 환경 정보들을 모아놓은 객체