추가공부) JavaScript & TypeScript의 this

ts 함수에대해 공부하던중 this가 나와서 정리

 

자바스크립트의 this

javascript의 this는 함수를 호출할 때 어떻게 호출했는지에 따라 달라진다. 

개발자 도구를 통해서도 확인이 가능하다. 

window임을 확인 가능함.

참고로 window 객체는 브라우저의 요소들과 자바스크립트 엔진, 모든 변수를 담는 객체이다.

 

 

함수 내부에서의 this는 다름을 볼 수 있다. 

 

반대로 객체 내부 a라는 메소드에 this를 넣어보면 아래와 같다. 

let obj = {
	a: function() {
    	console.log(this);
    },
};

obj.a();

obj라는 객체의 메소드 a는 obj를 가르킨다. 

 

// 위의 obj.a를 꺼내서 b라는 변수에 할당하면 this는 window를 출력함을 알 수 있다. 
let b = obj.a;
console.log(b) //window.~~~

때문에 javascript에서 this는 함수로 호출했는지, 객체의 method로 호출했는지가 중요하다. 

 

 

function a (x, y) {
	function b() {
    	console.log(this);
 	   return x + y
	} 
    return b();
}

a(1,2)
//window
//3

→ 중첩함수를 써도 함수 b 내부의 this는 Window를 출력한다. 

단, ' use strict '를 사용한 Strict 모드에서는 ' undefined '이다. 

 

 

Call, Bind, Apply의 this

call, bind, apply는 this를 명시적으로 가르키도록 해준다. 그래서 내부함수에서 this를 사용하면 this가 가르키는 대상을 지정가능하다. 

let obj2 = {c: 'd'}
function b() {
	console.log(this);
}

b(); //Window
b.bind(obj2)(); //obj2
b.call(obj2); //obj2
b.apply(obj2); //obj2


let value = 1;

let obj = {
	value: 100,
    foo: function (){
    	function bar(a, b){
            console.log(this);
            console.log("bar's arguments: ", arguments);
        }
    bar.apply(obj, [1,2]);
    bar.call(obj, 1,2);
    bar.bind(obj, [1,2]);
    }
};

obj.foo();

 

apply, call, bind 결과

 

 

 

화살표 함수의 this

화살표함수 () => {} 는 기본적으로 this를 가지지 않는다. 때문에 this를 사용하면 상위 스코프의 값을 가져온다. Lexical This 라고 불리는 이유중 하나이다. 

let obj = {
	a: () => { console.log(this) }
}
obj.a() //Window

/* 화살함수는 상위 스코프인 Window객체를 가르킨다.  */
function Prefixer(prefix) {
	this.prefix = prefix;
}

Prefixer.prototype.prefixArray = function(arr) {
	//this는 상위스코프인 prefixArray 메소드 내의 this를 가리킴
    return arr.map(x => `${this.prefix} ${x});`
};

const pre = new Prefixer('Hi');
console.log(pre.prefixArray(['Lee', 'Kim']));

//이 코드에서 this는 상위스코프인 prefixArray를 가리킨다. 
Prefixer {prefix: 'Hi'}

 

 

 

TypeScript는 this를 명확하게 잡아낼 수 있다.