为什么在https://jsfiddle.net/t19va6ff/这行代码中第28行出现错误，但是第32行有效？

Question

想知道为什么第28行抛出一个错误“未定义”，而是一个IIFE内封闭的功能似乎是解决问题

如果什么代码进行了修改，这个代替：

VAR选项卡= [”搜索'，'Era'];

function verifySearchTab(){ 
    console.log("verify search tab"); 
} 

function verifyEraTab(){ 
    console.log("verify era tab"); 
} 

tabs.forEach(tab => { 
    console.log(typeof `verify${tab}Tab`); 
    `verify${tab}Tab`(); 
}); 

Answer 1

回答 就像你在下面，当你只是在一个脚本中声明函数的留言中提到它是window一员，所以你会解决这个问题一样，如果它是一个“对象的成员“或 ”功能“ funcs

var tabs = ['Search', 'Era']; 
 

 
function verifySearchTab(){ 
 
    console.log("verify search tab"); 
 
} 
 

 
function verifyEraTab(){ 
 
    console.log("verify era tab"); 
 
} 
 

 
tabs.forEach(tab => { 
 
    console.log(typeof window[`verify${tab}Tab`]); 
 
    window[`verify${tab}Tab`](); 
 
});

进一步解释为什么是如何工作的我ñ的javascript `字符的帮助做一个字符串函数，所以当你做到以下几点：

console.log(typeof `verify${tab}Tab`); 

输出将是

string

在JavaScript字符串是一个对象，而不是一个功能，但是在您可以通过字符串名称访问对象的成员。所以下面的代码

console.log(typeof window[`verify${tab}Tab`]); 

给

function

使得您如何访问功能不只是一个字符串，这可能更有意义望着这两行代码完成相同的事情

`verify${tab}Tab`(); 
"verifyEraTab"(); 

在第二行中，由于不能执行字符串，第一行执行同样的操作会导致错误。

回答原来的问题

所以你声明funcs这样

var funcs = (function(){ 
    var self = { 
    verifySearchTab:() => console.log("verify search tab funcs") 
    , 
    verifyEraTab:() => console.log("verify era tab funcs") 
    } 
    return self; 
})(); 

这样既verifySearchTab()和verifyEraTab()是funcs

所以这两种方法，当你尝试在运行函数32你可以像funcs这样的成员访问它

funcs[`verify${tab}Tab`](); 

它没有给出错误，因为该方法是funcs

一员，但是当您尝试运行这样

`verify${tab}Tab`(); 

它给你一个错误，因为它不是一个函数的函数，但它是funcs之内的一个函数，因此您必须访问它，因为它是这样的：

funcs[`verify${tab}Tab`]();