자바스크립트 - this

1. 전역 실행 맥락에서 this는 엄격 모드 여부에 관계 없이 전역 객체를 참조합니다.

// 웹 브라우저에서는 window 객체가 전역 객체
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b); // "MDN"
console.log(b); // "MDN"

 

globalThis 프로퍼티를 사용하여 코드가 실행중인 현재 컨텍스트와 관계없이 항상 전역 객체를 얻을 수 있다

 

 

2. 함수 내부에서 this의 값은 함수를 호출한 방법에 의해 좌우된다. = 'this 에 바인딩할 객체가 동적으로 결정된다'고 한다.

 

함수를 호출하는 방식

1) 함수 호출

2) 메소드 호출

3) 생성자 함수 호출

4) apply / call / bind 호출

var foo = function () {
  console.dir(this);
};

// 1. 함수 호출
foo(); // window
// window.foo();

// 2. 메소드 호출
var obj = { foo: foo };
obj.foo(); // obj

// 3. 생성자 함수 호출
var instance = new foo(); // instance

// 4. apply/call/bind 호출
var bar = { name: 'bar' };
foo.call(bar);   // bar
foo.apply(bar);  // bar
foo.bind(bar)(); // bar

---

function f1() {
  return this;
}

// 브라우저
f1() === window; // true

 

 

▼ 엄격 모드에서 this 값은 실행 문맥에 진입하며 설정되는 값을 유지하므로 다음 예시에서 보여지는 것 처럼 this는 undefined로 남아있다.

function f2() {
  "use strict"; // 엄격 모드 참고
  return this;
}

f2() === undefined; // true

 

 

3. 함수를 어떤 객체의 메서드로 호출하면 this의 값은 그 객체를 사용한다.

 o.f()를 실행할 때 o 객체가 함수 내부의 this와 연결

var o = {
  prop: 37,
  f: function () {
    return this.prop;
  },
};

console.log(o.f()); // 37

 

 

4. 함수를 new 키워드와 함께 생성자로 사용하면 this는 새로 생긴 객체에 묶인다

function C() {
  this.a = 37;
}

var o = new C();
console.log(o.a); // 37

function C2() {
  this.a = 37;
  return { a: 38 };
}

o = new C2();
console.log(o.a); // 38

 

 

5. 함수를 이벤트 처리기로 사용하면 this는 이벤트를 발사한 요소로 설정

// 처리기로 호출하면 관련 객체를 파랗게 만듦
function bluify(e) {
  // 언제나 true
  console.log(this === e.currentTarget);
  // currentTarget과 target이 같은 객체면 true
  console.log(this === e.target);
  this.style.backgroundColor = "#A5D9F3";
}

// 문서 내 모든 요소의 목록
var elements = document.getElementsByTagName("*");

// 어떤 요소를 클릭하면 파랗게 변하도록
// bluify를 클릭 처리기로 등록
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("click", bluify, false);
}

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

this - JavaScript | MDN

 

https://poiemaweb.com/js-this

this | PoiemaWeb