JavaScript Promises:带有bind的深层嵌套上下文(this)

Question

因为我正在使用具有在同一原型中调用其他函数的函数的原型,所以我必须使用该方法来引用该方法 this

this创建的问题:

但正因为如此,我必须保留一个使用的背景,this让我形成非常丑陋的.bind(this)墙壁.

这是我为笑而做的一个简化例子.

Killmyself.prototype.fireLeMissles = function () {

    return new Promise(function(resolve,reject) {
        this.anotherFunction(param).then(function(result) {

        someList.forEach(function(item) {
          this.fireLeMissles().then(function(anotherResult){
            promiseList.push(anotherResult)
          })
        },this);
        Promise.all(promiseList).then(function(promiseItem){
          childPlacesIds.forEach(function(childPlaceId) {
            //Do Other Stuff
          },this);
        });
      resolve(result);
    }.bind(this).catch(function(err){
      console.log("Yea, life sucks sometimes.")
    }));
  }.bind(this));
}

Killmyself.prototype.another = function(){
   //Other stuff
}

你可以看到,因为在同一个原型中调用函数,例如this.anotherFunction(......和this.fireLeMissles(......我必须对上下文进行深度保存,现在(在我更大的版本中)使得这些代码难以使用.

题:

这是一个"男人,并利用JavaScript的更难的方面"的事情 - 或者你经验丰富的开发人员看到这样的深层绑定可以避免的简单方法？

Answer 1

如果您使用的是ES6,则可以使用保留上下文的箭头功能.

var counter = function () {
    this.count = 0;
    setInterval( () => { // arrow function
        console.log(this.count++); // context is preserved
    }, 1000)
}
var counter = new counter();

所以,你的代码会变成:

Killmyself.prototype.fireLeMissles = function() {
    return new Promise((resolve, reject) => {
        this.anotherFunction(param).then(result => {
            someList.forEach(item => {
                this.fireLeMissles().then(anotherResult => {
                    promiseList.push(anotherResult)
                });
            });
            Promise.all(promiseList).then(promiseItem => {
                childPlacesIds.forEach(childPlaceId => {
                    //Do Other Stuff
                });
            });
            resolve(result);
        }).catch(err => {
            console.log("Yea, life sucks sometimes.")
        });
    });
}

对于ES5,您既可以.bind像使用方式一样使用,也可以使用this所需的上下文分配给函数中的其他内容,然后在内部函数中使用该变量.

Killmyself.prototype.fireLeMissles = function() {
    var self = this; /// use `self` instead of `this` from now on.
    return new Promise(function(resolve, reject) {
        self.anotherFunction(param).then(function(result) {
            someList.forEach(function(item) {
                self.fireLeMissles().then(function(anotherResult) {
                    promiseList.push(anotherResult)
                })
            });
            Promise.all(promiseList).then(function(promiseItem) {
                childPlacesIds.forEach(function(childPlaceId) {
                    //Do Other Stuff
                });
            });
            resolve(result);
        }).catch(function(err) {
            console.log("Yea, life sucks sometimes.")
        });
    });
}