javascript - 必须使用 window.variableName 并且不知道为什么

Question

我正在使用 JS、Angular 和 Meteor 来开发一个使用 Youtube api 的 Web 应用程序。在我的 Controller 之一的构造函数中，我按照 youtube api 流程创建了 youtube 播放器对象。但是，当我尝试在同一 Controller 内的后续函数中引用看似全局的“玩家”对象时，它似乎超出了范围。

我花了好几天的时间来解决这个问题，因为“player”变量似乎是全局的(没有 var 处理它)，直到我遇到了使用 window.variableName 的令人皱眉的做法。如果我使用 window.player = ...，我只能让 playPause 函数识别播放器对象。有谁知道为什么播放器对象对于其包含的 Controller 和函数来说还不是全局的？

我仍在学习有关 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'

希望这有帮助!