this 에 대하여

오늘은 this 에 대하여 알아볼려고한다

this 는 거의 모든 상황에서 객체이다

this의 값은 this를 사용하는 함수가 어떻게 실행하느냐에 따라 바뀐다

함수를 실행하는 방법엔 크게 4가지가 있다,

1. 일반 함수 실행 방식

function todo() {
   console.log(this);
 }
 
 todo();

this  === global object 이다 
(브라우저에서 window 객체)

'use strict'; 모드라면 

var name = 'sorialgi';

function todo() {
  console.log(this.name); // 'this' === undefined
}

todo();


일반 함수 실행 방식에서 는 global object 👉 window를 가르키는데 
'use strict'; 모드로 선언되어있다면 this 는 undefined

다른 예제를 보자 (일반모드)

var age = 200;

function todo() {
  var age = 10;
  todos();
}

function todos() {
	console.log(this.age) 👉 this.age 는 200을 가르킨다 
  }
    
todo();

일반 함수 실행식 이기 때문에 global window를 가르키게 되는것이다 

2. Dot Notation - 점 방식

var age = 150;

var  maru = {
    age: 35,
    todo: funtion todo() {
      console.log(this.age);   
   }
 
 };
 
 maru.foo() 


👉 this.age 값은 함수호출 값 앞 어떤 오브젝트의 값이 this 값이 된다 = maru.35 

다른예제를 보자

var age = 100;

var maru  = {
	age: 31,
    jun : function bar() {
      console.log(this.age);
  }
};

var won = {
	age: 28,
    jun : maru.jun
};

var jun = maru.jun;

maru.jun();   // 31
won.jun();    // 28
jun();        //100  (this 전역을가리킨다)일반호출방식

3. function.prototype.call , function prototype.bind, function.prototype.apply

3. call,apply

var age = 100;

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

var won = {
	age : 35; 
};

var han = { 
	age: 31
};

foo();               // 100;

foo.call(won);         //35
foo.apply(han);        //31

다음 예제도 살펴보자

var age = 100; 

function foo (a,b,c,d,e) {
    console.log(this.age);     //31
    console.log(arguments);  // [1,2,3,4,5]
}

var won ={
    age: 31
};

  foo.call(won, 1, 2, 3, 4, 5);
  foo.apply(won, [ 1, 2, 3, 4, 5];
}

3. bind 함수일때

var age = 100 ;


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

var won = { 
 age: 31
};

var bar = foo.bind(won);

bar(1, 2, 3, 4, 5);

4. 'new' keyword

function foo () { 
	console.log (this);
 }
 
 new foo();
 
 // 새로운 객체를 반환 foo{}

 function foo () { 

this.name = '부트캠프';

}

  var bootcamp = new foo();

  console.log(bootcamp);

// new keyword 에서는 새로운 객체를 반환
 foo {name: '부트캠프'}

다른예제

function Person (name, age) {

this.name = name;
this.age = age; 
}

var won = new Person('won' , 31);
var jun = new Person('jun' , 30);

console.log(won);
console.log(jun);

// Person {name: 'won' , age: 31}
// Person {name: 'jun' , age: 30}

새로운 객채로써 반환한다  

이렇게 this에대해서 알아보았다

일반 함수를 선언했을때,
dot.notation 방식일때,
call,apply,bind 방식일때,
new keyword 일때

함수가 어떻게 실행되는냐에 따라 this 값이

어떻게 참조하게 되는지 알아보았다

new keyword 와

call, apply, 일때는 어떻게 바뀌는지 다시한번

찾아봐야 할것같다