this 가 동작하는 원리와 용법

young0_0·2023년 3월 31일
0

TIL

목록 보기
85/92
post-custom-banner

This

this는 현재 실행 중인 함수의 객체를 참조한다.
함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

this의 4가지 규칙

기본적 바인딩 : 일반 함수 호출에서 this는 전역 객체를 가리킨다.
암시적 바인딩
명시적 바인딩
new 바인딩

1. 기본적 바인딩

일반 함수 호출에서 this는 전역 객체를 가리킨다.
엄격 모드에서 일반 함수 실행 방식을 쓰면 window 객체를 가리키지 않고, this는 undefined가 되어 error를 출력한다.

엄격모드 : 런타임시 js 코드에 대하여 엄격한 pasing 및 error handling을 자발적으로 실행하도록 적용함으로써 일반적인 코딩실수나 안전하지 않는 동작을 포착합니다.

2. 암시적 바인딩

함수가 객체의 프로퍼티 값이면 메소드로서 호출된다.
메소드 내부의 this는 해당 메소드를 소유한 객체, 즉 해당 메소드를 호출한 객체에 바인딩된다.

var obj1 = {
	name: 'LEE',
	sayName: function () {
    	console.log(this.name)
    }
}

var obj2 = {
	name: 'KIM'
}

obj2.sayName = obj1.sayName;

obj1.sayName() //LEE
obj2.sayName() //KIM

3. 명시적 바인딩

call, apply, bind 메소드를 사용하여 명시적으로 this를 지정 한다.

function test(){
	console.log(this)
}

var obj = {name :  'hahaha'}
test.call(obj); //{name: 'hahaha'}

4. new 바인딩

기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다.
생성자 함수를 new없이 호출한 경우, 함수 Person 내부의 this는 전역 객체를 가르키므로 전역변수에 바인딩된다.

this 용법

객체의 메소드에서 this를 사용하여 해당 객체의속성에 접근하거나 수정할 수 있다.
또한 call(),apply 메소드를 사용하여 함수 내에서 this를 지정하여 특정 객체의 속성에 접근하거나 수정 할수있다.

This를 사용하는 큰 차이점?

this를 사용하는 가장 큰 차이점은 함수를 호출하는 방법에 따라 this가 참조하는 값이 달라진다는 것이다.
그리고 이러한 동적인 특성 때문에 this의 값이 예상과 다르게 결정될 수 있다. 따라서 this를 사용할 때는 주의가 필요하다.
특히 콜백 함수나 중첩 함수에서 this를 사용할때 주의가 필요하다. this를 변수에 저장하여 사용하거나 bind()메소드를 사용해서 this를 지정할 수 있다.

profile
그냥하기.😎
post-custom-banner

0개의 댓글