为什么在使用promise时没有提供正确的上下文？

Question

我需要使用Promise来执行以下代码中的顺序。我的实际保存是ajax POST，并且只想在成功POST后调用execute。 一切都运行正常，但问题是我无法在执行函数内访问实际的 this 变量。 console.log（this.abc）; 给了我未定义的原因？。

  function MyClass(context) {
      this.abc  = "xyz";
  };

  MyClass.prototype.save = function() {
    console.log(" saving");
    return new Promise(function(resolve, reject){
      resolve();
    });
  };

  MyClass.prototype.execute = function() {
    console.log(" executing");
    console.log(this.abc);
  };

  var myInstance = new MyClass();

  window.addEventListener('keydown', function(e) {
    e.preventDefault();
    if(event.ctrlKey & (event.which==83)) {
      myInstance.save();
    } else if (event.ctrlKey && (event.which==69)) {
      myInstance.save().then(myInstance.execute);
    }
  }, false);

Answer 1

因为您正在传递对某个其他代码执行的函数的引用，而没有指定要用作this的内容。

而不是

myInstance.save().then(myInstance.execute);

你可以做到

myInstance.save().then(function() { myInstance.execute() });

因为在这种情况下，您是使用点表示法调用execute的人，这意味着点左侧的对象将用作this（myInstance）。< / p>

您也可以使用Function.bind

myInstance.save().then( myInstance.execute.bind(myInstance) });

教训是，重要的是如何调用函数，它可能是：

var a = {
  prop: 1,
  b: function() {
      console.log(this.prop);
  }
};

点符号

// `this` will be `a`, logs 1
a.b(); 

松散的函数调用

// If in strict mode, `this` will be undefined, and it will throw an error
// otherwise `this` will be the global object and it will log undefined
var b = a.b;
b();

使用apply或call

var b = a.b;
// Call b passing a as `this` and 2 as its argument which is ignored
// Logs 1
b.call(a, 2);

自己绑定this

var b = a.b.bind(a);
// b has been bound to a, it will correctly output 1
b();
// Even if you try to use another this
b.call({prop: 2}); // Still logs 1