在JavaScript ES6中从一个函数调用另一个函数

Question

我正在使用es6 javascript和babel，尝试使用xhr使用两个函数进行ajax调用，但是遇到了错误Uncaught TypeError: this.post is not a function

在es6 javascript中，如何正确地从同一个类中定义的另一个函数调用函数？

感谢您的答案，这是我的代码

import alt from '../../alt';
import cookie from 'react-cookie';

class LoginActions {
  constructor(){
    this.generateActions(
      'updatePassword',
      'updateName',
      'loginSuccess',
      'loginFail',
      'remember'
    );
  }   
    // Generic get request
    post(url, data, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    callback(null, xhr.responseText);
                } else {
                    callback(xhr.statusText);
                }
            }
        };
        xhr.send(data);
    }

    // Get actual content
    login(name, password, remember) {
      var data = "name="+name+"&password="+password+"&remember="+remember;
        this.post('api/login', data, function(err, data) {
            if (!err) {
              this.actions.loginSuccess(data.message);
            } else {
                this.actions.loginFail(JSON.parse(data.message));
            }
        }).bind(this);
    }




}

export default alt.createActions(LoginActions);

编辑1：这是我调用登录函数的方式/同时在上面向xhr请求传递数据。

handleSubmit(event){
    event.preventDefault();

    var name = this.state.name;
    var password = this.state.password;
    var remember = this.state.remember;

    LoginActions.login(name, password, remember);

  }

- xtabbas

---

请问您能展示一下如何调用 login 函数吗？ - L_K

Answer 1

你的方法login()和post()是实例方法，而不是静态方法。因此，您需要使用new创建一个LoginActions对象的实例，以便在该对象上正确调用这些方法。

或者，如果您实际上不需要具有实例数据的实例，则使所有方法都为静态方法，并将其称为LoginActions.post()和LoginActions.login()，而不是使用this。

相反，您正在尝试混合和匹配。您正在调用LoginActions.login()，这是一个静态类型调用，然后在login()内部，您正在尝试引用this，这假定一个实例。

- jfriend00

---

嗨@jfriend00，昨天在阅读了您的答案后，我开始使用superagent进行ajax调用，并且在ajax请求结束后，我能够在静态方法login();中使用this.actions.*。但是今天我重新安装了节点模块，我又陷入了同样的问题...当在login()的静态方法中使用时，this.actions.*会给我一个未定义的值...发生了什么？您能否解释一下我该怎么做才能解决这个问题？请阅读此内容以获取进一步的澄清http://stackoverflow.com/questions/39952422/having-trouble-accessing-react-actions-in-isomorphic-application - xtabbas

@eersteam - 你明白 this 只能用于通过 new 创建的对象实例，而不能用于静态方法吗？这是 JavaScript 面向对象开发的基本概念。如果你要使用 this，那么你需要一个对象实例。 - jfriend00

Answer 2

尝试以下这些方法：

1. 如@jfriend00所建议的，创建LoginAction类的实例并调用login方法：

   var loginAction = new LoginActions();
loginAction.login(name, password, remember);

2. 在LoginActions类中定义generateActions方法。

3. this.post('api/login', data, function(err, data) { if (!err) { this.actions.loginSuccess(data.message); } else { this.actions.loginFail(JSON.parse(data.message)); } }).bind(this);
   在这里，您似乎正在尝试将this绑定到回调函数。但实际上，您正在将this绑定到post方法的返回值。要将this绑定到回调函数， this.post('api/login', data, function(err, data) { if (!err) { this.actions.loginSuccess(data.message); } else { this.actions.loginFail(JSON.parse(data.message)); } }.bind(this));
   注意是function(){}.bind而不是post(function(){}).bind

- Vigneshkumar Chinnachamy.M