最近一個(gè)活動(dòng)項(xiàng)目中纫溃，在IOS的瀏覽器中會(huì)必現(xiàn)一個(gè)bug父能， 這個(gè)bug的起因是臣镣，我們?cè)谝粋€(gè)vue開(kāi)發(fā)的項(xiàng)目中，通過(guò)script方式引入了一個(gè)歷史有點(diǎn)久的動(dòng)畫(huà)庫(kù)谈山，通過(guò)eruda定位到問(wèn)題俄删，調(diào)用棧指向的就是這個(gè)動(dòng)畫(huà)庫(kù)，具體報(bào)錯(cuò)信息即Function.caller used to retrieve strict caller。但是畴椰，為什么在PC上的chrome模擬器沒(méi)有這個(gè)bug臊诊，為什么不同瀏覽器的對(duì)于Function.caller這個(gè)API實(shí)現(xiàn)的差異這么大呢？基于此迅矛，我總結(jié)了一些經(jīng)驗(yàn)妨猩，如果你不幸也遇到這個(gè)問(wèn)題，希望可以參考這篇文章并獲得一些幫助秽褒。

Function.caller的表現(xiàn)跟嚴(yán)格模式和非嚴(yán)格模式是有區(qū)別的壶硅，在MDN可以看到定義：它會(huì)返回調(diào)用指定函數(shù)的函數(shù)，在嚴(yán)格模式中禁止使用主要是因?yàn)槲舱{(diào)用優(yōu)化销斟。并且有一段警告：

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.

你可以在不同瀏覽器執(zhí)行這段代碼：

  function fun1() {
    console.log(arguments.callee.caller);
  }

  function fun2() {
    fun1();
  }

  function fun3() {
    'use strict';
    fun1();
  }

  fun2();
  fun3();

然后你會(huì)發(fā)現(xiàn)庐椒，正如 MDN 的警告所言，不同的引擎實(shí)現(xiàn)的差異非常大蚂踊，fun2都能正常執(zhí)行约谈，但是執(zhí)行fun3函數(shù)的時(shí)候，這是我的測(cè)試結(jié)果：

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:
    不會(huì)報(bào)錯(cuò)犁钟，返回null

對(duì)于非嚴(yán)格模式的函數(shù)棱诱，EcmaScript對(duì)于caller的實(shí)現(xiàn)的定義非常模糊，Forbidden Extensions中涝动，有一段是這樣說(shuō)的：

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.

總結(jié)來(lái)說(shuō)迈勋，非嚴(yán)格模式函數(shù)的“caller”屬性唯一的限制是，如果它要產(chǎn)生一個(gè)值醋粟，那么該值不能是嚴(yán)格模式函數(shù)靡菇。這一點(diǎn)大部分js引擎實(shí)現(xiàn)的都還不錯(cuò)。

V8引擎嚴(yán)格模式為什么不報(bào)錯(cuò)米愿，而是返回NULL厦凤？

比較有趣的是，2017年還有人在V8項(xiàng)目下提過(guò)一個(gè)issue育苟，function.caller differs in behavior from other browsers （但這個(gè)其實(shí)不算issue）较鼓。

V8引擎開(kāi)發(fā)者之一 Benedikt Meurer 寫(xiě)過(guò)一篇文章
caller-considered-harmful，他有解釋當(dāng)你調(diào)用 foo.caller時(shí)宙搬， 在Chrome和Node.js中的工作原理：

(在理解下面這段話之前笨腥，最好先了解下什么是活動(dòng)對(duì)象，可以參考這篇文章)

1. 我們?cè)噲D找到函數(shù)foo的最新活動(dòng)對(duì)象勇垛，即最后一次調(diào)用foo的且未return的調(diào)用者。
2. 如果foo沒(méi)有當(dāng)前活動(dòng)對(duì)象士鸥，我們立即返回null闲孤。
3. 如果有活動(dòng)，我們會(huì)用一些奇技淫巧來(lái)查找到父活動(dòng)對(duì)象，一直會(huì)查詢(xún)到最頂級(jí)的非用戶(hù)JavaScript活動(dòng)對(duì)象的代碼讼积。
4. 如果根據(jù)這些規(guī)則沒(méi)有父活動(dòng)肥照，我們返回null。
5. 此外勤众，如果有父活動(dòng)對(duì)象舆绎，但它是嚴(yán)格模式函數(shù)或我們無(wú)法訪問(wèn)它，那么我們也返回null们颜。
6. 其他情況吕朵，我們從父活動(dòng)對(duì)象中返回閉包。

V8的項(xiàng)目可以在github上找到窥突，FindCaller這個(gè)函數(shù)就是其caller的核心代碼努溃。根據(jù)這幾條規(guī)則我們已經(jīng)可以知道，在最開(kāi)始的例子中阻问，我們命中的是第5條規(guī)則梧税，父活動(dòng)對(duì)象是嚴(yán)格模式函數(shù)，所以得到的結(jié)果是null称近。

MaybeHandle<JSFunction> FindCaller(Isolate* isolate,
                                   Handle<JSFunction> function) {
  FrameFunctionIterator it(isolate);
  if (function->shared()->native()) {
    return MaybeHandle<JSFunction>();
  }
  // Find the function from the frames. Return null in case no frame
  // corresponding to the given function was found.
  if (!it.Find(function)) {
    return MaybeHandle<JSFunction>();
  }
  // Find previously called non-toplevel function.
  if (!it.FindNextNonTopLevel()) {
    return MaybeHandle<JSFunction>();
  }
  // Find the first user-land JavaScript function (or the entry point into
  // native JavaScript builtins in case such a builtin was the caller).
  if (!it.FindFirstNativeOrUserJavaScript()) {
    return MaybeHandle<JSFunction>();
  }

  // Materialize the function that the iterator is currently sitting on. Note
  // that this might trigger deoptimization in case the function was actually
  // materialized. Identity of the function must be preserved because we are
  // going to return it to JavaScript after this point.
  Handle<JSFunction> caller = it.MaterializeFunction();

  // Censor if the caller is not a sloppy mode function.
  // Change from ES5, which used to throw, see:
  // https://bugs.ecmascript.org/show_bug.cgi?id=310
  if (is_strict(caller->shared()->language_mode())) {
    return MaybeHandle<JSFunction>();
  }
  // Don't return caller from another security context.
  if (!AllowAccessToFunction(isolate->context(), *caller)) {
    return MaybeHandle<JSFunction>();
  }
  return caller;
}

其他引擎拋出異常的解決方案

1. 移除嚴(yán)格模式（不推薦）

用一些插件移除編譯之后的"use strict"第队，比如這個(gè)remove-strict-webpack-plugin，原理非常簡(jiǎn)單刨秆，就是替換掉"use strict"凳谦，但這種方式無(wú)疑是舍本逐末的方式。除非是歷史包袱太嚴(yán)重的項(xiàng)目坛善， 否則最好不要這么做晾蜘。

因?yàn)閲?yán)格模式有助于防止一些bug，并且它也有助于安全的使用 JS 眠屎。在 ES5 中, 嚴(yán)格模式是可選項(xiàng)剔交，但是在 ES6 中，許多特性要求必須使用嚴(yán)格模式改衩。 因此大多數(shù)開(kāi)發(fā)者和 babel 之類(lèi)的工具默認(rèn)添加 use strict 到 JS 文件的頭部岖常，以確保整個(gè) JS 文件的代碼都采用嚴(yán)格模式，這個(gè)習(xí)慣有助于我們寫(xiě)更好的 JS 葫督。

2. 模擬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的函數(shù)名竭鞍，但是跟原來(lái)的 caller 的語(yǔ)義是不同的，原來(lái)的 caller返回的是函數(shù)的引用橄镜。而且這個(gè)方法畢竟只是一個(gè) hack偎快，可能會(huì)隨著引擎的升級(jí)而失效。

3. 禁用 caller

本來(lái)該屬性就不是ECMA-262第3版標(biāo)準(zhǔn)的一部分洽胶，只是大部分瀏覽器實(shí)現(xiàn)了它晒夹，但是大部分的實(shí)現(xiàn)又有各自的問(wèn)題，比如IE10中的in strict mode報(bào)錯(cuò)信息是錯(cuò)誤的。

所以丐怯，最好的解決方式就是不要去使用它喷好，如果之前的項(xiàng)目有用到，那就去改造它读跷，總會(huì)有不使用Function.caller也可以實(shí)現(xiàn)的方式梗搅。