이것은 뷰에서

모든 Vue 인스턴스에는 메서드에 대한 옵션이 있습니다. 이것은 단순히 속성이 Vue 앱에서 사용할 메서드인 객체입니다.

const app = Vue.createApp({
  data() {
    return { count: 4 };
  },
  methods: {
    increment() {
      // "this" will refer to the component instance
      this.count++;
    }
  }
});

Vue는 this 키워드를 인스턴스에 바인딩하여 항상 구성 요소 인스턴스를 참조하도록 합니다. 이 때문에 메서드를 정의할 때 화살표 함수를 사용하지 않는 것이 중요합니다. 화살표 함수는 항상 이것을 부모 컨텍스트에 바인딩하기 때문에 실제로는 Vue 인스턴스가 아니라 전역 객체(창)입니다.

const app = Vue.createApp({
  data() {
    return { count: 4 };
  },
  methods: {
    increment: () => {
      // "this" will refer to the Window
      this.count++;
    }
  }
});

와이 토

그 이유는 모든 일반(화살표가 아닌) 함수는 항상 해당 함수의 소유자를 참조하는 자체this 값을 정의하기 때문입니다.

따라서 이 예에서:

const person = {
  name: 'Ted',
  logName() { 
    console.log(this.name); // Ted
    console.log(this); // person object
  }
};

person.logName();

this는 person의 소유자인 logName 개체를 나타냅니다.

이는 독립 실행형 함수 내부에서도 마찬가지입니다.

function test() { console.log(this); }
test(); // Window is logged

test의 소유자가 창 개체이기 때문입니다.

window.test; // test() { console.log('this', this); }

여기에는 엄청난 예외가 있습니다. this가 다른 메서드 내에서 함수 내부에서 사용될 때마다 바인딩이 손실되고 this가 전역(창) 개체를 참조합니다.

const obj = {
  func1() {
    console.log('func1 this', this); // "this" is obj
    (function func2() {
      // "this" binding is lost here
      console.log('func2 this', this); // "this" is Window
    })();
  }
};

obj.func1();

이것은 매우 기발하고 많은 사람들을 당황하게 하기 때문에 JavaScript 언어의 버그로 간주됩니다.

화살표 함수가 ES6에서 출시되었을 때 더 기대되는 결과를 생성하는 상위 범위에 자동으로 바인딩하도록this 강제하는 방법을 제공했습니다.

const obj = {
  func1() {
    console.log('func1 this', this); // "this" is obj
    (() => {
      console.log('func2 this', this); // "this" is obj
      // "this" was bound to func1's "this" reference
    })();
  }
};

obj.func1();

여기서 정말 중요한 점은 화살표 함수에 자체 함수가 없다는 것입니다this. 화살표 함수 내에서 this 키워드를 사용하면 주변의 일반 함수/메서드 또는 전역 객체(없는 경우)의 this를 참조하게 됩니다.

다른 예를 살펴보겠습니다.

const person = {
  firstName: 'Bob',
  getName() {
    console.log(this.firstName);
  }
};

person.getName();// Bob

person.getName는 일반적인 이전 함수입니다. 즉, 자체 this 참조가 있다는 것을 의미합니다. 우리가 배운 것은 함수의 소유자인 person 개체입니다.

그러면 getName 화살표 함수를 만들면 어떻게 될까요?

const person = {
  firstName: 'Bob',
  getName: () => {
    console.log(this.firstName);
  }
};

person.getName(); // undefined

이 경우 this.firstName는 undefined입니다. 왜요? getName 화살표 함수가 this 키워드를 주변 일반 함수의 this에 바인딩하기 때문에 아무 것도 없습니다. 따라서 전역 객체는 this 에 바인딩됩니다. 그리고 window.firstName 물론 undefined 입니다.

Vue에 다시 연결하기

이를 염두에 두고 Vue 인스턴스 객체를 다시 살펴보겠습니다.

const app = Vue.createApp({
  data() {
    return {
      firstName: 'Bob'
    }
  },
  methods: {
    getName() {
      console.log(this.firstName); // Bob
    }
  },
  created() {
    this.getName();
  }
});

this는 this가 소유자 개체에 바인딩되어 있음을 의미하는 화살표 함수가 아닌 일반 함수 내부에서 사용됩니다. getName 화살표 함수를 만든다면 이전 예제에서 본 것처럼 this가 전역 객체가 됨을 의미합니다.

일반 함수를 사용할 때 Vue는 실제 Vue 인스턴스가 되도록 this 키워드 자체 할당을 수행하므로 소유자 개체는 우리 자신의 사용자 정의 개체를 사용하는 경우와 약간 다릅니다. 이 내부 매핑을 통해 this.otherMethod 및 this.lastName와 같은 데이터 속성 및 메서드에 액세스할 수 있어 편리합니다.

마지막 한가지

화살표 함수를 사용하여 메서드를 정의하면 안 되지만 this 키워드가 올바른 부모 참조에 바인딩되므로 메서드 내부에서 화살표 함수를 사용하는 것이 좋습니다.

const app = Vue.createApp({
  data() {
    return {
      checkmark: '✔',
      letters: ['a', 'b', 'c']
    }
  },
  methods: {
    processLetters() {

      // Using arrow functions inside processLetters is fine!
      const processedArray = this.letters.map(letter => {
        // "this" here binds to the "this" of processLetters
        return `${letter}-${this.checkmark}`
      });

      console.log(processedArray); // ["a-✔", "b-✔", "c-✔"]
    }
  },
  created() {
    this.processLetters();
  }
});

내 블로그jsbits-yo.com에서 더 많은 #JSBits를 확인하세요. 또는 나를 팔로우 하세요!