자바스크립트 this

// 1
function foo() {
  const a = 10;
  console.log(this.a);
}
foo(); // undefined

// 2
// 엄격모드인 경우 undefined로 출력된다.
window.a = 10;
function foo() {
  console.log(this.a);
}
foo(); // 10

// 1
function hello() {
  console.log(this.name);
}
const obj = {
  name: 'bae',
  hello: hello,
};
obj.hello(); // 'bae'

// 2
const foo = {
  a: 20,
  bar: function () {
    console.log(this.a);
  },
};
foo.bar(); // 20

// setTimeout(foo.bar, 1); ==> undefined
// setTimeout 함수 안 콜백은 bar라는 함수의 레퍼런스 부분, foo의 콘텍스트를 가지고 있지 않음

// 1
function add(a, b){
	return a + b;
}
app.call(null, 1, 2);   // 3
app.apply(null, [1,2]); // 3

// 2
const obj = { name : 'seongkyu' };
const say = function(city){
  console.log(`hello, my name is ${this.name}, I live in ${city}`);
};
say('seoul'); // hello, my name is , I live in seoul
say.call(obj, 'seoul'); // hello, my name is seongkyu, I live in seoul
say.apply(obj, ['seoul'); // hello, my name is seongkyu, I live in seoul

// 3
// call을 사용하면 함수를 실행하고 함수의 첫 번째 인자로 전달하는 값에 this를 바인딩
function logName(a, b, c) {
	console.log(this.name);
  	console.log(a + b + c);
}

const person = {
 	name : 'seongkyu',
};
logName.call(person, 1, 2, 3);
/* 실행 결과
   seongkyu
   6
*/

// 4
// apply를 사용하면 함수를 실행하고 함수의 첫 번째 인자로 전다하는 값에 this를 바인딩
// call과의 차이점은 인자를 배열로 전달(인자로 배열 자체를 전달하는 것이 아닌 배열의 요소들이 값으로 전달된다. )
logName.apply(person, [1,2,3]);
/* 실행 결과
   seongkyu
   6
*/

// 5
// bind 함수 첫 번째 인자에 this를 바인딩한다는 점은 같으나, 함수를 실행하지 않고 새로운 함수를 반환한다. (반환된 새로운 함수를 실행해야 원본함수가 실행됨)
function logAge(a,b,c){
  console.log(this.age);
  console.log(this.name);
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(a + b + c);
}
const person = {
 	age : 81,
  	name : 'seongkyu',
}
const myAge = logAge.bind(person, 1); // myAge를 실행시키면 person에 해당하는 값들이 바인딩 됨. 2번째 인자에 있는 1이 a의 위치에 들어간다.
myAge(2,3); // 2가 logAge의 b 파라미터로, 3이 logAge의 c파라미터로 들어간다.

class Man {
  constructor(name) {
    this.name = name;
  }
  hello() {
    console.log('hello ' + this.name);
  }
}
const john = new Man('john'); // new 키워드를 붙이지 않을 경우, this가 해당 객체로 바인딩 되지 않기 때문에 window 객체를 건드리게된다.
john.hello();

const cat = {
  name: 'meow',
  foo1: function () {
    const foo2 = function () {
      console.log(this.name);
    };
    foo2();
  },
};
cat.foo1();
/**
cat.foo1() 메소드 호출 시 내부 함수 foo2 실행 
함수가 호출 됐으므로 foo2 배우의 this는 지정되지 않아서 전역 객체를 가리킴
전역객체에는 name 속성이 없으므로 undefined 
*/

const cat = {
  name: 'meow',
  foo1: function () {
    const foo2 = () => {
      console.log(this.name); // meow
    };
    foo2();
  },
};
cat.foo1();
// 화살표 함수에는 this가 아예 없음

const cat = {
 	name : 'meow';
  	callName : () => console.log(this.name); // undefined
}
cat.callName();
/**
위와 같은 경우의 callName 메소드의 this는 자신을 호출한 객체 cat이 아닌 함수 선언 시점의 상위 스코프인 전역객체를 가리킨다.
*/

const Foo = () => {};
const foo = new Foo(); // 타입에러
// 화살표함수를 생성자로 사용하면 에러 발생한다.

const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log(this); // window
  this.innerHTML = 'clicked';
});
button.addEventListener('click', function () {
  console.log(this); // button엘리먼트
  this.innerHTML = 'clicked';
});
/**
addEventListener의 콜백함수에서는 this에 해당 이벤트 리스너가 호출된 엘리먼트가 바인딩되도록 정의되어 있다. 
화살표 함수를 사용하면 기존 바인딩 값이 사라지고 상위 스코프가 바인딩 된다. 
*/