this, self 사용 이유

var value = 100;

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

myObj.func1();

출력 값은 func1(): 2, func2(): 101, func3(): 102

fun1의 경우에는 this가 함수에 바인딩 하지만 내부 함수 호출패턴을 정의해 놓지 않았기 때문에 window.value 에 바인딩이 되기때문에 원래 원하던 값을 출력하기 힘들다.

 

let value = 100;

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

myObj.func1();

출력 값은 func1(): 2, func2(): NaN, func3(): NaN

 

let value = 100;

const myObj = {
	value: 1,
    func1: function() {
    	const self = this;
        
    	self.value += 1;
        console.log('func1(): ' + self.value);
        func2 = function() {
        	self.value += 1;
            console.log('func2(): ' + self.value);
            func3 = function() {
            	self.value += 1;
                console.log('func3(): ' + self.value);
            }
        func3();
      }
   func2();
  }
};

myObj.func1();

출력 값은 func1(): 2, func2(): 3, func3(): 4

위와 같이 원하는 출력 값을 얻기 위해서 사용한다.