相关疑难解决方法(0)

我刚刚在JavaScript中遇到了一个有趣的情况.我有一个类,其方法使用object-literal表示法定义多个对象.在这些对象中,this正在使用指针.从程序的行为,我推断出this指针指的是调用方法的类,而不是文字创建的对象.

这似乎是随意的,尽管这是我期望它工作的方式.这是定义的行为吗？跨浏览器安全吗？有没有任何理由可以解释为什么它超出"规范如此说明"的方式(例如,它是否是一些更广泛的设计决策/哲学的结果)？简化代码示例:

// inside class definition, itself an object literal, we have this function:
onRender: function() {

    this.menuItems = this.menuItems.concat([
        {
            text: 'Group by Module',
            rptletdiv: this
        },
        {
            text: 'Group by Status',
            rptletdiv: this
        }]);
    // etc
}

在ES6中,这两个都是合法的:

var chopper = {
    owner: 'Zed',
    getOwner: function() { return this.owner; }
};

并且,作为速记:

var chopper = {
    owner: 'Zed',
    getOwner() { return this.owner; }
}

是否可以使用新的箭头功能？在尝试类似的东西

var chopper = {
    owner: 'John',
    getOwner: () => { return this.owner; }
};

要么

var chopper = {
    owner: 'John',
    getOwner: () => (this.owner)
};

我收到一条错误消息,提示该方法无权访问this.这只是一个语法问题,还是你不能在ES6对象中使用fat-pipe方法？

我已经看到"this"关键字如何在函数中起作用？,但我不认为它回答了以下问题.

鉴于此代码:

var MyDate = function(date) {
    this.date = date;
};

var obj1 = {
    foo: new Date(),
    bar: new MyDate(this.foo)  //  this.foo is undefined
};

var obj2 = {};
obj2.foo = new Date();
obj2.bar = new MyDate(this.foo);  //  this.foo is undefined

var obj3 = {
    foo: new Date(),
    bar: new MyDate(obj3.foo)
};

var obj4 = {};
obj4.foo = new Date();
obj4.bar = new MyDate(obj4.foo);

为什么前两次尝试失败,但最后两次失败？如果this没有绑定到当前对象的文字,什么是它必然？

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

这种方式在ES6中工作并返回我需要的东西:

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

但是,以这种方式抛出一个错误 - "Uncaught TypeError: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> …