Vue.js разница между объявлениями методов

Question

То, что я заметил сегодня, смутило меня.

Когда я впервые использовал Vue, было два распространенных способа определения метода.

methods: {
    foo: () => {
        //do something
    }
}

и

methods: {
    foo() {
        //do something
    }
}

Оба работали без проблем.

Сегодня я определил метод, как в первом примере, и у меня возникли проблемы с областью действия this внутри функции.

Для контекста:

У меня есть данные, определенные так:

data() {
    return {
        fooVar: ''
    }
}

и мой метод был определен следующим образом.

methods: {
    foo: () => {
        console.log('Foo: '+this.fooVar);
    }
}

Когда я проверил консоль, она сказала

Foo: undefined

Затем я изменяю объявление метода на

foo() {
    console.log('Foo: '+this.fooVar)
}

и все работало без проблем.

Так как я думал, что foo() {...} и foo: () => {...} - это одно и то же (кроме самого объявления), мне было интересно, изменяется ли область действия функции между этими двумя способами.

Меняется ли оно и если да, то почему оно меняется?

Answer 1

Это не столько вопрос о Vue, сколько о самом javascript.

Короче говоря, функции стрелок (определенные с помощью (x) => {doSomething (x);} не совпадают с обычными функциями. Они не имеют своего собственного "this" и имеют доступ только к определенной им области действия). в (если нет области видимости, по умолчанию это window или global (в nodejs)). Их желательно использовать в местах, где они не функционируют как методы для экземпляра объекта.

Answer 2

Вы наткнулись на существенную разницу между «классическим» объявлением функции и fat arrow объявлением.

Основное различие связано с тем, как обрабатывается this. При использовании function для объявления функции вы получите новый объект this (обратите внимание, что иногда новый объект this фактически undefined). При использовании объявления fat arrow вы в конечном итоге будете использовать this из области, в которой объявлена ​​функция.

Основная причина, по которой была введена жирная стрелка, заключается в том, что в обратных вызовах при желании получить доступ к объему объявления this вам пришлось сохранить это значение под другим именем и использовать его. Например

function doSmth () {
 var times = 0
 var that = this //or var self = this
 setInterval( function () {
  that.times ++
  console.log(that.time)
 }, 1000)
}

Это было громоздко, и был введен синтаксис жирной стрелки. Также новый синтаксис короче и (возможно) легче для понимания.

Другое важное различие между объявлением fat arrow и function заключается в том, что Function.apply не работает при объявлении жирной стрелки. Поскольку this привязан к объявляемой области, он не изменяется при вызове на apply. Это важно, потому что есть библиотеки, рассчитывающие на то, что они могут изменить this при вызове обратного вызова. Они обычно делают это различие известным в документах, но важно знать о различии.