必须使用window.variableName，不知道为什么

Question

我正在使用JS，Angular和Meteor来开发一个使用Youtube API的Web应用程序。在我的一个控制器的构造函数中，我按照 youtube api 过程创建了 youtube 播放器对象。但是，当我尝试在同一控制器的后续函数中引用看似全局的"player"对象时，它似乎超出了范围。

我

几天来一直在与这个问题作斗争，因为"播放器"变量似乎是全局的（没有 var 处理它），直到我遇到了使用 window.variableName 的皱眉做法。如果我使用 window.player = ...有没有人知道为什么播放器对象对其包含的控制器和函数不是全局的？

我仍在学习有关javascript范围的复杂性以及ECMA类风格的方法，因此任何帮助将不胜感激。

我的代码：

import Ionic from 'ionic-scripts';
import { _ } from 'meteor/underscore';
import { Meteor } from 'meteor/meteor';
import { MeteorCameraUI } from 'meteor/okland:camera-ui';
import { Controller } from 'angular-ecmascript/module-helpers';
import { Chats, Messages } from '../../../lib/collections';
export default class ChatCtrl extends Controller {
  constructor() {
    super(...arguments);
    this.currentVideoId = this.$stateParams.videoId;
    this.chatId = this.$stateParams.chatId;
    this.isIOS = Ionic.Platform.isWebView() && Ionic.Platform.isIOS();
    this.isCordova = Meteor.isCordova;
    chat = Chats.findOne(this.chatId);
    if (chat.playerType == "Y") {
      window.player = new YT.Player('video-placeholder', {
        videoId: this.currentVideoId,
        events: {
                  'onReady': this.initTimes.bind(this)
              }
      });
    } else if (chat.playerType == "V") {
      var options = {
        id: this.currentVideoId,
        width: 640,
        loop: false
      };
      var player = new Vimeo.Player('vimeo-placeholder', options);
    }
  playPauseToggle() {
    if (player.getPlayerState() == 2 || player.getPlayerState() == 5) {
      player.playVideo();
      this.playPauseValue = "Pause";
    } else if (player.getPlayerState() == 1) {
      player.pauseVideo();
      this.playPauseValue = "Play";
    }
  }
ChatCtrl.$name = 'ChatCtrl';
ChatCtrl.$inject = ['$stateParams', '$timeout', '$ionicScrollDelegate', '$ionicPopup', '$log'];

Answer 1

所以问题是你在类构造函数中将玩家定义为局部变量。因此，该变量在其他任何地方都不可见 - 例如在您的 playPauseToggle 函数中。

相反，为什么不让你的玩家成为你的类实例的属性呢？

this.player = new YT.Player('video-placeholder'...

然后

playPauseToggle() {
    if (this.player.getPlayerState() == 2 || this.player.getPlayerState() == 5) {
    ... // replace all occurrences of 'player' with 'this.player'

希望这有帮助！