- 作者:陈大鱼头
- github:
- 链接:
- 背景:最近高级前端工程师 刘小夕 在 github 上开了个每个工作日布一个前端相关题的 repo,怀着学习的心态我也参与其中,以下为我的回答,如果有不对的地方,非常欢迎各位指出。
此题目的答案可以分为三大类:
1. 类型转换时的劫持
首先我们要知道,在 JS 中类型转换只有三种情况,分别是:
- 转换为布尔值
- 转换为数字
- 转换为字符串
转换为原始类型
对象在转换类型的时候,会执行原生方法ToPrimitive。
其算法如下:
- 如果已经是 原始类型,则返回当前值;
- 如果需要转 字符串 则先调用
toSting
方法,如果此时是 原始类型 则直接返回,否则再调用valueOf
方法并返回结果; - 如果不是 字符串,则先调用
valueOf
方法,如果此时是 原始类型 则直接返回,否则再调用toString
方法并返回结果; - 如果都没有 原始类型 返回,则抛出 TypeError类型错误。
当然,我们可以通过重写Symbol.toPrimitive
来制定转换规则,此方法在转原始类型时调用优先级最高。
所以以此定义我们可以有以下四种答案:
var a = { arr: [3, 2, 1], valueOf () { console.group('valueOf') console.log(this.arr) console.groupEnd('valueOf') return this.arr.pop() }}if (a == 1 && a == 2 && a == 3) { console.log('biu')}var b = { arr: [3, 2, 1], toString () { console.group('toString') console.log(this.arr) console.groupEnd('toString') return this.arr.pop() }}if (b == 1 && b == 2 && b == 3) { console.log('biu')}var c = { arr: [3, 2, 1], [Symbol.toPrimitive] () { console.group('Symbol.toPrimitive') console.log(this.arr) console.groupEnd('Symbol.toPrimitive') return this.arr.pop() }}if (c == 1 && c == 2 && c == 3) { console.log('biu')}var d = [1, 2, 3]d.join = d.shiftif (d == 1 && d == 2 && d == 3) { console.log('biu')}复制代码
鱼头注:事实上,这四种可以算是同一种。关于最后一种,我们可以来看看ECMA中的 Array.prototype.toString ( )
定义:
- 定义
array
为ToObject(this value)
(原生方法,将当前数组转换成对象); - 定义
func
为Get(array, 'join')
(原生方法,在这一步调用join
方法); - 如果
IsCallble(func)
(原生方法,判断是否有内部可调用的函数)为false
,则 设置func
原生函数%ObjProto_toString%
(原生函数,toString
的具体实现); - 返回
Call(func, array)
。
2. 对 getter
的劫持
所谓的 getter
就是对象属性在进行查询时会被调用的方法 get
,利用此函数也可以实现题目功能。
代码如下:
window.val = 0Object.defineProperty(window, 'd', { get () { return ++this.val }})if (d == 1 && d == 2 && d == 3) { console.log('biu')}const e = new Proxy({}, { val: 1, get () { return () => this.val++; }});if (e == 1 && e == 2 && e == 3) { console.log('biu')}复制代码
3. 正则表达式
JS
中的 RegExp.prototype.exec()
作用是在一个指定字符串中执行一个搜索匹配,返回一个结果数组或 null。
当正则表达式使用 "g
" 标志时,可以多次执行 exec
方法来查找同一个字符串中的成功匹配。当你这样做时,查找将从正则表达式的 lastIndex
属性指定的位置开始。(test()
也会更新 lastIndex
属性)。
lastIndex
是正则表达式的一个可读可写的整型属性,用来指定下一次匹配的起始索引。只有正则表达式使用了表示全局检索的 "g
" 标志时,该属性才会起作用。
鱼头注:只有正则表达式使用了表示全局检索的 "g
" 标志时,该属性才会起作用。
综上所述,我们可以有方案如下:
var f = { reg: /\d/g, valueOf () { return this.reg.exec(123)[0] }}if (f == 1 && f == 2 && f == 3) { console.log('biu')}复制代码
鱼头注:上述方法其实也利用了类型转换的特点。然后暂时就写下以上三种答案,不知道聪明的你是否还有别的解法呢?
如果你、喜欢探讨技术,或者对本文有任何的意见或建议,你可以扫描下方二维码,关注微信公众号“ 鱼头的Web海洋”,随时与鱼头互动。欢迎!衷心希望可以遇见你。