javascript this binding

오픈소스·2020년 12월 27일
0

https://www.hanbit.co.kr/store/books/look.php?p_code=B6479856408, P.105 ~ P.109

var value = 100;

var myObject = {
  value: 1,
  func1: function () {
    this.value += 1;
    console.log('func1() called. this.value : ' + this.value);
    
    func2 = function () {
      this.value += 1;
      console.log('func2() called. this.value : ' + this.value);
      
      func3 = function () {
        this.value += 1;
        console.log('func3() called. this.value : ' + this.value);
      }
      
      func3();
    }
    
    func2();
  }
};

myObject.func1();

func1() called - this.value : 2
func2() called - this.value : 101
func3() called - this.value : 102

내부 변수를 통한 문제 해결

var value = 100;

var myObject = {
  value: 1,
  func1: function () {
    var that = this;
    
    this.value += 1;
    console.log('func1() called. this.value : ' + this.value);
    
    func2 = function () {
      that.value += 1;
      console.log('func2() called. this.value : ' + that.value);
      
      func3 = function () {
        that.value += 1;
        console.log('func3() called. this.value : ' + that.value);
      }
      
      func3();
    }
    
    func2();
  }
};

myObject.func1();

func1() called - this.value : 2
func2() called - this.value : 3
func3() called - this.value : 4

https://wikibook.co.kr/mjs/, P.358

함수 호출 방식this 바인딩
일반 함수 호출전역 객체
메서드 호출메서드를 호출한 객체
생성자 함수 호출생성자 함수가 (미래에) 생성할 인스턴스
Function.prototype.apply/call/bind 메서드에 의한 간접 호출Function.prototype.apply/call/bind 메서드에 첫번째 인수로 전달한 객체

0개의 댓글