[node.js] this, binding, arrow function

Hyo Kyun Lee·2021년 7월 28일

node.js

목록 보기

22/34

1-1. Binding

정의되어 있지 않은 객체를 의미있는 객체로 만드는 과정으로,
함수나 객체로 접근하기 위해 연관이 되도록 묶는 작업을 말한다.

"use strict";

function ref() {
  console.log(this);
  console.log("hello");
}

ref(); //이 시점에서 this 객체는 의미없는 객체(global 출력)

this 와 binding의 의미를 정확히 이해하기 위해선 javascript의 구조를 이해해야 한다.

간단히 javascript의 명령실행과정을 간단히 기재하면,

logic을 call stack에 적재하며 실행하고, 실행종료시 stack에서 제거한다.
코드가 실행되는 환경인 stack은 코드의 실행범위, 변수의 참조범위, 함수 및 변수의 접근범위 등을 관할하기 위해 execution context를 관리하는 장소이기도 하다.
execution context 에서 하나의 함수 내부에 선언된 함수들은(보통 Closure), 선언한 변수에 따라 외부, 외부에서 감싸고 있는 함수(="하나의 함수")에 접근이 가능하다.

1-2. this

this는 현재 실행중인 코드의 execution context, 즉 적용이 가능한 범위의 객체 혹은 함수를 가리킨다.

this는 명시되지않은 상황에서는 전역객체 혹은 window를 가리키고 있다.

※ use strict mode를 사용하면 this가 전역객체를 가리키지는 않으나, 이 부분은 사용자가 명시적으로 할당해줘야 하는 logic이기 때문에 중략.

this를 명시하고 싶다면 object(객체) 내부에서 사용해야 한다.

var obj1 = {
    name: "seo",
    print: function() {
      console.log(this.name);   // this가 참조되는 위치
    }
}
var obj2 = { name: "jeong", print:  function() {
      console.log(this.name)};
            
var name = "kuk";
var print = obj1.print;

obj1.print();      // seo
obj2.print();      // jeong

위와 같이, this가 obj 내부에서 호출될 경우, 해당 obj에 접근하는 접근자로써 역할을 수행할 수 있다.

function Hello(){
  this.age = 0
  console.log(this)

TimeInterval(function(){
  console.log(this)//this = global
  console.log(this.age++)//null, undefined
}, 100)

}

그러나 this가 obj 내부에서 호출되었다 할지라도, 호출시점 및 범위에 따라 동적으로 this를 재설정해줘야 하는 경우가 생긴다.

객체의 메소드 및 접근자로써 호출되지 않은 this는 window(전역객체)로 인식하여 의미없는 객체가 된다.

일반 함수 구조에서 this를 사용할 경우, 위 코드처럼 객체와 함께 binding 하는 작업이 또 필요하다.

위 과정을 통해 우리는 this는 객체 내에서 명시적으로 binding 해줘야 하고,
해주었다 하더라도 호출 방식에 따라 동적으로 객체가 바인딩되어야 하는 상황이 있을 수도 있음을 알 수 있다.

2-1. arrow function

javascript에서 함수의 구조를 경량화하여 나타낸 구조이다.

기존의 function name() {logic} 구조에서 name () => {logic} 형식으로 직관적으로 코드가 변형된 구조이다.

2-2. this binding 관점에서의 arrow function

this binding 관점에서 arrow function에서 사용된 this는 상위 context 를 가리킨다.

function foo(){
  // 화살표 함수 return
  return (a) => {
    // 여기서 'this'는 foo(), 혹은 호출한 객체로부터 binding된다.
    console.log(this.a);
  };
}

let obj = {
  a : 2
};

let obj2 = {
  a: 3
};

let bar = foo.call(obj1); //2
bar.call(obj2);  // 2(obj2와 binding 불가)