[JavaScript] This, new 키워드

c++, c#에서의 this는 인스턴스 자기 자신을 가리키는 포인터로 사용이 된다.따라서 this키워드를 이용하여 자신의 메서드나 변수에 접근할 수 있었다.

그러나 javascript의 this는 조금 다르다. javascript의 this는 '함수의 호출 방식'에 따라 this에 바인딩 되는 객체가 달라진다.

 

- 내부함수가 일반 함수, 메서드, 콜백함수라면 어디에서 선언되었든 관게없이 this는 전역객체를 바인딩한다. 

let obj = {
  myVar: 'foo',
  
  myFunc: function() { 
    console.log(this.myVar)   
 
    setTimeout(function() {
      console.log(this.myVar)
    }, 1000)
  }
}
obj.myFunc() // foo ... undefined​

- 해결방법은 this를 변수에저장해서 사용하는것과 화살표함수 사용, apply, call ,bind함수를 사용한다.

# 함수 호출 방식

var foo = function () {
  console.dir(this);	//this 는 Browser-side : window객체, node.js : global 객체
};

 

 

객체 리터럴 방식

let obj = {
	value : 100,
    foo : function() {
        that = this;
        console.dir(that);	//obj
    }
}

- 생성된 프로토타입 객체는 Object.property

 

생성자 함수 방식 

- 자바스크립트에서 생성자 함수는 객체를 생성하는 역할을 한다. 이 역시도 C++,C#의 생성자 함수와는 다르게 작동한다.

- c++,c#과 마찬가지로 해당 함수를 호출하여 객체를 초기화하는건 공통적인 부분인듯함.

- 생성자 함수에 new 연사자를 붙여서 변수에 할당하면(호출하면) 해당 함수는 생성자 함수로 동작한다.

- 생성자 함수는 함수명의 첫번째 글자를 대문자로 지어서 혼란을 방지한다고 한다.

function testfunc(name) {
    this.name = name // window
}

let t1 = testufnc("kd");

function testfunc(name) {
    this.name = this; //testfunc 
}
//new 연산자를 이용하여 호출하면 window가아닌 해당 함수를 가리킨다.
let t2 = new testfunc("k");

//생성자를 호출하면 객체가 생성된다. testfunc함수를 이용하여 객체를 생성함.
typeof t2 //object
object.keys(t2) // ['name']

- 생성된 프로토타입 객체는 호출한 함수.property

- new 연산자 없이 작동을 시키면 this는 window를 가리키고 window에 name을 할당하는 꼴이 된다.

 

 # 생성자 함수 동작 방식 - 빈객체 생성 및 this 바인딩 

1.   할당한 생성자 함수 실행 전 빈객체 생성 
2. 생성자 함수 내에서 사용되는 this는 생성한 빈 객체를 가리킨다.
3. 따라서 할당한 생성자 함수내에서 this를 이용하여 만든 프로퍼티는 이 빈객체에 할당된다.
4. return문이 없거나 return this를 하면 호출한 변수에 할당된다.

# 화살표 함수의 this

let obj = {
	value : 100,
    foo : ()=> {
        that = this;
        console.dir(that);	//window
    }
}

- 화살표 함수의 this는 선언 시점의 상위 스코프인 전역객체를 가리키게 된다(현재 스코프는 obj). 따라서 위와같은 경우엔 Window를 가리키게된다.

- 마찬가지로 생성자 함수로 사용이 불가능하다. 그 이유는 생성자 함수의 동작 방식을 보면 된다.