[TIL]Javascript - 전역 객체를 바인딩 하는 this

 this 

 

앞서 공부한 내용을 보면

자바스크립트의 함수는 '정의'로 존재하고, '호출'로 실행된다.

- 함수의 정의

- 함수의 호출

 

 

함수가 호출  될 때, 

매개변수로 전달되는 인자값 외에도 다음의 값을 암묵적으로 전달 받는다.

• argument객체
• this

function add(num) {

  console.log(num);       // 3
  console.log(arguments); // Arguments [3, callee: ƒ, Symbol(Symbol.iterator): ƒ]..
  console.log(this);      // Window {0: global, window: Window, self: Window, ...

  return num + num;

}

add(3);       // 6

 

이 경우 전달 받은 인자 값은 '3' 하나이지만 arguments값과 this로 전달받는 값도 확인 할 수 있다.

 

 

직접 함수를 호출 해 this가 무엇을 바인딩 하는지 확인해보자.

let dan = function () {
  console.log(this); 
};

/* 일반 호출 */
dan(); // Window

/* 메소드 호출 */
obj = { dan: dan };
obj.dan(); // Obeject

/* 생성자 함수 호출 */
let instance = new dan();  // dan

 

✅ Global obejct

전역객체(Global object) : 모든 객체의 유일한 최상위 객체
> Broser-side에서는 window객체 를 의미

 

• 전역 객체는 프로퍼티로 "전역변수(Global Variable)"를 소유한다.
• 이 전역변수는 전역 스코프(Global Scope)를 가진다.
• 글로벌 영역에 선언된 함수 = 전역객체의 프로퍼티로 접근 할 수 있는 전역변수의 메서드 🤯

function dan () {
  console.log('i am dan'); 
};

dan();         // i am dan
window.dan();  // i am dan

 

✅ this가 전역 객체에 바인딩 되는 경우

• 기본적으로 this는 전역 객체(window)에 바인딩 된다.
  • 전역 함수에서의 this
  • 내부 함수(중첩 함수)에서의 this
  • 메서드의 내부 함수에서의 this
  • 콜백 함수에서의 this
• 이벤트에서의 this는 '이벤트 객체'
• 메서드에서의 this는 '메서드 객체'

/* 내부 함수에서의 this */
function dan() {
  console.log("dan : ", this);   // dan : Window
  function din() {
    console.log("din : ", this); // din : Window (din 함수역시 Window에 바인딩 됨)
  }
  din();
}
dan();

 

/* 메서드에서의  this */
var danOne = {
    num : 1,
    getNum : function(){
        console.log(this.num)
    }
};
danOne.getNum();  // 1


/* 메소드 내부함수에서의 this */
let obj = {

  dan: function() {
    console.log("dan's this: ", this);       // dan's this: dan [Object]
   
    function dong() {
      console.log("dong's this: ", this);   // dong's this: Window
    }
    dong();
     
  }
};

obj.dan();

 

/* 콜백 함수에 this */
var value = 7;

var obj = {
  value: 700,
  dan: function() {
  console.log("this is ", this);                  // dan [object]
    setTimeout(function() {
      console.log("this is ", this);              // window
      console.log("this.value is ",  this.value); // 7
    }, 100);
  }
};

obj.dan();

 

즉 this는 내부함수 일반, 메서드, 콜백함수 어디서든 전역 객체를 바인딩 한다.

"이는 설계 단계의 결함. 메서드가 내부함수를 사용해 자신의 작업을 돕게 할 수 없다는 것을 의미"
- Douglas Crockford ( js 개발자 )

 

내부함수에서의 this가 전역 객체를 참조 하는 것을 회피할 수 있는 방법은 있다.

이건 다음 시간에.

 

 

 

 

 

📚참고 자료

PoiemaWeb - "5.17 this - 함수 호출 방식에 의해 결정되는 this"

https://poiemaweb.com/js-this