Lexical this

Question

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

这种方式在ES6中起作用并返回我需要的东西：

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

然而，以这种方式抛出错误 - ＆＃34;未捕获的TypeError：this.setState不是函数＆＃34;

 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>
    );
  }
});

感谢任何和所有帮助。谢谢！

Answer 1

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

(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"]之类的内容。

有关详细信息，请参阅here。

Answer 2

Lexical this

在箭头函数之前，每个新函数都定义了自己的this值   （构造函数中的新对象，在严格模式下未定义   函数调用，如果函数被调用为上下文对象   ＆＃34;对象方法＆＃34;等）。事实证明这很烦人   面向对象的编程风格。

来自：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.setState = function() {};
 var self = this;
 function(pos) {
    self.setState({
      lat: pos.coords.latitude,
      lng: pos.coords.longitude
    })
  }

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

这个ES6箭头功能和常规功能之间的区别？

2 个答案:

Lexical this