[JS] 几个好玩的问题

背景

以下几个好玩的问题，我都不是原创，
解题方法除2.2和4.2之外，都不是我自己想出来，特此声明。

借此向各位JS前辈致敬。

1. 怎样让a同时满足几个不同的条件

if (a === 1 && a === 2 && a === 3) {
    console.log('hello world');
}

// 方法：

let i = 0;
Object.defineProperty(window, 'a', {
    get () {
        return [1, 2, 3][i++];
    }
});

2. 怎样让乘法报错

// 问：如何得到key的值

(function() {
  const key = Math.random();

  function doMath(x) {
    return x * x;
  }

  apiX = function(x) {
    try {
      return doMath(x);
    } catch (err) {
      return key;
    }
  }
})();

let key;
// write code here
// ...

2.1 Symbol

// 方法一：

key = apiX(Symbol());

原理解析：
我们查看ECMAScript规范，12.7 Multiplicative Operators，
12.7.3 Runtime Semantics: Evaluation

其中 ToNumber的会针对不同的参数，分情况处理，

我们看到如果ToNumber的参数是一个Symbol就会直接抛异常，
所以，我们第一方法中，给apiX传入了一个Symbol()，doMath就抛异常了。

// 方法一：

key = apiX(Symbol());

2.2 valueOf，toString，Symbol.toPrimitive

// 方法二：

key = apiX({
  [Symbol.toPrimitive]: { }
});

key = apiX({
  [Symbol.toPrimitive]() { 
    throw 0; 
  }
});

// 或者
key = apiX({
  valueOf: { }
});

key = apiX({
  valueOf () { 
    throw 0; 
  }
});

// 或者
key = apiX({
  toString: { }
});

key = apiX({
  toString () { 
    throw 0; 
  }
});

除了传入Symbol之外，我们还可以传入一个Object，
因为ToNumber对于Object会调用ToPrimitive，它也可能抛异常。

我们看到，在ToPrimitive中会先查看对象有没有@@toPrimitive方法，
如果有这个方法，且这个方法返回了Object，就报错。

其中，@@toPrimitive在JS中，就是一个以符号Symbol.toPrimitive为名字的方法，

key = apiX({
  [Symbol.toPrimitive]: { }
});

key = apiX({
  [Symbol.toPrimitive]() { 
    throw 0; 
  }
});

我们传入了一个Object，它的属性名是符号Symbol.toPrimitive，值是一个Object。
当然在这个方法中直接抛异常也是可以的。

再看ToPrimitive的逻辑，如果没有@@toPrimitive方法，
就会设置hint为number，调用OrdinaryToPrimitive，

即，如果hint是number，就按valueOf，toString的顺序调用对象的方法。
以下方法都是可以的。

key = apiX({
  valueOf: { }
});

key = apiX({
  valueOf () { 
    throw 0; 
  }
});

key = apiX({
  toString: { }
});

key = apiX({
  toString () { 
    throw 0; 
  }
});

3. 怎样让任意函数报错

(function() {
  const key = Math.random();

  function internal(x) {
    return x;
  }

  apiX = function(x) {
    try {
      return internal(x);
    } catch (err) {
      return key;
    }
  }
})();

let key;
// write code here
// …

// 方法：

function F() {
  var ret = apiX(2);
  if (ret < 1) {
    key = ret;  // key 的范围是 0~1
  }
  return F();   // 无限递归
}

try {
  F();
} catch (err) { }

console.log(key);

由于Chrome中函数的调用栈空间是有限的，
所以我们可以利用栈溢出，让任何一个函数调用报错。
总有一个分界点，让apiX被调用的时候栈未满，而apiX调用internal的时候栈溢出了。

注： 该方法只在Chrome中测试有效，FireFox中测试无效。

4. 如何判断一个对象是否Proxy

const math = new Proxy(Math, {
  get(obj, prop) {
    return obj[prop];
  }
});

约束条件：不能用=== 和Object.is进行判断。

4.1 利用栈溢出

由于Proxy调用比直接调用多一层get方法调用，
因此，可以在栈溢出的临界点上调用对象的get方法进行判断。

// 方法一：

const math = new Proxy(Math, {
    get(obj, prop) {
        return obj[prop];
    }
});

// 先获取栈溢出时的最大深度
let max = 0;
function getStack() {
    max++;
    return getStack();
}

try {
    getStack();
} catch (err) { }

// 在栈溢出的临界点上，检查get方法
let cur = 0, obj;
function check() {
    if (cur > max - 10) {
        obj.a;
    }
    cur++;
    return check();
}

cur = 0;
obj = math;
try {
    check();
} catch (err) { }
console.log('math: ', cur !== max);

cur = 0;
obj = Math;
try {
    check();
} catch (err) { }
console.log('Math: ', cur !== max);

注：
栈帧中的局部变量会影响帧的大小，因此也会影响栈溢出时栈的深度，
所以，getStack和check中应该保持一致，本例中都没有包含局部变量。

4.2 利用异常堆栈

// 方法二：

// 给math增加一个会抛异常的get属性
Object.defineProperty(math, 'a', {
  get() {
    throw new Error(1);
  }
});

// 获取异常堆栈，Proxy的异常堆栈会多一层
/*
  getErrorStack(Math)
  "Error: 1
    at Math.get (<anonymous>:10:11)
    at getErrorStack (<anonymous>:17:7)
    at <anonymous>:1:1"

  getErrorStack(math)
  "Error: 1
    at Math.get (<anonymous>:10:11)
    at Object.get (<anonymous>:3:15)
    at getErrorStack (<anonymous>:17:7)
    at <anonymous>:1:1"
*/
const getErrorStack = x => {
  try {
    x.a;
  } catch (err) {
    return err.stack;
  }
};

const isProxy = x => {
  const errorStack = getErrorStack(x);
  return /Object\.get/.test(errorStack);
};

console.log('math: ', isProxy(math));  // true
console.log('Math: ', isProxy(Math));  // false

注：
该思路在FireFox或者Node.js也可用，只是异常堆栈的判断逻辑需要调整一下。

也可以在get方法里面检查错误堆栈，

Object.defineProperty(math, 'a', {
  get() {
    try {
      throw Error(1);
    } catch (err) {
      console.log(err.stack); // 检测多余的栈
    }
  }
});

/*
  math.a 
  Error: 1
    at Math.get (<anonymous>:10:13)
    at Object.get (<anonymous>:3:19)
    at <anonymous>:1:6

  Math.a 
  Error: 1
    at Math.get (<anonymous>:10:13)
    at <anonymous>:1:6
*/

4.3 利用函数的caller属性

// 方法三：

Object.defineProperty(math, 'a', {
  get: function F() {
    return F.caller;
  }
});

/*
  math.a 
  ƒ get(obj, prop) {
    return obj[prop];
  }

  Math.a 
  null
*/

F.caller，就相当于已经废弃的arguments.caller，
只是目前arguments.caller会返回undefined，从IE9开始就不支持了，
它们都不是规范的ECMAScript，但是大多数JS引擎实现了它，
mdn: Function.caller
mdn: arguments.caller

注： 在严格模式下，调用F.caller会抛异常，

Object.defineProperty(math, 'a', {
  get: function F() {
    'use strict';
    return F.caller;
  }
});

/*
  math.a 
  Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    at Math.F (<anonymous>:10:14)
    at Object.get (<anonymous>:3:15)
    at <anonymous>:1:6

  Math.a 
  Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    at Math.F (<anonymous>:10:14)
    at <anonymous>:1:6
*/
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,504评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,434评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,089评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,378评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,472评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,506评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,519评论 3赞 413
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,292评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,738评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,022评论 2赞 329
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,194评论 1赞 342
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,873评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,536评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,162评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,413评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,075评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,080评论 2赞 352