JavaScript: What is the meaning of this? (step 35)

내용

1. this의 일반함수와 화살표함수
2. EventListener
3. 객체의 메소드에서 this
4. use strict에서의 this

---

this 그리고 화살표함수

화살표함수는 안에잇는 this가 변하지않는다.

---

일반함수

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

Function.bind({foo: 'bar'})();		//{foo: "bar"}

---

화살표함수

const arrowFunction = () => {
  console.log(this);
};

arrowFunction.bind({foo: 'bar'})();		//Window {window: Window, self: Window, document: document, name: "", location: Location, …}

즉, this를 계속 유지하고싶다면 화살표함수를 써야한다.

또 다른 예시

일반함수

function someFunction() {
  return this;
}

const boundObject = {hello: 'world'};
const boundFunction = someFunction.bind(boundObject);

console.log(someFunction() , boundObject);	
//Window {window: Window, self: Window, document: document, name: "", location: Location, …} {hello: "world"}
console.log(boundFunction() , boundObject);
//{hello: "world"} {hello: "world"}

---

화살표함수

const someFunction = ()=>this

const boundObject = {hello: 'world'};
const boundFunction = someFunction.bind(boundObject);

console.log(someFunction() === boundObject);
//Window {window: Window, self: Window, document: document, name: "", location: Location, …} {hello: "world"}
console.log(boundFunction() === boundObject);
//Window {window: Window, self: Window, document: document, name: "", location: Location, …} {hello: "world"}

---

EventListener

이벤트핸들러에서 조차 this는 일반함수로 쓰게되면 코드를 이해하기 어렵다.
(Unfortunately this is set to some other value by things like DOM event listeners, and using it can result in difficult-to-understand code:)

---

객체의 메소드에서의 this

일반함수와 화살표함수

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

let   Function =  ()=> {
  console.log(this);
}

---

객체의 메소드

let a ={
      Function () {
  	console.log(this);
	}
};
a.Function();	//{Function: ƒ}

객체의 메소드에서는 일반함수 형태가 아닌 화살표함수 형태는 안되는것 같다.

let a = {
    Function =  ()=> {
  console.log(this);
   }
}
//Uncaught SyntaxError: Invalid shorthand property initializer

---

객체와 this

const obj = {
  someMethod() {
    return this;
  },
};

// Logs `true`:
console.log(obj.someMethod() === obj);

use strict

일반함수에서 use strict 사용시 this는 window객체가 아닌 undefined이다.

---

일반함수

1. use strict 사용하지 않을시

function someFunction() {
  return this;
}

// Logs `false`:
console.log(someFunction() === undefined);

2. use strict 사용시

function someFunction() {
  'use strict';
  return this;
}

// Logs `true`:
console.log(someFunction() === undefined);

---

화살표함수

1. use strict 사용하지 않을시

let someFunction1 = ()=> {
  return this;
}

console.log(someFunction1());
// Window {window: Window, self: Window, document: document, name: "", location: Location, …}

2. use strict 사용시

let someFunction1 = ()=> {
  'use strict';
  return this;
}

console.log(someFunction());
//Window {window: Window, self: Window, document: document, name: "", location: Location, …}

---

정리

js에서 this는 때마다 바뀌기도하고 복잡하다.
이것을 유지시키게 하는 역할이 화살표함수이다.
객체의 메소드에서는 화살표함수는 불가능하다.