javascript - ES6。从外部类访问类变量

Question

我在从类之外获取某些变量的值时遇到问题。 我想访问 attack 但由于某种原因它未定义。有人可以帮助我吗？

代码:

index.js(我尝试从中访问变量)

import $ from 'jquery';
import Tone from 'tone'; 
import EnvelopeModule from './envelope.js';

$(document).ready(() => {

  const envelope = new EnvelopeModule();
  console.log(envelope.attack); //undefined

  initApp();
});

envelope.js(我在其中设置变量)

import $ from 'jquery';
import Tone from 'tone';

export default class EnvelopeModule {
  constructor(attack) {
    this.attack = attack;
    this.init();        
  }

  init() {
    this.addListeners();
  }

  addListeners() {
    $('input#attack').on('input change', this.set);
  }

  set() {
    this.attack = $('input#attack').val()/100;
    let val = $(this).val()/100;
    $(this).prev().text(val);
  }
}

Answer 1

您派您的 friend 去邮局领取包裹。他一出门，你就拨通他的手机，问:“嘿，那个包裹里装的是什么？”你的 friend 回答:“我不知道。我还没到邮局。”您可以每隔十分钟给您的 friend 打电话，看看他是否收到了，但这是一个坏主意，因为

1. 这会占用你的 friend 做一些有用的事情的时间，并且
2. 这可能会导致延迟:如果您在他收到包裹之前再次打电话，您将再等九分钟才能知道包裹里有什么

相反，您告诉您的 friend 一收到包裹就给您打电话。没有浪费时间，他一拿起你就知道里面有什么。

那么，这个故事与您的代码有什么关系？

只有在 input#attack 上发生 input 或 change 事件时，attack 属性才保留有意义的值> 元素。您需要在任何有意义的事件发生之前立即获取攻击值。相反，您可以简单地等待:仅当您的 set 函数运行时，attack 才保留有意义的值。

如果您希望 index.js 指定每次 attack 更改时运行的任意代码，您可以通过将函数作为参数传递给构造函数来实现:

export default class EnvelopeModule {
  constructor(attack, runMeWhenAttackChanges) {
    this.attack = attack;
    this.runMeWhenAttackChanges = runMeWhenAttackChanges;
    this.init();        
  }

  init() {
    this.addListeners();
  }

  addListeners() {
    $('input#attack').on('input change', this.set.bind(this));
  }

  set(e) {
    this.attack = $(e.currentTarget).val()/100;
    let val = $(e.currentTarget).val()/100;
    $('input#attack').prev().text(val);
    this.runMeWhenAttackChanges();
  }
}

(请注意，我修复了您在 addListeners 和 set 中处理 this 的错误。)

然后，在您的 index.js 中提供 runMeWhenAttackChanges 函数:

const envelope = new EnvelopeModule(undefined, function() {
    console.log(this.attack);
});

this.attack 的值仅在回调函数内才有意义。任何需要最新 attack 值的操作都应该从该回调内部运行。此回调不会立即运行，并且可能会在周围代码完成很久之后运行多次。您可以将此回调视为每次 attack 更改时运行的一组指令，我们已将这些指令封装在一个函数中。 (回到原来的比喻，这是你的 friend 每次取包裹时给你打电话。)