ReferenceError：找不到变量：onPlayerReady（使用回调时）答案

【问题标题】：ReferenceError: Can't find variable: onPlayerReady (When using callback)ReferenceError：找不到变量：onPlayerReady（使用回调时）
【发布时间】：2019-10-29 12:08:18
【问题描述】：

我正在尝试使用 onPlayerReady() 和 onPlayerStateChange() 作为我的 YT Iframe Api 包装器的回调，但我似乎无法引用我的包装器的实例。如何使用回调来调用包装器的实例？当我的函数在我的包装器之外时，我已经让我的代码工作了，但我希望将它们放在包装器中。

错误：

ReferenceError: Can't find variable: onPlayerReady
Player — player.self-7e1fbb555e29e354bc82162b755809f0b6435967f75b25c572d1953b57364c7c.js:12
onYouTubeIframeAPIReady — player.self-7e1fbb555e29e354bc82162b755809f0b6435967f75b25c572d1953b57364c7c.js:60
(anonymous function) — www-widgetapi.js:141:160
Global Code — www-widgetapi.js:141:215
jquery3.self-e200ee796ef24add7054280d843a80de75392557bb4248241e870fac0914c0c1.js:3842

代码：

Helpers = window.Helpers || {};
Helpers.Google = Helpers.Google || {};
Helpers.Google.YT = Helpers.Google.YT || {};

Helpers.Google.YT = {

   Player: class Player {

    constructor(element = 'ytplayer', options = { playerVars: { controls: 1 },
                                                  height: '390',
                                                  width: '640',
                                                  videoId: 'novideoid',
                                                  events: {
                                                  'onReady': onPlayerReady,
                                                  'onStateChange': onPlayerStateChange
                                                }}, StubPlayerInstance = null ) {

      if (StubPlayerInstance == undefined) {
        this.player = new YT.Player(element, options);
      } else {
        this.player = StubPlayerInstance;
      }
    }

    loadVideoById($element) {
      var videoId = $element.data('video-id');
      var x = new String(videoId);
      this.player.loadVideoById(x);
    }

    init(modalId){
      const thatInstance = this;
      $(modalId).on('show.bs.modal', function(e) {
        thatInstance.loadVideoById($(e.relatedTarget));
      });  
      return this.player;    
    }

   onPlayerReady(event) {
     $('.open-popup').click(function() {
       event.target.playVideo();
     });
     $('.close-popup').click(function(e) {
       player.stopVideo();
     });
   }

   onPlayerStateChange(event) {
     if(event.data === 0) {           
       $('.close.close-popup').click();
     }
    }
  }
}

var player;


function onYouTubeIframeAPIReady() {
  player = new Helpers.Google.YT.Player().init('#video-modal');
}

【问题讨论】：

onPlayerReady 是一个类方法，不是一个独立的变量/函数，您必须通过一些实例或原型来访问它，即someInstance.onPlayerReady 或Player.prototype.onPlayerReady
当我尝试 this.onPlayerReady 或 Player,.prototype.onPlayerReady 时，我无法访问this（来自 onPlayerReady 方法的当前实例）。但它确实被调用了
不可能在它们所在对象的构造函数中引用您想要的方法作为默认参数。尝试在构造函数的主体中应用默认选项，您可以在其中做 i> 可以访问this..

标签： javascript jquery youtube-iframe-api

【解决方案1】：

'onReady': this.onPlayerReady.bind(this)
'onStateChange': this.onPlayerStateChange.bind(this)

【讨论】：