Uncaught (in promise) TypeError：map回调内this.data未定义外部正常排查

该错误和Promise逻辑无关，是JavaScript普通函数的this绑定规则导致的：

1. 类方法createScales被调用时，this默认绑定到Chart类的实例对象，因此外层的console.log(this.data)可以正常读取属性。
2. 你给Array.map()传入的是普通匿名函数function(keyname) {...}，普通函数的this不会继承外层作用域的指向，默认严格模式下为undefined，因此在该回调内访问this.data时就会抛出「无法读取undefined的data属性」的报错。
3. 此前filter的回调没有触发报错，是因为该回调内没有访问this，哪怕this指向错误也不会触发异常，不代表该回调内的this指向正确。

以下三种方案均可解决该问题：

方案1：使用箭头函数 #

箭头函数的this会继承外层作用域的指向，直接替换普通匿名函数即可：

this.keymap = this.keynames.domain().map((keyname) => {
  return{
    name: keyname,
    values: this.data.map((d) => {
      return {
        date: d.date,
        key: +d[keyname]
      }
    })
  }
});

方案2：提前缓存外层this #

在map调用前将类实例的this存到临时变量，回调内通过临时变量访问属性：

const that = this;
this.keymap = this.keynames.domain().map(function(keyname) {
  return{
    name: keyname,
    values: that.data.map(function(d){
      return {
        date: d.date,
        key: +d[keyname]
      }
    })
  }
});

方案3：给map传入this绑定参数 #

Array.map支持传入第二个参数作为回调函数内的this指向：

this.keymap = this.keynames.domain().map(function(keyname) {
  return{
    name: keyname,
    values: this.data.map(function(d){
      return {
        date: d.date,
        key: +d[keyname]
      }
    })
  }
}, this);

内容的提问来源于stack exchange，提问作者Bigboss01