소개

이번에는 JavaScript의 어둠 ... this에 대해 다양한 각도로 도전하고 싶습니다!

【YouTube 동영상】JavaScript의 어둠 this

this란?

this는 함수 호출자에 대한 링크입니다.

예를 들어, 다음과 같은 경우 test.getName()은 taro를 반환합니다.

this는 getName 함수로 호출됩니다. 그 함수 getName은 test 객체의 함수이므로 this = test 객체입니다.
getName() 함수의 this를 test 객체로 바꾸고 test.name = taro입니다.

const test = {
  name: 'taro',
  getName: function() {
    return this.name;
  }
}

글로벌 this

함수를 읽을 소스를 지정하지 않으면 Window입니다.
그것을 확인합시다.

다음 두 가지를 정의합니다.

먼저 obj.sayThis()를 생각해 보겠습니다.
sayThis()는 obj 객체에서 호출되므로 sayThis 함수의 this는 obj 객체입니다.
따라서 obj.sayThis()는 { name: 'taro' } 를 반환합니다.

다음으로 sayThis()를 생각해 보겠습니다.
여기에는 특히 호출하는 객체가 없기 때문에 Window가됩니다.
그건 그렇고, strict 모드에서 실행하면 undefined가됩니다.

// メソッド
const sayThis = function() { console.log(this) }

// オブジェクト
const obj = { name: 'taro' }

생성자에서의 this

constructor 에서는 new 로 오브젝트를 작성할 수 있어 호출원이 정해집니다.

다음과 같이 정의합니다.

yamada 쪽에서는 new Person 에 의해 오브젝트가 작성되므로, yamada.name 는 taro 를 돌려줍니다.
그러나 tanaka는 객체가 생성되지 않았기 때문에 name of undefined 오류가 발생합니다.

const Person = function(hoge) { this.name = hoge; }

const yamada = new Person('taro')
const tanaka = Person('taro')

프로토타입 메서드 내에서 this

다음과 같이 정의합니다.
여기서, yamada.getName() 라고 하면, taro가 돌려주어집니다.
덧붙여서 Person.getName()의 경우는 Person.getName is not a function이 됩니다.

const Person = function(hoge) { this.name = hoge; }
Person.prototype.getName = function() { return this.name; }

const yamada = new Person('taro')

대조적으로 다음과 같이 prototype을 없애면 yamada.getName is not a function입니다.
또한 Person.getName()의 경우 Person이 반환됩니다.

const Person = function(hoge) { this.name = hoge; }
Person.getName = function() { return this.name }

const yamada = new Person('taro')

중첩 함수의 this

중첩 함수를 사용하면 정의 소스는 어떻게 될 것입니다.

다음을 정의하고 test.sayHello()를 실행하면 위에서 { sayHello: f }, Window가 됩니다.
첫 번째 this 호출자는 sayHello이고 두 번째 this는 호출자가 명시되지 않았기 때문입니다.

const test = {
  sayHello: function() {
    console.log(this)
    const func = function() {
      console.log(this)
    }
    func()
  }
}

arrow 함수에서의 this

중첩 함수에서도 arrow 함수를 사용하면 this 호출자가 결정됩니다.

따라서 다음과 같은 경우 test.sayHello() 는 { sayHello: f }, { sayHello: f } 입니다.

const test = {
  sayHello: function() {
    console.log(this)
    const func = () => {
      console.log(this)
    }
    func()
  }
}

요약

이번은 JavaScript로 헤매기 쉬운 this에 대해 해설해 갔습니다!
과연 모르겠다고 생각하시는 분, 꼭 콘솔 화면 등에서 놀아보세요!

트위터 이나 youtube 에서의 코멘트도 기다리고 있습니다!