Javascript ES6 模板字符串函数名称 - Chrome 好的，Firefox KO - 似乎是一个转译问题

Question

如何跨浏览器调用动态函数名？我已经看到了一些方法，但是 none as "elegant" 如下所示。问题是它在 Chrome 中工作，但在 Firefox 和 Safari 中不工作。

如果我打电话给

const component = "a";
this[component]() // console: Called a
this[`${component}`]() // console: Called a

在Chrome上它工作正常，函数被正确调用。在 Firefox 上显示

TypeError: this[("" + component)] is not a function

如果我想实现这个应该怎么做？

编辑以添加更多上下文

框架是 React。

示例：

    export default class MyComp extends Component {

    a() {
        console.log("Called a");
    }
    b() {
        console.log("Called b");
    }
    c() {
        console.log("Called c");
    }

    renderAThing(component) {
        return this[component]();
    }

    render() {
        return this.renderAThing("a");
    }
}

如果我在 render() 中直接调用 thiscomponent 就可以了。

EDIT 2 看来这是一个转译问题而不是浏览器问题。正如您所指出的，该代码对 Chrome 和 Firefox 有效。我将 React 与 Meteor 和 Babel 一起使用。感谢@Jaromanda X 的提示。

仅供参考，缩小的（=生产）Meteor 代码也不适用于 Chrome。

Answer 1

此代码适用于 Firefox 58：

function a() {
  console.log("Called a");
}

function b() {
  console.log("Called b");
}

function c() {
  console.log("Called c");
}

const component = "a";
this[component]() // console: Called a
this[`${component}`]() // console: Called a

但我想您的问题是 this 关键字。您可以将其替换为 window 以避免它。但这完全取决于您的代码在哪里。

Answer 2

Shorthand 方法定义可以用在对象字面量和 ES6 的方法声明中类.

例如：

class myClass {
    a() {
        console.log("Called a");
    }
    b() {
        console.log("Called b");
    }
    c() {
        console.log("Called c");
    }
}

或对象内：

var myObject = {  
  a() {...},
  b() {...}
  .
  .
}

在您的情况下，您需要将函数创建为 Declaration or Expression:

function a() {
  console.log("Called a");
}
function b() {
  console.log("Called b");
}
function c() {
  console.log("Called c");
}

const component = "a";
this[component]() // console: Called a
this[`${component}`]() // console: Called a

Answer 3

因为这不是浏览器问题而是转译问题，所以我最终以完全不同的方式处理它。它是这样的：

export default class DateTimePicker extends Component {
getComponentValue(component) {
    const { value } = this.props; // React properties

    if (!value) return null;
    if (component === "a") return value.getA();
    if (component === "b") return value.getB();
    return null;
}

renderA(component) {
    const componentValue = this.getComponentValue(component);

    return (
        <div>{componentValue}</div>
    );
}

render() {
    return (
        <div>
            {this.renderA("a")}
        </div>
    );
}
}

我不是很满意，但我想现在还可以。

Javascript ES6 模板字符串函数名称 - Chrome 好的，Firefox KO - 似乎是一个转译问题

Javascript ES6 template strings function names - Chrome OK, Firefox KO - Seems like a transpilation issue

javascript

meteor

ecmascript-6

reactjs

template-strings