最近遇到一个bug，在调用APP的js接口时，有一个接口需要传递函数名过去，在js中我已经传递了函数名过去，但是在部分Android6.0及以下的安卓手机以及iOS 8上发现，APP并没有收到我传递函数名，函数名为空，百思不得其解，后来浏览了MDN上对function.name的解释后，修复了这个bug。

项目基于VUE2.X开发，语法大部分使用ES6。

具体如下：

//需要传递给APP的函数let callbackFn = {    fn: () => {        //...    }}//调用APP的js接口nativeAPI.call(callbackFn.fn.name)

简单的逻辑如上所示，但是在与安卓开发和iOS开发联调时，他们告诉我，在低版本手机中，我传过去的回调函数名称callbackFn.fn.name值为空字符串！就是说我并有获取到function的名字！

经过思考，尝试了以下几种办法

1. 检查webpack中babel-polyfill及babel的配置，使打包后的代码兼容更多的设备

经过检查，webpack中确实引入了babel-polyfill

module.exports = {  context: path.resolve(__dirname, '../'),  entry: {    app: ["babel-polyfill", "./src/main.js"]  },...

.babelrc文件中配置如下

{  "presets": [    ["env", {      "modules": false,      "targets": {        "browsers": ["last 2 versions", "safari >= 7"]      }    }],    "stage-0"  ],  "plugins": ["transform-vue-jsx", "transform-runtime"]}

结果：然而发现并没有解决问题。

2.放弃es6的箭头语法，手动改写js函数

将callbackFn改为

var callbackFn = {    fn: function() {        //...    }}

结果：还是不行

3.将回调函数的js文件放到static文件夹中，不参与混淆打包

因为js的混淆会改变变量名，为了避免可能发生的错误，将回调函数单独挪到static文件夹中，不参与打包

结果：失败

4.改写获取函数名的方式

因为步骤3的失败，让我感觉问题可能没有出在打包过程中，直觉告诉我，我获取函数名的方法(function.name)可能有问题，于是去MDN搜索了一下，确实有所收获。

推断函数名称

变量和方法可以从句法位置推断匿名函数的名称（ECMAScript 2015中新增）。

var f = function() {};var object = {  someMethod: function() {}};console.log(f.name); // "f"console.log(object.someMethod.name); // "someMethod"

注意描述：（ECMAScript 2015中新增）

这让我极度怀疑，在函数名的传递过程中，可能浏览器并没有帮我“推断”，也许取到的还是匿名函数，所以我获取函数名时，获取的是空字符串，于是我开始手动改写，代码如下：

//声明函数function callbackFn() {    //...}//获取函数名称let callbackName = callbackFn.name//调用APP的js接口nativeAPI.call(callbackName)

至此，这个问题解决了。

总结：

1.需要传递函数名的时候，最好显式的声明函数，否则依赖浏览器推断函数名的话不可靠，浏览器种类众多，不能确定是否实现了这个标准；2.尽量避免使用传递函数名这种方式来做为回调函数，因为经过压缩混淆时会改变函数名，这种做法不可靠。