如何在javascript类回调中绑定正确的值？

Question

class SomeClass {
  constructor() {
     this.x = 0;
  }
  getSomething(inputVal) {
   let self = this;
   return new Promise((resolve, reject) => {
    setTimeout(function(){
     if(inputVal){
       self.x = 1;
       resolve();
     }
     else{
       self.x = -1;
       reject();
     }

   }, 10);
 });
}

我必须使用名为self的变量来引用this。这样做有误吗？如果没有，我该怎么做呢？

Answer 1

  

这样做不对吗？

不，显然这种方法并没有错，它只是一种将引用保留到this对象的方法。

但是有一些替代方法可以解决这个问题：

1。使用bind方法。

  

bind（）方法创建一个新函数，当被调用时，它具有它   此关键字设置为提供的值，具有给定的序列   调用新函数时提供的任何参数。

getSomething(inputVal) {
        return new Promise((resolve, reject) => {
            setTimeout(function(){
                if(inputVal){
                    this.x = 1;
                    resolve();
                }
                else{
                    this.x = -1;
                    reject();
                }

            }.bind(this), 10);
        });
 }

2。使用arrow函数。

在arrow个函数之前，每个new 函数都定义了自己的this值。

例如，this在构造函数的情况下可以是新对象。

function Person(age){
  this.age=age;
  console.log(this);
}
let person=new Person(22);

如果创建的函数可以像this那样访问，那么base可以指向到obj.getAge()对象。

let obj={
  getAge:function(){
    console.log(this);
    return 22;
  }
}
console.log(obj.getAge());

arrow函数不会创建自己的this，它只使用this执行enclosing的{​​{1}}值。另一方面，context函数使用父范围的arrow。

this

Answer 2

class SomeClass {
    constructor() {
        this.x = 0;
    }
    getSomething(inputVal) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (inputVal) {
                    console.log(this.x);
                    this.x = 1;
                    resolve();
                }
                else {
                    this.x = -1;
                    reject();
                }

            }, 10);
        });
    }
}

const test = new SomeClass();
test.getSomething(true);

在setTimeout中使用箭头功能