（五-1）this相关例题

注意：以下代码全基于浏览器非严格模式运行
咱先定义一个全局变量a，后面所有的示例都假定此全局变量已存在:

var a = 0;

案例一 ：执行环境

// demo1
var obj =  {
  a: 1,
  b1: this.a,
  b2: () => this.a,
};

console.log(obj.b1);  
console.log(obj.b2());  

【要知道的】
JS代码有三种运行环境

1. Global Code : JavaScript代码开始运行的默认环境 this=> window
2. Function Code: 代码进入一个JavaScript函数 this => 调用函数的对象
3. Eval Code : 使用eval()执行代码

案例分析可以，很显然上述代码都是运行在Global Code环境中。而 obj中的this是根据代码的执行动态确定的。
当执行到console.log(obj.b1);时，如果此时b1对应的值是一个函数的话，那么函数中的this就是obj。而b1的值是```this.a``当获取 obj.b1时，是在全局执行环境下运行的，因此this是window

对象时没有this的，this是执行上下文里面的一个属性。因此有this的都有：全局执行环境、函数执行环境和eval执行环境。this的值可以是一个对象

【运行结果】

0
0

案例二

// demo2
(function fn(){
  var a = 2;
  console.log(this.a); 

  const subf = ()=>this.a;
  console.log(subf()); 
})()

立即执行函数在全局环境下执行，函数中的this是window
【运行结果】

0
0

案例三

// demo3
var obj2 =  {
  a: 3,
  b1: function(){ return this.a;}, // b1: 0x99
  b2: function(){ return ()=>this.a}, // b2: 0x88
};
console.log(obj2.b1());  
console.log(obj2.b2()());  

obj2对象的b1对应的是一个函数，函数的this就是调用此函数的对象即obj2
【运行结果】

3
3

这个示例中箭头函数外的this是哪个？我们在箭头函数外面加个this.a看看：

var obj2 =  {
  a: 3,
  b1: function(){ return this.a;}, // b1:0x99
  b2: function(){ return ()=>this.a}, // b2: 0x88   b2()--> 0x77
};
console.log(obj2.b1());  
console.log(obj2.b2()());   // 0x77()

箭头函数没有自己this，因此箭头函数内的this就是箭头函数外的那个this
【运行结果】

3
3

案例四

// demo4
var obj3 =  {
  a: 4,
  b1: function(){ return this.a;},
  b2: function(){ return ()=> () => () => this.a},
};
console.log(obj4.b1()); 
console.log(obj4.b2()()()()); 

案例五

// demo5
function f0() {
  var a = 5;

  setTimeout(function() {
    var b1 = this.a;
    console.log(b1); 
  }, 100);

  setTimeout(function() {
    var b2 = ()=> this.a;
    console.log(b2());  
  }, 200);
}

f0(); 

setTimeout中的那个function运行于全局环境下，因此里面的this指向window。而箭头函数没有自己的this，所以第二个setTimeout中箭头函数的this也指向window.
【运行结果】

0
0

那么setTimeout的第一个参数使用箭头函数会是个什么情况？看下一个示例

案例六

// demo6
function f1() {
  console.log(this.a); // 0
  setTimeout(() => {
    console.log(this.a);  // 0
  }, 100);
}
f1(); 

f1()在全局环境下执行， 里面的this是window即console.log(this.a);结果为0。

这里箭头函数作为setTimeout的第一个参数，箭头函数外面的那个this是谁?把箭头函数换成this.fn()：

function f1() {
  console.log(this.a); // 0
  setTimeout(this.fn() , 100); 
}

我们这里不用了解this.fn()有什么功能，看到它我们就会明白了this.fn()中的this和前面一行中的this.a中的this是同一个this。

【扩展一下】

// 这样执行
f1.call({a: 7});  // 7  7

结果分析：

// demo6
function f1() {
  console.log(this.a);   // 因为通过call对this的绑定，f1中的this指向 {a: 7}
  setTimeout(() => {
    console.log(this.a);  // 同样这里this指向 {a: 7}
  }, 100);
}

同理：

var bindf1 = f1.bind({a: 8}); 
bindf1(); // 8 8

箭头函数没有自己的this，箭头函数中用this和普通语句中的this没什么区别，所以，你知道非箭头函数下怎么用this,就知道箭头函数下怎么用this。
关于 “箭头函数对this固定化，箭头函数中的this绑定定义时所在的作用域，箭头函数不能通过 call() 或 apply() 方法绑定this” 等描述，都源于箭头函数没有自己的this。