这个 ES6 箭头函数和普通函数的区别？

IT技术 javascript reactjs ecmascript-6
2021-04-04 06:53:49

仍然是 ES6 的新手，所以试图理解为什么下面这两个函数之间存在差异。我正在 React 中工作，并注意到在编写设置状态的非 ES6 函数时出现错误。这发生在 componentDidMount 中。

这种方式在 ES6 中工作并返回我需要的内容：

(pos) => this.setState({
    lat: pos.coords.latitude,
    lng: pos.coords.longitude,
  })

但是，以这种方式抛出错误 - “未捕获的类型错误：this.setState 不是函数”

 function(pos) {
    this.setState({
      lat: pos.coords.latitude,
      lng: pos.coords.longitude
    })
  }

这些不是一回事吗？谁能解释为什么会抛出这个错误？

这是来自 react 类的代码，用于提供更多上下文：

var GeolocationExample = React.createClass({
  getInitialState: function() {
    return {
      lat: '',
      lng: '',
    };
  },

  componentDidMount: function() {
    navigator.geolocation.getCurrentPosition(

      // Where I'm placing each of the above mentioned functions,

      (err) => alert(err.message),
    );
  },

  render: function() {
    return (
      <View>
        <Text>
          <Text style={styles.title}>Initial position: </Text>
          {this.state.lat}
        </Text>
        <Text>
          <Text style={styles.title}>Current position: </Text>
          {this.state.lng}
        </Text>
      </View>
    );
  }
});

任何和所有的帮助表示赞赏。谢谢！

2个回答

不，它们不一样。箭头函数会自动绑定到创建它们的上下文。这意味着

(x) => this.stuff = x

是（大部分）等价于：

(function(x) {
    return this.stuff = x;
}.bind(this))

箭头函数还将保留创建它的函数的arguments,super和new.target。

意思是

(function a() {
  const u = () => console.log(arguments);
  u("whatever");
})("a args");

将打印类似["a args"].

请参阅此处了解更多信息。

还有更多内容，但这是一个很好的介绍。arguments, super, 和new.target使用箭头函数。当this尚未初始化时，也可以创建箭头函数，就像在super()调用之前的类构造函数中一样。
2021-06-03 06:53:49
感谢您的清晰解释 - 非常感谢！
2021-06-09 06:53:49
哦，这是对的。更准确地说，就像 一样this，它们从创建它们的函数中保留这些值。我其实并不知道这一点。谢谢你。
2021-06-20 06:53:49

词法这个

在箭头函数之前，每个新函数都定义了自己的this值（在构造函数的情况下是一个新对象，在严格模式函数调用中是未定义的，如果函数被称为“对象方法”，则是上下文对象，等等）。事实证明，这对于面向对象的编程风格来说很烦人。

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

这就是为什么，当你写：

 this.setState = function() {};
 function(pos) {
    this.setState({
      lat: pos.coords.latitude,
      lng: pos.coords.longitude
    })
  }

的this在this.setState里面的功能被设定为{}（一个空对象）。

当你用=>符号写它时， this 与函数的外部共享，相当于：

 this.setState = function() {};
 var self = this;
 function(pos) {
    self.setState({
      lat: pos.coords.latitude,
      lng: pos.coords.longitude
    })
  }

或者你也可以使用 function(pos){ /* Stuff here */ }.bind(this);

请参阅我的答案中的链接
2021-05-25 06:53:49
这是错误的。这取决于您的匿名函数的调用方式。在这里它似乎根本没有被调用（并且因为它是匿名的，它很可能永远不会被调用）。
2021-05-25 06:53:49
“事实证明，这对于面向对象的编程风格来说很烦人”——等等？没有this，面向对象的编程就不可能像现在这样！
2021-06-01 06:53:49
谢谢 - 非常有帮助！
2021-06-05 06:53:49
不，this在setState被不设定{}。你从哪里得到那个的？
2021-06-18 06:53:49
其它你可能感兴趣的问题
上一篇我可以在浏览器中使用 nodemailer 吗？ 下一篇webpack 包导出中的 react 组件库，用于运行时渲染