🤿 (10) 자바스크립트 - this

"메서드 호출 방식을 이용할 때에는 화살표 함수를 왜 쓰지 않아야할까?"

동적 스코프와 정적 스코프

동적 스코프(Dynamic scope)

함수를 어디서 "호출"하였는지에 따라 상위 스코프를 결정하는 것

정적 스코프(Static Scope), 렉시컬 스코프(Lexical Scope)

함수를 어디서 "선언"하였는지에 따라 상위 스코프를 결정하는 것

다음 글에서 저자는 자바스크립트의 "프로토타입 기반의 객체지향", "렉시컬스코프", "this", "스코프"와 같은 개념에 대해 한 논문을 참고하여 이야기를 풀어 설명해주십니다!
medium - 자바스크립트는 왜 프로토타입을 선택했을까

예시

출처: tistory - [Javascript] 동적 스코프? 정적 스코프?

예시는 c언어이다.

var x = 1;

function foo() {
	var x = 10;
  	bar();
}

function bar() {
	console.log(x);
}

foo();
bar();

정적 스코프일때

• foo()의 결과값: 1 / bar()의 결과값: 1

동적 스코프일때

• foo()의 결과값: 10 / bar()의 결과값: 1

this

this binding: 자바스크립트에서 함수가 호출되는 방식에 따라 결정되는 this 참조

출처: tistory - [JS] 알쏭달쏭 자바스크립트 this 바인딩
this 바인딩의 규칙

• 기본 바인딩
• 암시적 바인딩
• 명시적 바인딩
• new 바인딩
• 화살표 함수

기본 바인딩

다음 바인딩 규칙들에 해당되지 않는 경우 기본 바인딩에 해당하며, 기본 바인딩의 경우 this는 전역 객체에 바인딩된다. (콜백 함수 등)
(브라우저일 경우 window / noode.js 환경일 경우 global)

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

foo(); 

하지만 use strict 모드에서는 기본 바인딩 대상에서 전역 객체는 제외된다.

암시적 바인딩

함수가 객체의 메서드로서 호출되는 상황에서 this가 바인딩 될 때를 의미한다.
암시적 바인딩의 경우 this는 해당 함수를 호출한 객체, 즉 콘텍스트 객체에 바인딩된다.

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

foo.bar(); 

하지만 함수의 레퍼런스를 매개변수로 전달하는 상황에서는 암시적 바인딩이 적용되지 않는다. 이 때 this는 전역 객체이다.

setTimeout(foo.bar, 1); // ?

명시적 바인딩

명시적 바인딩에는 call(), apply(), bind()를 사용한다.
이는 모두 Function의 프로토타입 메서드이다.

출처: github - JS - this를 변경하는 call(), apply(), bind()

call()

구문: func.call(thisArg[, arg1[, arg2[, …]]])

예시1) 다른 객체의 메서드 사용하기

let obj1 = {
	name: 'kim',
  	sayHello () {
    	console.log(`hello ${this.name}!`);
    }
}

let obj2 = {
	name: 'park',
}

obj1.sayHello.call(obj2); // hello park!

예시2) 다른 생성자 함수 멤버 가져오기

const getSetMethod = function() {
	this.getName = function() {
    	return this.name;
    }
  	this.setName = function(name) {
    	this.name = name;
    }
}

class Person {
	constructor(name) {
    	this.name = name;
      	getSetMethod.call(this);
    }
}

const kim = new Person('kim');
kim.getName(); // kim
kim.setName('lee'); // lee

예시3) 내부함수의 this가 상위 스코프를 가리키도록 변경하기

class Person {
	constructor(name) {
    	this.name = name;
    }
  
  	greeting() {
    	function sayHello () {
    		console.log(`hello ${this.name}!`);
	    }

      	// sayHello(); // undefined 에러
        sayHello.call(this);
    }
  
  	
}

const kim = new Person('kim');
kim.greeting();

예시4) this와 함께 매개변수 넘기기

const greeting = {
	sayHello(greetingWord) {
    	return `${greetingWord} ${this.name}!`
    }
}

const person = {
	name: 'kim'
}

greeting.sayHello.call(person, "안녕하세요~!");
// 안녕하세요~! kim!

apply()

구문: func.apply(thisArg, [argsArray])

apply()는 call()과 기능이 동일하지만, 인자를 전달하는 방식에서만 차이가 있다.

	sayHello(greetingWord) {
    	return `${greetingWord} ${this.name}!`
    }
}

const person = {
	name: 'kim'
}

greeting.sayHello.apply(person, ["안녕하세요~!"]);

bind()

call()과 apply()와 같은 역할(this 바인딩 객체 변경)을 하지만 함수를 실행하는 것이 아닌 새로운 함수를 반환한다.

let obj1 = {
	name: 'kim',
  	sayHello () {
    	console.log(`hello ${this.name}!`);
    }
}

let obj2 = {
	name: 'park',
}

obj1.sayHello.call(obj2); // hello park!
const fn = obj1.sayHello.bind(obj2);
fn(); // hello park!

new 바인딩

생성자 함수에서는 this 키워드를 해당 생성자를 이용해 생성할 객체에 대한 참조로 사용한다.

function Foo() {
  this.a = 20;
}

const foo = new Foo();

console.log(foo.a); // 20

화살표 함수

ES6에 추가된 화살표 함수(Arrow Function)는 this를 바인딩할 때 앞서 설명한 규칙들이 적용되지 않고, this에 어휘적 스코프(Lexical scope)가 적용된다. 즉, 화살표 함수를 정의하는 시점의 컨텍스트 객체가 this에 바인딩된다.

const foo = {
  a: 20,
  bar: function () {
    setTimeout(() => {
      console.log(this.a);
    }, 1);
  }
}

foo.bar(); // 20

헷갈리는 케이스

var value = 1;

var obj = {
    value : 100,
    func1 : function(){
        this.value += 1;
        console.log("func1()'s value: " + this.value); //func1()'s value: 101

        func2 = function(){
            this.value += 1;
            console.log("func2()'s value: " + this.value); //func2()'s value: 2
        }

        func2();
    }
};

obj.func1();

func2도 obj에 바인딩되도록 하고 싶다면?
1. func2를 화살표 함수로 변경한다.

var value = 1;

var obj = {
    value : 100,
    func1 : function(){
        this.value += 1;
        console.log("func1()'s value: " + this.value); //func1()'s value: 101

        func2 = () => {
            this.value += 1;
            console.log("func2()'s value: " + this.value); //func2()'s value: 102
        }

        func2();
    }
};

obj.func1();

2. _this 변수에 this 먼저 할당하기

var value = 1;

var obj = {
    value : 100,
    func1 : function(){
        const _this = this;
            
        this.value += 1;
        console.log("func1()'s value: " + this.value); //func1()'s value: 101

        func2 = () => {
            this.value += 1;
            console.log("func2()'s value: " + _this.value); //func2()'s value: 102
        }

        func2();
    }
};

obj.func1();

"메서드 호출 방식을 이용할 때에는 화살표 함수를 왜 쓰지 않아야할까?"

출처: mdn - 화살표 함수

화살표 함수는 다음과 같은 제한점이 있다.

• this, arguments나 super에 대한 자체 바인딩이 없고, methods로 사용해서는 안됩니다.
• new.target키워드가 없습니다.
• 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
• 생성자(Constructor)로 사용할 수 없습니다.
• yield를 화살표 함수 내부에서 사용할 수 없습니다.

예를 들어 다음과 같은 코드가 있다고 한다면,
메서드는 객체에 종속되어 객체의 값을 참조해야 한다고 생각하지만,
화살표 함수는 this 바인딩이 없고 렉스컬 스코프가 적용된다는 점에서 메서드로 사용하기에 적절하지 않다는 의미이다.

'use strict';

var obj = { // does not create a new scope
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}