一个由于Function.name造成的兼容性bug

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

最近遇到一个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的名字！

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

经过检查，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"]
}

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

将callbackFn改为

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

结果：还是不行

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

因为步骤3的失败，让我感觉问题可能没有出在打包过程中，直觉告诉我，我获取函数名的方法(function.name)可能有问题，于是去MDN搜索了一下，确实有所收获。
Function.name - JavaScript | 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.尽量避免使用传递函数名这种方式来做为回调函数，因为经过压缩混淆时会改变函数名，这种做法不可靠。