javascript - 当我导出调用 func B 和 C 的函数 A 而没有显式导出 B 和 C 时，技术上会发生什么情况？

Question

我目前正在研究运行在 Gulp、Babel7 和 Webpack 4 上的 ZURB foundation 6.4 框架。我正在试验 ES6 导出/导入功能。

现在我有以下 JS 导出以下代码，然后是导入它的 JS:

//JS exporting
 function consoletest(){
  console.log("HelloRequire!")
}

 function commonAJAXCall(){
  return $.get('https://jsonplaceholder.typicode.com/todos/1', {

      }).then((response) => {
        response = JSON.stringify(response)
        console.log(response)
        console.log("AJAX happened")
        return response
  })
}

 export async function productnamesGetter(){
  let productNameElements = document.getElementsByClassName('customProductCardName')
  await commonAJAXCall()
  console.log("result is ", productNameElements)
}


//JS importing

import * as myModule from './lib/eCommerceLogic.js'
$("#AJAXproductnames").on("click",  function(){

   myModule.productnamesGetter()

})

现在我已经尝试过如果我尝试调用函数 B 或 C 会发生什么:我得到一个未定义的错误。

完全没问题，我觉得这太棒了!但我真的很感兴趣这实际上是如何在 ES6 的技术方面完成的。它如何使调用函数 A 可以访问函数 B 和 C，但对于未“嵌套”在导出函数 A 中的显式调用仍然无法访问？

Answer 1

带闭包。

模块中的代码在导入时执行。所以，我们可以用这个 IIFE 来表示它:

const imported = (()=>{
  "use strict";
  //module code
  return exported;
})();

好吧，它不是像这样完全完成的，而是类似的。

所以，你可以这样想象:

const foo = (()=>{
  "use strict";
  const foo = ()=>{
    console.log('foo called');
    bar()
  };
  const bar = ()=>{
    console.log('bar called')
  };
  return foo;
})();

foo(); //foo called, bar called
bar(); //ReferenceError: bar is not defined

foo 将接收一个所谓的闭包，它是一组变量(在本例中为函数)，它们是从定义函数的地方继承的，而不是从调用的地方继承的。