在 ES6 中向对象字面量添加 const答案

【问题标题】：Adding a const to an object literal in ES6在 ES6 中向对象字面量添加 const
【发布时间】：2017-12-08 00:35:46
【问题描述】：

我是 JS 新手，我正在尝试更多地了解命名空间。

我在 ES6 中重写了一些动画任务，由于移动和桌面动画使用不同的动画，我决定将移动和桌面动画放到它们自己的命名空间中。

但是我正在努力在这个命名空间中创建滚动魔术控制器，所以我可以对所有移动动画使用相同的控制器。

这是我的动画.js

export const controller = new ScrollMagic.Controller();

/**
 * Mobile animations
 */

export const mobile = {

  servicesHome: {
    init: () => {
      const trigger = document.querySelectorAll('.js-service-trigger');
      const elements = document.getElementsByClassName('js-service-tile__fig');

      trigger.forEach((id, i) => {
        const scene = new ScrollMagic.Scene({
          triggerElement: id,
          reverse: true,
          triggerHook: 1,
          offset: 0,
          duration: 280,
        })
          .on('enter', () => {
            elements[i].classList.add('js-service-tile__fig--is-active');
          })
          .on('leave', () => {
            elements[i].classList.remove('js-service-tile__fig--is-active');
          })
          .addTo(controller);
      });
    },
  },
 };

我更愿意实现类似的目标：

export const mobile = {

  controller: {
    const controller = new ScrollMagic.Controller();
  },

  servicesHome: {
    init: () => {
    .
    .
    .
          .addTo(this.controller);
      });
    },
  },
};

因此控制器可以位于其使用的命名空间内，但我得到“const is a reserved word”错误，并且我无法使用 this.controller 访问控制器

【问题讨论】：

您在哪个浏览器中测试？听起来像是不支持const token/ES6
@danwellman 不，这是一个语法错误。 controller: { const controller 无效。当它看到 const 被用作属性名称时会引发错误。
我正在使用 babel 和 webpack 对其进行编译 .... 我的猜测是我在理解如何在对象文字中的变量中添加构造函数时犯了一个大错误
inside controller: 而不是使用const 使用this.controller = new Scroll...，你的this.controller init 将起作用。 const 是声明常量的保留键，你可以在它自己的闭包中访问它
@evolutionxbox 抱歉我看错了问题，@HenrikEng controller: new ScrollMagic.Controller()

标签： javascript ecmascript-6 namespaces

【解决方案1】：

应该是

const controller = new ScrollMagic.Controller();
export const mobile = {
  controller,
  ...

或者如果 controller 变量没有在其他任何地方使用，就

export const mobile = {
  controller: new ScrollMagic.Controller(),
  ...

【讨论】：

是的，我只想使用专门用于移动动画的来杀死它。感谢到目前为止有效..但是现在无论我使用 this.controller 还是控制器，它都会抛出“控制器未定义”` export const mobile = { controller: new ScrollMagic.Controller(), servicesHome: { init: () => { . . . .addTo(控制器); }); }, }, changeLogo: { init: () => { . . . .addTo(this.controller); }); }, }, }; `
this.controller 在您的代码中不存在，controller 也不存在。在这种情况下，您需要将其称为mobile.controller。
awesome :-) 它有效...不知道我必须在对象中引用函数内部的对象..非常感谢
不客气。如果controller 是servicesHome 对象的属性并且 init 将是普通函数而不是箭头，则可以将其称为this.controller（这也取决于@987654331 @ 叫做）。由于控制器是在另一个对象（mobile）上定义的，所以它应该被称为mobile.controller。