JS中的this

发表于 更新于 分类于

this在JS中是个常见且重要的，谁能认领了它，就决定了this的指向
（谁认领了它，当了它的爹，就决定了它的一生）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let num = 10;
console.log(window.num);
window.num = 20;
console.log(this.num);
console.log(this === window);
function A(){
   console.log(this.num++);
}
let obj = {
     num : 30,
     B : function(){
         console.log(this.num++);
         return () => console.log(this.num++);
      }
 }
 A();
 let b = obj.B;
 b()();
 obj.B();
 b.apply(obj);
 new A();
 console.log(window.num);

输出结果：
第2行： 找不到window.num => undefined
第4行： 指向window.num => 20
第5行： 指向window.num => true
第16行： 先输出，后自加1 => 20
第17行： 为什么没有绑定到obj.num：30?
b = obj.B 赋值等其他的操作，将引用类型作为一个整体丢弃，只获取 obj.b（一个函数）的值进行传递。
第18行： 调用函数B，先输出21 再输出22
为了让 obj.B() 有效，JavaScript 用一个技巧 —— 这个 ‘.’ 点返回的不是一个函数, 而是一种特殊的[引用类型]的值

当在引用类型上用 () 调用时，它们接收到这个对象和它的方法的所有信息，并且设定正确的 this 值（这里等于 obj）
第19行： 由于()接受了对象和方法的所有信息，隐式绑定启动，this由obj认领，因此输出 30
第20行： apply直接把无人认领的b，强抱给了obj，所以 输出 31
第21行： new A() 创建了A的实例，this改为由A认领，因为A没有num属性，num++等于undefined+1 得出 NaN
第22行： 一共加了三次，输出23