对于在JavaScript中更改this指向的3个方法bind,apply,call中的一些问题

Question

如图代码所
在传入一个函数前加~并声明一个变量return会返回一个-1,声明一个变量并return则会返回一个-1-参数
在传入一个函数前加!并声明一个变量return会返回一个false,如果把return注释则会返回一个true
同理如果前面变成+或者-号会返回NaN
这是我在学习尝试的时候发现的,希望可以帮忙解决

Answer 1

+、-、~都是运算符，然后去计算匿名函数的返回值undefined，计算出了NaN或者-1，使用!转换undefined，变成了true

如果你不想他进行运算，就要换一种匿名函数的写法，比如

(function(){
    return xx
}())

或者

(function(){
    return xx
})()

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

参考阅读

• JavaScript 的 this 指向问题深度解析

• function() { let c = -5; return c }() 的执行结果是 -5
• ~(-5) 的结果是 4

所以 fn.call(a, { cc: "dd" }, ~function() { let c = -5; return c }()) 相当于

fn.call(a, { cc: "dd" }, 4)
//      ^ -> this
//         ^^^^^^^^^^^^ -> a
//                       ^ -> b

这里没有给 c 参数，所以按打印出来就是图中第一行输出

第二个调用中的 !function() {} 返回是 undefined，!undefined 是逻辑运算（布尔运算），undefined 是 falsy 值，所以取返得到 true

那个调用相当于 fn.apply(a, [99, { aa: "bb" }, true])，也有对等的 call 表示

fn.apply(a, [99, { aa: "bb" }, true])
//       ^ -> this
//           ^^ -> a
//               ^^^^^^^^^^^^ -> b
//                             ^^^^ -> c

fn.call(a, 99, { aa: "bb" }, true)
//      ^ -> this
//         ^^ -> a
//             ^^^^^^^^^^^^ -> b
//                           ^^^^ -> c

---

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。