Question

我正在使用lodash去抖动函数调用，但我想知道为什么我的this值没有像我期望的那样继承范围。

这些是我的Vue组件的相关部分。

import debounce from 'lodash/debounce';

watch: {
    query: debounce(() => {
        this.autocomplete();
    }, 200, {
        leading: false,
        trailing: true
    }),

上述情况不起作用，因为我的this值未指向Vue组件，而是显示如下对象：

Object
    __esModule: true
    default: Object
    __proto: Object

我的箭头语法是不是要继承this的上下文？

以下似乎工作正常：

query: debounce(function test() {
    this.autocomplete();
}, 200, {
    leading: false,
    trailing: true
})

对此可能有一个简单的答案，但我希望有人可以帮助我。

Answer 1

请参阅https://vuejs.org/v2/guide/instance.html#Properties-and-Methods

不要在实例属性或回调上使用箭头函数（例如vm.$watch('a', newVal => this.myMethod()))。由于箭头函数绑定到父上下文，this将不是您期望的Vue实例， this.myMethod将是未定义的。

同样的限制适用于观察者，你必须使用这样的东西：

watch: {
    query: function() {
        return debounce(() => {
            this.autocomplete();
        },
        200,
        {
            leading: false,
            trailing: true
        });
   }
}

Answer 2

这只是解释箭头函数中this误解的唯一答案。

这如何在箭头功能中起作用？

词法函数中的

this总是指周围的范围。那可以是：

最近的周围函数
最近的周边模块
全球范围

如果我们查看您的代码，并且我们假设您正在使用ES6模块（从import/export语句判断）：

import debounce from 'lodash/debounce';

export default {
    watch: {
        query: debounce(() => {
            this.autocomplete();
        }, 200, {
            leading: false,
            trailing: true
        }),
    }
};

让我们看看清单：

<强> 1。最近的周围函数

箭头功能没有周围功能。一个例子是：

var obj = {
    a: function() {
        return () => {
            console.log(this);
        }
    }
};

obj.a()(); // `this` refers to `obj`, because `this` refers to `obj` in the surrounding function `a`

<强> 2。最近的周边模块

由于我们在这种情况下处于（假）模块，this在模块范围内被定义为伪模块对象（可能是一个babel或webpack对象？）。

Object
    __esModule: true
    default: Object
    __proto: Object

似乎是因为Vue默认绑定了这些属性，方法和事件

这是真的，它是vue的一个非常有用的功能。但在这种情况下它并没有帮助我们，因为 this无法在箭头函数中被覆盖，它总是引用周围的范围。

请查看以下链接，以便更深入地了解箭头功能：http://exploringjs.com/es6/ch_arrow-functions.html#_variables-that-are-lexical-in-arrow-functions

Vue手表[胖箭范围]提供错误的上下文

2 个答案: