코어 자바스크립트 - this

 

 

자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 상황에 따라 this가 바라보는 대상이 달라진다.

 

 

전역 공간에서 this

전역 공간에서 this는 전역 객체를 가리킨다. 브라우저 환경에서는 window, Node.js 에서는 global을 참조한다.

 

브라우저 환경

 

 

 

 

 

함수 호출과 메서드 호출에서 this

 

메서드는 호출할 경우에만 메서드로 동작하고, 그렇지 않으면 함수로 동작한다. 함수 앞에 점(.)이 있는지 여부만으로 함수 호출과 메서드 호출을 구분한다.

 

 

 

- 함수를 함수로서 호출한 경우 this는 전역 객체를 참조한다. 메서드의 내부 함수에서도 같다.

- 함수를 메서드로 호출한 경우 this는 메서드 호출 주체(메서드명 앞의 객체)를 참조한다. 위 예제에서는 obj를 참조한다.

 

 

 

 

 

 

this를 바인딩 하지 않는 함수 - 화살표 함수

 

ES6에서는 함수 내부에서 this가 전역객체를 바라보는 문제를 보완하고자, this를 바인딩하지 않는 화살표 함수를 새로 도입했다. 화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 빠지게 되어, 접근하고자 하면 스코프체인상 가장 가까운 this에 접근하게 된다.

 

 

 

 

 

 

 

콜백 함수 내부에서의 this

 

콜백 함수도 함수이기 때문에 기본적으로 this가 전역객체를 참조하지만, 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조하게 된다.

 

0.3초뒤 전역객체 출력

 

버튼 클릭 시 지정한 엘리먼트와 클릭 이벤트 객체 출력

addEventListener 메서드는 콜백 함수를 호출할 때 자신의 this를 상속하도록 정의되어 있다.

 

 

 

 

 

 

생성자 함수 내부에서의 this

 

생성자 함수는 어떤 공통된 성질을 지니는 객체들을 생성하는 데 사용하는 함수이다.

new 명령어와 함께 함수를 호출하면 해당 함수가 생성자로서 동작하게 된다. 호출된 경우 내부에서의 this는 생성될 인스턴스를 참조한다.

 

this는 choco 인스턴스, nabi 인스턴스를 가리킨다

 

 

 

 

 

 

 

명시적으로 this를 바인딩하는 방법

앞에서 상황별로 this에 어떤 값이 바인딩 되는지 살펴보았다. 이런한 규칙을 깨고 this에 별도의 대상을 바인딩 하는 방법이 있다.

 

 

call 메서드

call 메서드는 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령이다. 이 때 call 메서드의 첫 번째 인자를 this로 바인딩하고, 이후의 인자들을 호출할 함수의 매개변수로 한다. 

 

 

 

 

 

 

apply 메서드

apply 메서드는 call 메서드와 기능적으로 완전히 동일하다. apply 메서드는 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다.

 

 

 

 

 

call 메서드 / apply 메서드 활용

- 생성자 내부에서 다른 생성자를 호출

 

생성자 내부에 다른 생성자와 공통된 내용이 있을 경우 call 또는 apply를 이용해 간단하게 반복을 줄일 수 있다.

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
}

function Student(name, gender, school) {
  Person.call(this, name, gender);
  this.school = school;
}

function Employee(name, gender, company) {
  Person.apply(this, [name, gender]);
  this.company = company;
}

var by = new Student('보영', 'female', '단국대');
var jn = new Employee('재난', 'male', '구골');

 

 

 

 

여러 인수를 묶어 하나의 배열로 전달하고 싶을 때 - apply 활용

 

ES5 이하의 환경에서는 배열에서 최대/최소값을 구해야 할 경우 if 문을 사용해야 해서 코드가 불필요하게 길어진다. apply를 적용하면 훨씬 간단해진다.

var numbers = [10, 20, 3, 16, 45];
var max = Math.max.apply(null, numbers);
var min = Math.min.apply(null, numbers);
console.log(max, min); // 45 3

 

참고 ES6 펼치기 연산자

const numbers = [10, 20, 3, 16, 45];
const max = Math.max(...numbers);
const min = Math.min(...numbers);
console.log(max, min);

 

 

 

 

 

 

 

bind 메서드

call 과 비슷하지만 즉시 호출하지는 않고넘겨 받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드이다. 새로운 함수를 다시 호출할 때 인수를 넘기면 기존 인수들의 뒤에 이어서 등록된다.

즉 bind 메서드는 함수에 this를 미리 적용하는 것과 부분 적용 함수를 구현하는 두 가지 목적을 지닌다.

 

 

 

- name 프로퍼티

bind 메서드를 적용해서 새로 만든 함수는 name 프로퍼티에 'bound' 접두어가 붙는다. 기존 call이나 apply보다 코드를 추적하기에 더 수월해진 면이 있다.

 

 

 

 

 

 

 

별도의 인자로 this를 받는 경우(콜백 함수 내에서의 this)

요소를 순회하면서 콜백 함수를 반복 호출하는 내용의 일부 메서드(forEach, map, filter 등)는 별도의 인자로 this를 받기도 한다.

 

// forEach(callbackFn, thisArg)

const counter = {
  count: 0,
  add: function (numbers) {
    numbers.forEach(function (num) {
      this.count += num;
    }, this); // 두 번째 인자로 this 전달
  }
};

counter.add([1, 2, 3]);
console.log(counter.count); // 6

 

 

 

 

 

코어 자바스크립트를 읽고 정리한 글입니다.

 

https://product.kyobobook.co.kr/detail/S000001766397

코어 자바스크립트 | 정재남 - 교보문고