【GAS】메소드를 추가할 때의 this의 행동

이 기사는 논프로 의 제4기 중급 GAS 강좌를 위한 사전 과제를 하는 가운데, 새로 알게 된 것, 몰랐던 것, 깨달은 것, 조사한 것 등을 발표하는 기사입니다.

일의 사정도 있어, 연말에 입회한 논프로연. 입회 얼마 안 되지만 굉장히 아늑하고(사회 정세에 의해 완전 온라인 이행중인데 조금 이상한 표현입니다만), 매우 좋은 배움의 장소가 된다고 느끼고 있습니다.

모임의 중요한 모토이기도 하다”가르치는 것은 2번 배우는 것”을 실행하기 위해서도, 사전 과제로부터 자신의 배움은 아웃풋 해 나갈까 생각했습니다.

이 기사에서는 개체에 관한 발견을 작성하려고합니다. 구체적으로는 GAS에서 this의 동작에 대해입니다.

클래스 정의시의 this

사전 과제 이전의 내 this 의 이해는 인스턴스 메소드의 정의에서 인스턴스 자체를 가리키는 사용법이었습니다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age  = age;
  }
  isAdult() {
    return this.age >= 18;
  }
}

const alice = new Person('Alice', 13);

alice.greet(); // "Hello! My name is Alice."

객체 정의시의 this

인스턴스가 아닌 일반 (?) 객체에도 메서드를 갖게 할 수 있습니다 (사전 과제로 처음 알았다).

const person = {
  name: 'John Doe',
  age: 42,
  isAdult() {
    return this.age >= 18;
  }
};

console.log(person.isAdult()); // true

메소드 추가시의 this

이 person 에 gender 속성과 isMale() 메소드를 갖게 한다고 합니다. isMale() 는 자신의 gender 가 male 인가 어떤가를 돌려주는 메소드입니다. person.isMale 에 function 키워드로 대입하는 것으로 실현할 수 있습니다.

const person = {
  name: 'John Doe',
  age: 42,
  isAdult() {
    return this.age >= 18;
  }
};

person.gender = 'male';
person.isMale = function() {
  return this.gender === 'male';
 }

console.log(person.isMale()); // true

그런데 person의 정의 부분에서는 ES6에서 도입된 생략기법을 사용하고 있습니다(이것도 초견).

const person = {
  ...
  isAdult() { ... }
}

나중에 메소드를 추가 할 때도 ES6 같은 글을 쓸 수 없을까? 라고 생각했습니다.

ES6 이후 도입된 애로우 함수를 사용하여 정의해 봅시다.

const person = { ... };

person.isMale = () => {
  return this.gender === 'male';
}

와이 지금 같다.
그런데 실제로 이것으로 person.isMale() 를 해 보면 false 가 되어 버렸습니다.

const person = { ... };

person.gender = 'male';
person.isMale = () => {
  return this.gender === 'male';
}
console.log(person.isAdult()); // false

this.gender 가 male 가 되어 있지 않다고 하는 것일까? 라고 생각해 this.gender 를 조사해 보면, this.gender 가 undefined 가 되어 있었습니다.

그래서 this 자체도 console.log() 해 보면 this 가 글로벌 객체가 되어 있는 것을 알았습니다.



※answer...라고 하는 것은, 사전 과제의 해답으로서 자신이 동일 프로젝트내에 쓰고 있는 함수들입니다.

객체 정의의 그 안에서 쓰지 않으면, this 는 그 객체를 가리켜 주지 않네요.

요약

그렇다고 해서, 메소드 정의시의 this 의 취급에는 주의가 필요하다는 것을 재차 발견할 수 있었습니다.

쓰면서 조사해 보면, Takahashi 씨가 이미이 테마를 마음껏 다루고있었습니다. 그래서은~라고 하는 느낌이었습니다만, 스스로 써 보는 것으로 공부가 되었다고 생각합니다. 연습도 했다는 기분이 되고, 또 쓰고 싶습니다. 읽어 주신 분의 참고가 되면 다행입니다.