结合类型隐式转换、IIFE、闭包解释下述JS代码的运行逻辑
这段代码核心是通过重写Function原型的toString方法,修改了函数序列化后的输出格式,最终触发隐式类型转换得到对应的拼接结果,三个核心概念的运行逻辑如下:
1. IIFE(立即执行函数表达式)的执行逻辑
给Function.prototype.toString赋值的右侧整体是一个IIFE,它定义完成后会立刻执行,仅运行一次就完成原型方法的重写:
- 执行时首先将原生的
Function.prototype.toString方法缓存到内部常量toStringFnRef中,避免后续重写后无法调用原生方法 - 执行后返回一个新的函数,作为重写后的
Function.prototype.toString方法 - IIFE的作用是隔离作用域,缓存的原生方法不会泄露到全局上下文,也不需要额外调用初始化函数就能完成重写逻辑
2. 闭包(closures)的作用
IIFE执行完成后,它的执行上下文本来应该被销毁,内部的toStringFnRef常量本该被垃圾回收,但由于IIFE返回的内部函数引用了这个常量,就形成了闭包:
- 后续每次调用重写后的
toString方法时,都能通过闭包访问到缓存的原生toString方法,不会出现循环调用的问题 - 调用
toStringFnRef.call(this)时,会将this指向当前调用toString的函数实例,拿到原生方法序列化后的函数字符串,再拼接start:前缀和end后缀返回
3. 类型隐式转换(type coercion)的触发流程
console.log(1 + function x() { alert('hi') })执行时,加号运算符触发了隐式类型转换,流程如下:
- 加号两侧的操作数分别是数字
1和函数对象,不属于可直接相加的同类型基础值,JS会尝试将两个操作数转换为原始值 - 函数对象转原始值时会先调用
valueOf方法,返回值是函数本身(仍为引用类型),因此会继续调用toString方法 - 此时调用的是我们重写后的
Function.prototype.toString,返回结果为start:function x() { alert('hi') }end - 数字和字符串相加时,JS会自动将数字转为字符串,最终
1转为"1"和后续字符串拼接,得到最终输出结果
内容的提问来源于stack exchange,提问作者ehehe341
相关产品推荐
相关产品推荐

