Javascript ES6模板字符串函数名称 - Chrome OK，Firefox KO - 看起来像是一个转换问题

Posted 2021-05-07

如何跨浏览器调用动态函数名称？我已经看到了一些方法，但没有像下面那样“优雅”。问题是它在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，它就可以工作。

编辑2这似乎是一个转换问题而不是浏览器问题。正如您所指出的，该代码适用于Chrome和Firefox。我正在使用React和Meteor和Babel。感谢@Jaromanda X提示。

仅供参考，缩小（=生产）Meteor代码也无法在Chrome上运行。

答案

此代码适用于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替换它以避免它。但这完全取决于你的代码所在。

另一答案

速记方法定义可用于对象文字和ES6类的方法声明。

例如：

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

或者在对象内：

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

在您的情况下，您需要以Declaration或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

另一答案

由于这不是一个浏览器问题，而是一个转换问题，我最终以完全不同的方式处理它。它是这样的：

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 OK，Firefox KO - 看起来像是一个转换问题的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript高级ES6常见新特性：词法环境letconst模板字符串函数增强SymbolSetMap

10个最佳ES6特性

10个最佳ES6特性

商城项目05_ES6 - varlet const解析表达式模板字符串箭头函数map reduceObject优化

商城项目05_ES6 - varlet const解析表达式模板字符串箭头函数map reduceObject优化

javascript ES6 - 里面有模板字符串循环的模板字符串