javascript - 无法调用 - 这个 - 在 youtube api 事件中(onReady 等)

Question

我不能在我的函数中调用任何函数或变量

我有 onReady 事件(youtube api 事件)

同样，当我执行 console.log(this) 时，结果在函数内部未定义

这是我的 typescript 代码

isOn :boolean =   false;

createPlayer(): void {
  return new window['YT'].Player(this.youtube.playerId, {
    height: this.youtube.playerHeight,
    width: this.youtube.playerWidth,
    playerVars: {
      rel: 0,
      showinfo: 0
    },
    events: {
      'onReady': this.onPlayerReady,
      'onStateChange': this.state,
    }
  });
}


public state(event) {
  this.isOn = true; //here is the problem and the result is not defined 
}

//this class from ionic 2

Answer 1

你应该像这样使用箭头函数:

isOn :boolean =   false;

createPlayer(): void {
  return new window['YT'].Player(this.youtube.playerId, {
    height: this.youtube.playerHeight,
    width: this.youtube.playerWidth,
    playerVars: {
      rel: 0,
      showinfo: 0
    },
    events: {
      'onReady': () => { /* Put your logic here! */ }
      'onStateChange': () => { this.isOn = true; /* Now it should work! */ }
    }
  });
}

当使用常规函数时，this 关键字引用函数本身，但是当使用箭头函数时，this 属性不会被覆盖并且仍然引用组件实例(您定义 navCtrl 属性的地方) .