最近一个活动项目中，在IOS的浏览器中会必现一个bug， 这个bug的起因是，我们在一个vue开发的项目中，通过script方式引入了一个历史有点久的动画库，通过eruda定位到问题，调用栈指向的就是这个动画库，具体报错信息即Function.caller used to retrieve strict caller。但是，为什么在PC上的chrome模拟器没有这个bug，为什么不同浏览器的对于Function.caller这个API实现的差异这么大呢？基于此，我总结了一些经验，如果你不幸也遇到这个问题，希望可以参考这篇文章并获得一些帮助。
Function.caller的表现跟严格模式和非严格模式是有区别的，在MDN可以看到定义：它会返回调用指定函数的函数，在严格模式中禁止使用主要是因为尾调用优化。并且有一段警告：
Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
你可以在不同浏览器执行这段代码：
function fun1() {
console.log(arguments.callee.caller);
// console.log(fun1.caller);
}
function fun2() {
fun1();
}
function fun3() {
'use strict';
fun1();
}
fun2();
fun3();
然后你会发现，正如 MDN 的警告所言，不同的引擎实现的差异非常大，fun2都能正常执行，但是执行fun3函数的时候，这是我的测试结果：
Safari12/JavaScriptCore:
TypeError: Function.caller used to retrieve strict caller
Firefox63/SpiderMonkey:
TypeError: access to strict mode caller function is censored
IE10/Trident:
Accessing the 'caller' property of a function or arguments object is not allowed in strict mode
Chrome70/v8:
不会报错，返回null
对于非严格模式的函数，EcmaScript对于caller的实现的定义非常模糊，Forbidden Extensions中，有一段是这样说的：
If an implementation extends non-strict or built-in function objects with an own property named “caller” the value of that property, as observed using [[Get]] or [[GetOwnProperty]], must not be a strict function object. If it is an accessor property, the function that is the value of the property’s [[Get]] attribute must never return a strict function when called.
总结来说，非严格模式函数的“caller”属性唯一的限制是，如果它要产生一个值，那么该值不能是严格模式函数。这一点大部分js引擎实现的都还不错。
V8引擎严格模式为什么不报错，而是返回NULL？
比较有趣的是，2017年还有人在V8项目下提过一个issue，function.caller differs in behavior from other browsers （但这个其实不算issue）。
V8引擎开发者之一 Benedikt Meurer 写过一篇文章
caller-considered-harmful，他有解释当你调用 foo.caller时， 在Chrome和Node.js中的工作原理：
(在理解下面这段话之前，最好先了解下什么是活动对象，可以参考这篇文章)
- 我们试图找到函数foo的最新活动对象，即最后一次调用foo的且未return的调用者。
- 如果foo没有当前活动对象，我们立即返回null。
- 如果有活动，我们会用一些奇技淫巧来查找到父活动对象，一直会查询到最顶级的非用户JavaScript活动对象的代码。
- 如果根据这些规则没有父活动，我们返回null。
- 此外，如果有父活动对象，但它是严格模式函数或我们无法访问它，那么我们也返回null。
- 其他情况，我们从父活动对象中返回闭包。
V8的项目可以在github上找到，FindCaller这个函数就是其caller的核心代码。根据这几条规则我们已经可以知道，在最开始的例子中，我们命中的是第5条规则，父活动对象是严格模式函数，所以得到的结果是null。
其他引擎抛出异常的解决方案
- 移除严格模式（不推荐）
用一些插件移除编译之后的"use strict"，比如这个remove-strict-webpack-plugin，原理非常简单，就是替换掉"use strict"，但这种方式无疑是舍本逐末的方式。除非是历史包袱太严重的项目， 否则最好不要这么做。
因为严格模式有助于防止一些bug，并且它也有助于安全的使用 JS 。在 ES5 中, 严格模式是可选项，但是在 ES6 中，许多特性要求必须使用严格模式。 因此大多数开发者和 babel 之类的工具默认添加 use strict 到 JS 文件的头部，以确保整个 JS 文件的代码都采用严格模式，这个习惯有助于我们写更好的 JS 。
- 模拟caller方法（不推荐）
function getCallerName (){
var callerName;
try { throw new Error(); }
catch (e) {
var re = /(\w+)@|at (\w+) \(/g, st = e.stack, m;
re.exec(st), m = re.exec(st);
callerName = m[1] || m[2];
}
return callerName;
}
用这种 hack 方式可以获取到 caller的函数名，但是跟原来的 caller 的语义是不同的，原来的 caller返回的是函数的引用。而且这个方法毕竟只是一个 hack，可能会随着引擎的升级而失效。
- 禁用 caller
本来该属性就不是ECMA-262第3版标准的一部分，只是大部分浏览器实现了它，但是大部分的实现又有各自的问题，比如IE10中的in strict mode报错信息是错误的。
所以，最好的解决方式就是不要去使用它，如果之前的项目有用到，那就去改造它，总会有不使用Function.caller也可以实现的方式。
网友评论