[Javascript] this

this??

함수가 호출되어 실행되는 시점에 this 값이 결정된다. 이 this 값은 '함수가 호출되었을 때 그 함수가 속해 있던 객체의 참조'이다.

브라우저에선 window, node.js에서 global로 보이지 않는 불리는 전역객체로 인식된다.

var gVar = 5;

console.log(window.gVar); 

브라우저 콘솔에서 실행하면 5가 출력되는것을 확인할수있다.

Case1

let name = 'lee';

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

foo();

위 코드를 실행하면 undefine이 출력된다. foo()를 호출했을 때 실행되는 console.log안에 this는 전역객체를 가리키게된다. 코드 내에선 안보이지만 window라는 전역객체를 가리키게되고 전역객체 안에 name이라는 프러퍼티가 존재하지 않기에 undefune이 출력된다.

'use strict'
let name = 'lee';

function foo(){
  console.log(name);
}

foo();

정상적인 출력을 하기위해 this를 빼고 함수를 호출하는것이 맞다.

Case2

let age = 100;

let lee = {
    age:27,
    foo:function foo(){
    console.log(this.age);
    }
};

lee.foo();

age:27이 전역변수로 선언된 age의 값을 객체내에서 바꾸어줬기 때문에(lee 객체에 값을 읽음) foo매서드는 27을 출력하게된다.

let age = 100;

let lee = {
    age:27,
    foo:function foo(){
    console.log(age);
    }
};

lee.foo();

반대로 this를 빼고 출력하게되면 age는 객체내에서반 27로 인식되고 객체 밖에선 100으로 인식되기 때문에 100이 출력된다.

Case3

let age=100;

let lee = {
  age:35,
  foo: function bar(){
  	console.log(this.age);
  }
};

let kim = {
  age:31,
  foo:lee.foo
};

var foo = lee.foo;

lee.foo();
kim.foo();
foo();

첫번째 lee.foo();는 lee안에 foo라는 함수를 호출한 것으로 35가 출력된다.

두번째 kim.foo();는 kim함수 안에 foo는 lee함수 안에 foo프로퍼티를 나타내며 함수 function bar(){,,,}를 가져와 호출하게된다. 그러므로 두번째 값은 31이 출력된다

var foo는 lee 객체에 foo라는 프로퍼티안에 함수function bar(){,,,}를 나타낸다. foo()로 함수를 호출해도 선언된 프로퍼티가 없기에 undefine이 출력된다

Case4

let user = {
    name: "John",
    age: 30,
  
    say() {
      console.log(this.name);
    }
  
  };
  
  user.say(); 

say가 속해있던 함수 use를 this가 가리키게 되고 name의 값인 john을 출력한다.