this 가 동작하는 원리와 용법 그리고 차이

 

this 사용 규칙

JavaScript에서 가장 난해하게 쓰이는 곳 마다 바뀌는 this 이다. |
this 는 4가지 규칙으로 쓰이고 그 공식을 바탕으로 정해진 결과를 가져온다.

함수안에서 this를 쓰면 함수의 내용만으로는 this가 어떤 값을 가져오는 지 알 수 없다. 함수가 어떤 방식으로 실행하느냐에 따라 this 결정된다.

 

1. 일반 함수 실행 방식

• 아래 있는 strict mode가 아닌 이상 무조건 글로벌 객체를 가리킵니다.

var age = 1; // global object
function foo() {
  console.log(this.age);
  //this === global object : 브라우저에서는 window를 가리킨다.
}

foo(); // 1 (글로벌 객체 실행)

new foo(); // undefined (실행 방식이 다르다 (4번 방식))

var age = 100;

function foo() {
  var age = 99;
  bar(age);
}
function bar(age) {
  console.log(this.age); // 100
}

foo(); // 100

 

💡 Strict mode : 엄격한 모드

• 개발 면접에 strict mode (opens new window)질문이 많이 나다고 하니 꼭 숙지 할것!
• 엄격한 모드에서 일반 함수 실행 방식을 쓰면 window객체를 가리키지 않는다. 
  그 결과 this는 undefined가 되어 error가 출력된다.
• 개발 할 때 window 객체를 본인도 모르게 건드려 에러 발생을 막기 위해 채택했다고 한다.

"use strict";

var name = "nkh";

function foo() {
  console.log(this.name); // 'this' === undefined // error
}
foo();

 

2. 암시적 바인딩

• 함수 호출이 객체의 property로 호출되면 this는 해당 객체에 바인딩된다.
• nkh.foo() : foo함수에서의 this는 nkh을 가리킨다.
• 2 depth 이상 함수 호출이 들어가면 상위 스코프의 this로 바인딩된다.
• 암시적 바인딩을 콜백으로 넘겨주면 바인딩이 끊긴다.

3. function.prototype.call, apply, bind

• 명시적 바인딩의 this는 위 세함수의 파라미터로 들어온 객체로 바인딩된다.

 

4. 생성자 함수 new

• new함수를 실행하면 해당 함수의 값은 빈 객체가 된다.
• new와 같이 쓰는 this는 return 문이 없어도 자동으로 return으로 할당된다.
• 강제로 상수를 return 시켜도 return문은 작동하지 않는다.
• 그러나 객체를 return하면 함수는 객체 return 값을 채택합니다.

 

자세한 내용은 아래 참고사이트를 확인하자! ( 반드시 확인하기)

자바스크립트에서 this의 규칙

 

 

 

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

 

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