티스토리 뷰

카테고리 없음

js this에 대하여

실전압축코딩 2023. 7. 11. 11:19 
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

https://poiemaweb.com/js-this

 

this | PoiemaWeb

자바스크립트의 this keyword는 Java와 같은 익숙한 언어의 개념과 달라 개발자에게 혼란을 준다. Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다. this가 객체 자신에 대한 참조 값을

poiemaweb.com

 

1. 함수 호출은 this가 전역 (windwo or global)로 정의된다.

2. 함수 내부의 함수의 this역시 마찬가지. 이는 내부함수의 this가 전역 객체에 바인딩 됨을 의미한다.

3. 메소드로 호출시 해당 메소드를 호출한 객체에 바인딩 된다.

4. 생성자 함수로 생성한 객체는 자기 자신이 생성자 함수의 this가 된다. 여기서 new keyword를 붙이지 않으면, this 는 전역객체가 된다.

function Person(name) {
  // new없이 호출하는 경우, 전역객체에 name 프로퍼티를 추가
  this.name = name;
};

// 일반 함수로서 호출되었기 때문에 객체를 암묵적으로 생성하여 반환하지 않는다.
// 일반 함수의 this는 전역객체를 가리킨다.
var me = Person('Lee');

console.log(me); // undefined
console.log(window.name); // Lee