JavaScript - This


var value = 0;  //변수 value에 값 할당
var obj = {     //변수 obj에 객체할당
  value: 1,     //value property에 1
  setValue: function(){   //method
    this.value = 2;   //this:obj -> obj.value = 2;
    (function(){
      this.value = 3; //this: window -> function(함수). 그냥 함수임. 메서드가 아님. 함수를 실행하면 전역 객체를 보게 된다.
                      // window.value = 3; 전역 value가 3이된다.
    })();
  }
}

obj.setValue();
console.log(value); //3
console.log(obj.value); //2

이걸

var value = 0; 
var obj = {     
  value: 1,   
  setValue: function(){   
    this.value = 2;  
    var self = this;  //이러면 위 아래 this가 같게 된다.
    (function(){
      self.value = 3; 
    })();
  }
}

obj.setValue();
console.log(value); //0
console.log(obj.value); //3

아니면

var value = 0; 
var obj = {     
  value: 1,   
  setValue: function(){   
    this.value = 2;  
    (function(){
      self.value = 3; 
    }).call(this); //함수를 실행하면서 this를 넘겨주는 방법이다.
  }
}

obj.setValue();
console.log(value); //0
console.log(obj.value); //3

결론만 얘기하면 this는 블럭 스코프의 영향을 받지 않는다.

var value = 0; 
var obj = {     
  value: 1,   
  setValue: function(){   
    this.value = 2;  
    {
      this.value = 3; //this가 블럭스코프의 영향을 받지 않기 때문에
    }
  }
}

obj.setValue();
console.log(value); //0
console.log(obj.value); //3

함수 스코프와는 차이점을 보이는 모습이다.