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는 때마다 바뀌기도하고 복잡하다.
이것을 유지시키게 하는 역할이 화살표함수이다.
객체의 메소드에서는 화살표함수는 불가능하다.