从Promise访问“ this”之外的JavaScript

Question

我什至不知道该怎么表达我的问题，在我完全搞清楚之前，这是我的代码：

className.prototype.requestData = function (start, end) {
    client.server.functionName(parameters)
        .done(function (msg) {
            if (msg) {                
                this.process(msg); //this belongs to client, not className as I want
            }
        })
        .fail(function (error) {
            console.log('failed: ' + error);
        });
}

如您所见，我需要调用process对返回的数据进行操作，并且我不想使用为它定义的变量，我想使用this ，并且我猜这是不可能的，是否有更好的方法可以实现我的目标？

谢谢

Answer 1

要做到这一点的方法之一是存储this变量中，以便日后访问它：

className.prototype.requestData = function (start, end) {
    var _this = this;
    client.server.functionName(parameters)
        .done(function (msg) {
            if (msg) {                
                _this.process(msg); //this belongs to className as you want
            }
        })
        .fail(function (error) {
            console.log('failed: ' + error);
        });
}

使用bind ：

className.prototype.requestData = function (start, end) {
    client.server.functionName(parameters)
        .done(function (msg) {
            if (msg) {                
                this.process(msg); //this belongs to className as you want
            }
        }.bind(this))
        .fail(function (error) {
            console.log('failed: ' + error);
        });
}

否则，请使用箭头功能（在其他答案中提到），但是如果您需要访问this es，更多详细信息和示例，则第一个将是您最好的选择： https : //medium.freecodecamp.org/learn-es6-the-涂料途径第二部分箭头功能和此关键字381ac7a32881

Answer 2

如果您使用的是ES6，则可以使用async / await：

className.prototype.requestData = async function (start, end) {
    try {
        let result = await client.server.functionName(parameters);
        if (result ) {                
            this.process(result);
        }
    } catch (err) {
        console.log('failed: ' + err);
    }
}

如果要“链接”它们，可以执行以下操作：

try {
    let result = await client.server.functionName(parameters);
    if (result) {                
        this.process(result);
    }
    // You can just call each in succession
    let other_result = await client.server.someOtherAsyncFunc(other_params);
    if(other_result) {
        // Do more stuff
    }
} catch (err) {
    console.log('failed: ' + err);
}

// You can still call more promise-based functions after the try-catch block
let some_result = await client.server.yetAnotherAsyncFunc(more_params);
// Do other stuff with some_result

Answer 3

假设您在支持它们的环境中（此时基本上不是IE，则可以使用Arrow Functions） 。 从链接：

在全局上下文中执行时，箭头函数不会重新定义其自身。 而是使用封闭词法上下文的this值，等效于将其视为封闭值。

className.prototype.requestData = function (start, end) {
    client.server.functionName(parameters)
        .done((msg) => {
            if (msg) {                
                this.process(msg); //this belongs to client, not className as I want
            }
        })
        .fail((error) => {
            console.log('failed: ' + error);
        });
}

如果没有箭头功能，则必须将其存储在闭包变量中。 否则是不可能的。

Answer 4

className.prototype.requestData = function (start, end) {
  var thisClassName = this;

  client.server.functionName(parameters)
    .done(function (msg) {
      if (msg) {
        thisClassName.process(msg);
      }
    })
    .fail(function (error) {
      console.log('failed: ' + error);
    });
}

// or in ES6 use arrow-function:

className.prototype.requestData = function (start, end) {
  client.server.functionName(parameters)
    .done((msg) => {
      if (msg) {
        // this is the instance of className.
        this.process(msg);
      }
    })
    .fail((error) => {
      console.log('failed: ' + error);
    });
}