JS this的指向
JS中 this 在各个环境下的指向问题！
一：this在普通函数中的指向 --> window
1 // 普通函数中的this指向 ----> window 2 function fn(){ 3 console.log(this) // ES5 this ----> window 4 console.log(this) // ES6 this----> undefined 5 }
当我们在js脚本中定义一个函数，这个函数当调用时他的指向为window，之所以为window是因为在ES5中定义变量和函数都存在变量提升，所以我们的函数和变量都是挂在 window下，在调用函数时，我们通常都会省略window，直接使用函数，所以调用函数其实是window.fn，所以this的指向为它的上文就是window，那么在ES6中出现了新的特性和规定，将不再存在变量提升，所以在ES6的普通函数中this的指向为undefined。
二：this在回调函数中的指向（不包含事件处理回调函数）- window
1 var obj = { 2 3 a:function(fn){ 4 // 将obj下的 c 方法带入obj下 a 方法中，执行，完成回调 5 fn() 6 }, 7 b:function(){ 8 var arr = [1,2,3,4] 9 arr.forEach(function(){ 10 // 在数组方法 foreach 的回调函数中，this的指向为window 11 console.log(this) // this --> window 12 }) 13 14 // 定时器的回调函数中，this的指向为window 15 setTimeout(function(){ 16 console.log(this) // this --> window 17 },1000) 18 }, 19 c:function(){ 20 // 此回调函数的this为window 21 console.log(this) // this --> window 22 } 23 } 24 // 将obj下的 c 方法带入obj下 a 方法中 25 obj.a(obj.c)
在以上的案例我们可以发现，在回调函数中this的指向都是window，尽管它处在一个对象的环境中，主要原因是回调函数的指向默认为window，且回调函数并没有对象去调用
三：this在事件处理函数中的指向 --> 监听事件对象本身
1 document.addEventListener("click",clickHandler) 2 function clickHandler(){ 3 console.log(this) // this --> document 4 } 5 var obj0={ 6 a:function(){ 7 document.addEventListener("click",this.clickHandler) 8 }, 9 clickHandler:function(){ 10 console.log(this) // this --> document 11 } 12 }
在如上的案例中，分别给document在两个环境下监听click事件，都是指向事件对象本身，事件的this指向是最好辨别的，只需要记住事件对象是谁就可以。
四：对象方法中的this指向 --> 就是调用方法的对象本身
1 var a = 20 2 var obj1 = { 3 a:1, 4 b:this.a, // b:20 - this的指向为 全局的a=20 5 c:function(){ 6 console.log(this) // 这里this的指向为对象 obj1本身 7 } 8 } 9 obj1.c()
在对象中：对象的属性如果使用this，那么this的指向为对象外部的this，对象的方法使用this，调用这个方法的对象就是为this的指向。
五：ES6 类中的this指向 --> 实例化对象
1 class Box{ 2 a = 1 3 static a = 3 4 // 静态属性的this只会去指向相对应的静态属性，不会指向动态方法 5 // 所以c = 3 6 // 当 静态属性 a 没有时，c = undefined 7 static c = this.a // c = 3 8 b = this.a 9 constructor(){ 10 console.log(this) // this --->实例化对象 11 } 12 play(){ 13 console.log(this) // 谁执行 pily方法this就指向谁 14 document.addEventListener("click",this.clickFunction) 15 } 16 clickFunction(e){ 17 console.log(this) 18 } 19 } 20 // 实例化对象 - box 21 var box = new Box()
在ES6 的类中，有两种方法：
一：静态方法：就是在属性或者方法的前面写上 static ，静态方法的this指向为 类本身，不管是属性还是方法
二：动态方法：没有使用 static的都是动态方法，通过构造函数 new出来调用，动态方法的this指向就是谁调用这个方法this指向就是谁，就是实例化对象
六：箭头函数的this指向 -->为箭头函数外部的this
1 var obj3 = { 2 a:()=>{ 3 console.log(this) // this指向 ---> window 4 } 5 } 6 obj3.a() 7 8 var obj4 = { 9 a:function(){ 10 var o = { 11 b:()=>{ 12 console.log(this) // this指向 ---> obj4 13 } 14 } 15 o.b() 16 } 17 } 18 obj4.a()
这个案例中通过2个对象来验证箭头函数改变this的指向，在对象中调用方法那么this指向为该对象，当通过使用箭头函数后，this将当前this的指向全部指向外部，那么obj3.a的this指向本为obj3，遇到箭头函数后，this就指向obj3的外部，为window。同样在obj4也是一样的道理！
