这是箭头函数内部未定义的

Posted 2023-03-11

【中文标题】这是箭头函数内部未定义的

【英文标题】：this is undefined inside arrow function

【发布时间】：2017-07-13 21:33:52

【问题描述】：

我正在尝试在我的箭头函数中访问它：

import myObject from '../myObjectPath';
export const myClass = Fluxxor.createStore(
    initialize() 
        this.list = [];
        this.id = null;
    ,
    myOutsideFunction(variable1) 
        // here this in NOT undefined
        myObject.getMyList(this.id, (myList) => 
            // here this in undefined
            this.list = myList;
         
    );
);

但是在回调函数里面的箭头函数里面是未定义的！！

我正在使用 babel 转译代码：

myOutsideFunction: function myOutsideFunction() 
    var _this = this;
    myObject.getMyList(function (myList) 
        _this.list = myList;
    );
,

【问题讨论】：

绑定this，或将其存储在箭头函数范围之外的临时变量中。

this 的值取决于myOutsideFunction 的调用方式。怎么称呼？

@Jite 使用箭头函数的整个想法是不必绑定 this！

@Felix Kling myOutsideFunction 是从类中的另一个函数调用的。但这应该没关系，因为 myOutsideFunction 有这个。

@Jite Np :)) 虽然它对我不起作用：D

【参考方案1】：

如果this 是箭头函数中的undefined，那么它在箭头之外也是未定义的。箭头函数只是捕获周围作用域的this。

在这种情况下，您将 myOutsideFunction 声明为对象字面量上的方法，并且从不绑定它或执行任何其他将对象调用为 this 的操作。

在调试时，请记住转译器可以重命名变量（并且必须重命名 this 才能正确捕获）。在没有包含重命名的源映射的情况下在控制台中使用原始名称将显示undefined，即使原始值不是。确保在手表或控制台命令中使用转译后的名称。

【讨论】：

奇怪因为它是在函数调用之前写的// here this in NOT undefined，所以this不应该在箭头函数中未定义

@oliv37 严格来说，这是不可能的。箭头函数是一种语言功能，将始终收到相同的this。我不知道有任何运行时与此相关的错误（因为它是箭头函数的基础）。

这就是我的想法！！这应该是不可能的！但我已经测试了几次，我在箭头函数内部得到了 undefined 但是在调用它之前它不是 undefined

@Besat 您是通过转译器或类似的东西（babel、webpack 等）运行此代码吗？如果是这样，你能包括输出吗？编译器可能正在更改一些变量名称，使其在您的控制台中出现未定义，但这仅仅是因为您引用了原始（预编译）名称。

@Besat babel 将不得不重命名this，因为保留了真实名称，通常使用_this。