奇怪,奇怪,真的好奇怪的javascript

奇怪的 javascript

ps: 本文的题目解答都是以谷歌浏览器为准。

本文就从四道题来分析 javascript 的奇怪行为,首先我们来看第一道题,如下所示:

题目 1

let a = 1;
function fn() {
  let a = 2;
  // 这里写代码,使得最后的打印是3
}
fn();
console.log(a); // 3

问题很简单,先使用 let 在全局中定义了一个变量 a,并定义初始值为 1,然后定义了一个函数,在函数的内部又定义了一个同样的变量 a,然后调用这个函数,在调用函数之后打印变量 a,问题就是在函数内部添加一些代码使得最终打印变量 a 的结果是 3。

思路分析

首先我们知道如果没有特殊的办法,那么最外层的打印将始终打印的是 a 变量最初的值,那就是 1。函数内部如果没有定义 a 变量,那么我们是可以访问到 a 变量的,而有了 a 变量,那么我们只能在函数访问到 2,这就导致我们在函数内部似乎没有任何办法访问到外部的变量 1,因此我们无法修改外部的变量 a。要解决这道题,我们可以从 2 个方向入手,第一个方向就是如何在函数内部访问到外部的变量 a,从而修改变量 a,第二个方向则是从 console.log 函数入手。

我们先看第一个方向,如何在函数内部访问到外部的变量 a,这听起来似乎很不可思议,但我们确实可以做到,使用 eval 函数就可以了,eval 函数支持传一个字符串当做参数,我想这大多数开发者都知道,但是很少有人知道 eval 函数的调用方式分为直接调用和间接调用,什么是直接调用,什么又是间接调用。我们来看两段代码:

eval('console.log(1)'); // 直接调用
(0, eval)('console.log(1)'); // 间接调用

看了以上代码我们就知道了,直接调用就是直接调用 eval 方法即可,而间接调用,是让 eval 函数像自调用函数(当然这里并不是自调用函数)那样去调用,这里用到了逗号操作符,逗号操作符可以用来在一条语句中执行多个操作,如下所示:

let num1 = 1,
  num2 = 2,
  num3 = 3;

不过,也可以使用逗号操作符来辅助赋值。在赋值时使用逗号操作符分隔值,最终会返回表达式中最后一个值:

let num = (5, 1, 4, 8, 0); // num 的值为 0

因此这里的逗号操作符前面的第一个操作数 0 其实没有什么意义,用 1 也可以,2 也行,这里我们主要搞清楚间接调用和直接调用的区别就行了,直接调用 eval 执行的环境就是当下的环境,那么访问到的也就是当下环境中的变量,而间接调用可以让 eval 执行的环境暴露在全局环境中。比如:

let a = 1;
function fn() {
  let a = 2;
  console.log(eval('a')); // 2
}
fn();
let a = 1;
function fn() {
  let a = 2;
  console.log((0, eval)('a')); // 1
}
fn();

看了以上两段代码的结果就不难看出直接调用和间接调用的区别了,有了间接调用,我们就可以修改在全局环境下的 a 变量,这样也就能解答本题了。如下:

let a = 1;
function fn() {
  let a = 2;
  (0, eval)('a+2'); // 或者 (0,eval)('a = 3')
}
fn();
console.log(a); // 3

有了 eval 函数,那么我们同样想到了可以使用 Function 来模拟 eval 函数的功能,如下所示;

const equalEval = str => new Function('return ' + str)();

因此以上的代码还可以这么解答:

const equalEval = str => new Function('return ' + str)();
let a = 1;
function fn() {
  let a = 2;
  equalEval('a+2'); // 或者 equalEval('a = 3')
}
fn();
console.log(a); // 3

以上是我们说的第一个方向,接下来我们来谈谈第二个方向,那就是修改 console.log 函数,很简单,如下所示:

let a = 1;
function fn() {
  let a = 2;
  const originLog = console.log;
  console.log = v => {
    originLog(v + 2);
  };
}
fn();
console.log(a); // 3

可以看到我们使用一个变量缓存 console.log 方法,然后改写 console.log,让最终的打印值加 2 就可以得到 3。

javascript 是真的好奇怪,这些莫名其妙的特性总是让人难以理解,并烦恼,正常谁会想到这样的解答?

题目 2

window.eval = () => {
  throw new Error('eval is not allowed');
};
window.Function = () => {
  throw new Error('Function is not allowed');
};
//这里写代码使得后续的打印返回注释的结果
console.log(eval); // eval(){[native code]}
console.log(eval('1 + 2')); // 3

思路分析

正如第一题那样,我们改写了 javascript 的 console.log 方法,这第 2 题由于改写了 javascript 的 eval 和 Function 方法,让我们想要恢复原来的方法就显得比较困难。因此这道题的办法就是怎么样才能够恢复 eval 方法,这时候我们就可以想到内联框架,内联框架也有一个 window 对象,说明同样也有 eval 方法,因此我们可以获取到内联框架的 eval 方法然后恢复 eval 方法的定义,如下所示:

window.eval = () => {
  throw new Error('eval is not allowed');
};
window.Function = () => {
  throw new Error('Function is not allowed');
};
const iframe = document.createElement('iframe'); // 创建一个iframe对象
document.body.appendChild(iframe); //注意一定要把iframe添加到dom中
const eval = iframe.contentWindow.eval; //获取内联框架下的eval函数
document.body.removeChild(iframe); // 获取到了之后从dom中移除iframe元素
console.log(eval); // eval(){[native code]}
console.log(eval('1 + 2')); // 3

如此一来,本题就轻松的解决了。

javascript 就是这么奇怪,居然允许我们修改内置函数的定义,你就说它奇不奇怪?

题目 3

let a; // a = ? 这里写代码使得后续的打印返回注释的结果;
if (!a) {
  console.log(a + 1); // 2
}

思路分析

这道题也是很有意思的,这道题的难点在于既要满足条件是 false,又要满足 a 变量经过转换后的值一定是 1,否则不可能得到结果为 2。如果大家可以想到 valueOf 这个方法,离解答这道题就不远了,valueOf 方法返回任意数据的原始值,也就是说,如果我们修改变量 a 的原始值,那么 a 最终会以原始值参与 + 1 的计算,然后得到 2。也就是说,我们只需要这样:

a.valueOf = () => 1; // 将a的原始值设置为1

也许有人说,那好,这里的 a = 0 即可,记住这里的 a 不能为原始数据类型,因为原始数据类型的原始值就相当于是它本身调用 Number 方法得到的一个数字 0,也就是说:

let a = false; // 或者 a = '' a = 0

以上都是错误的写法,并不能得到 a 的原始值为 1,因此我们需要将 a 设置为对象,而能够是 false 值的对象只有 document.all,它的返回值在除 ie 浏览器上都是 false,因此也就满足了既是 false,又修改原始值,能够让变量 a 读取到修改后的原始值。因此最终的解答就是:

let a = document.all;
a.valueOf = () => 1;
if (!a) {
  console.log(a + 1); // 2
}

那么问题来了,谁会想到 document.all 的返回值是 false?javascript 好奇怪,明明这里是返回 document 的整个集合,为什么在谷歌浏览器上将它转成布尔值的时候,是 false 而不是 true。

题目 4

let a; // a = ? 这里写代码使得后续的打印返回注释的结果;
console.log(typeof a); // number
console.log(1 + a === 1); // false
console.log(2 + a === 2); // true

思路分析

这道题咋一看,有这样的数字吗?既要满足 1 + a = 1,又要满足 2 + a = 2,还别说,翻阅了文档,还真能找到这个数字,这个数字就是 Number.EPSILON,这是一个啥玩意儿,估计很少有人知道。mdn 文档上是这样说的:

Number.EPSILON 属性表示 1 与 Number 可表示的大于 1 的最小的浮点数之间的差值。EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16,或者 2^-52。这玩意儿加 1 的结果是:1.0000000000000002,加 2 的结果就是 2,你就说它奇不奇怪。因此本题的答案就是:

let a = Number.EPSILON; // 或者 let a = 2.2204460492503130808472633361816E-16;或者let a = Math.pow(2,-52)
console.log(typeof a); // number
console.log(1 + a === 1); // false
console.log(2 + a === 2); // true

从以上的四道题,我们可以看到 javascript 的奇怪之处,你就说 javascript 奇不奇怪?

ps: 如果各位大佬还有这四道题的其它答案,欢迎评论区留言。

你可能感兴趣的:(前端javascript)