博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端进阶之 a 可以同时 == 1 && == 2 && == 3吗?
阅读量:5928 次
发布时间:2019-06-19

本文共 2572 字,大约阅读时间需要 8 分钟。

  • 作者:陈大鱼头
  • github:
  • 链接:
  • 背景:最近高级前端工程师 刘小夕github 上开了个每个工作日布一个前端相关题的 repo,怀着学习的心态我也参与其中,以下为我的回答,如果有不对的地方,非常欢迎各位指出。

此题目的答案可以分为三大类:

1. 类型转换时的劫持

首先我们要知道,在 JS 中类型转换只有三种情况,分别是:

  • 转换为布尔值
  • 转换为数字
  • 转换为字符串

转换为原始类型

对象在转换类型的时候,会执行原生方法ToPrimitive

其算法如下:

  1. 如果已经是 原始类型,则返回当前值;
  2. 如果需要转 字符串 则先调用toSting方法,如果此时是 原始类型 则直接返回,否则再调用valueOf方法并返回结果;
  3. 如果不是 字符串,则先调用valueOf方法,如果此时是 原始类型 则直接返回,否则再调用toString方法并返回结果;
  4. 如果都没有 原始类型 返回,则抛出 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 ( ) 定义:

  1. 定义 arrayToObject(this value)(原生方法,将当前数组转换成对象);
  2. 定义 funcGet(array, 'join')(原生方法,在这一步调用 join 方法);
  3. 如果 IsCallble(func) (原生方法,判断是否有内部可调用的函数)为 false,则 设置 func 原生函数 %ObjProto_toString%(原生函数,toString 的具体实现);
  4. 返回 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海洋”,随时与鱼头互动。欢迎!衷心希望可以遇见你。

转载地址:http://ftrvx.baihongyu.com/

你可能感兴趣的文章
Linux文件的特殊属性chattr工具
查看>>
94、QOS区分式服务配置实验之拥塞避免
查看>>
Cisco catalyst 2950交换机的密码恢复
查看>>
Cisco路由器SSH登录
查看>>
win10不用第三方工具激活的方法
查看>>
Linux监控--vmstat命令详解
查看>>
Android之DOM解析XML
查看>>
linux看版本——未完
查看>>
【python】编程语言入门经典100例--30
查看>>
表单格式化插件jquery.serializeJSON
查看>>
crontab 环境变量问题
查看>>
Java 的对象传递
查看>>
如何利用自定义函数把阳历转换成阴历
查看>>
搭建nfs共享存储服务之三客户端配置
查看>>
10.4 LVM
查看>>
解决jetty7.x log日志异常巨大问题
查看>>
KVM虚拟化笔记(六)------kvm虚拟机的克隆
查看>>
企业级应用身份认证管理扫盲篇——协议
查看>>
SpringMVC中使用Interceptor拦截器
查看>>
Unable to connect to CUPS server localhost:631
查看>>