javascript - 在 JavaScript 中调用父级 "class"上的函数

Question

我在将参数传递给 View 组件中的闭包时遇到问题。如果我执行以下操作，我会收到一条错误消息，告诉我 this.updateSelection()不是一个有效的函数。

methods: {
    getSelectedItems() {
        axios.get('api/model/' + this.model.id)
            .then(function(response) => {
                this.updateSelection(response.data.selectedItems);
            })
            .catch(error => {
                console.log(error);
            });
    },
    updateSelection(selectedItems) {
        this.selectedItems = selectedItems;
    },
}

我可以使用 ECMA 6 语法使其工作:

.then(response => {
    this.updateSelection(response.data.selectedItems);
})

但是我不知道如何在没有 ECMA 6 语法的情况下使该函数对闭包可用。就像是:

.then(function(response) => {
    parent.updateSelection(response.data.selectedItems);
})

任何人都可以为我阐明这一点吗？

谢谢。

Answer 1

他们解决这个问题的关键是理解箭头函数和“正常”函数之间的区别。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

我建议你在访问 this 时不要使用 ES5 函数。语境。在构建过程中，转译器(即 babel)将把箭头函数翻译成 ES5。

从历史上看，有几种方法可以绕过这个问题。其中之一是在闭包中声明一个变量，该变量将保存父级的 this 的值。 :

var that = this;
document.addEventListener('click', function() {
  console.log(this); // document
  console.log(that); // "this" from the parent scope
});

另一种方法是使用 bind方法:

document.addEventListener('click', (function() {
  console.log(this); // "this" from the parent scope
}).bind(this));

直到最近才在 React 中常用，但人们无论如何都开始切换到箭头函数，因此需求显着减少。