JS this的指向

JS中 this 在各个环境下的指向问题！

　　一：this在普通函数中的指向 --> window

// 普通函数中的this指向 ----> window
function fn(){
    console.log(this) // ES5 this ----> window
    console.log(this) // ES6 this----> undefined
}

　　当我们在js脚本中定义一个函数，这个函数当调用时他的指向为window，之所以为window是因为在ES5中定义变量和函数都存在变量提升，所以我们的函数和变量都是挂在 window下，在调用函数时，我们通常都会省略window，直接使用函数，所以调用函数其实是window.fn，所以this的指向为它的上文就是window，那么在ES6中出现了新的特性和规定，将不再存在变量提升，所以在ES6的普通函数中this的指向为undefined。

　　二：this在回调函数中的指向（不包含事件处理回调函数）- window

var obj = {

    a:function(fn){
        // 将obj下的 c 方法带入obj下 a 方法中，执行，完成回调
        fn()
    },
    b:function(){
        var arr = [1,2,3,4]
        arr.forEach(function(){
            // 在数组方法 foreach 的回调函数中，this的指向为window
            console.log(this)  // this --> window
        })

        // 定时器的回调函数中，this的指向为window
        setTimeout(function(){
            console.log(this)  // this --> window
        },1000)
    },
    c:function(){
        // 此回调函数的this为window
        console.log(this) // this --> window 
    }
}
// 将obj下的 c 方法带入obj下 a 方法中
obj.a(obj.c)

　　在以上的案例我们可以发现，在回调函数中this的指向都是window，尽管它处在一个对象的环境中，主要原因是回调函数的指向默认为window，且回调函数并没有对象去调用

　　三：this在事件处理函数中的指向   --> 监听事件对象本身

document.addEventListener("click",clickHandler)
function clickHandler(){
    console.log(this) // this --> document
}
var obj0={
    a:function(){
        document.addEventListener("click",this.clickHandler)
    },
    clickHandler:function(){
        console.log(this) // this --> document
    }
}

在如上的案例中，分别给document在两个环境下监听click事件，都是指向事件对象本身，事件的this指向是最好辨别的，只需要记住事件对象是谁就可以。

　　四：对象方法中的this指向  --> 就是调用方法的对象本身

var a = 20
var obj1 = {
    a:1,
    b:this.a,   // b:20 - this的指向为 全局的a=20
    c:function(){
        console.log(this) // 这里this的指向为对象 obj1本身
    }
}
obj1.c()

在对象中：对象的属性如果使用this，那么this的指向为对象外部的this，对象的方法使用this，调用这个方法的对象就是为this的指向。

 　　五：ES6 类中的this指向 --> 实例化对象

class Box{
    a = 1
    static a = 3
    // 静态属性的this只会去指向相对应的静态属性，不会指向动态方法
    // 所以c = 3
    // 当 静态属性 a 没有时，c = undefined
    static c = this.a  // c = 3
    b = this.a
    constructor(){
        console.log(this)  // this --->实例化对象
    }
    play(){
        console.log(this)  // 谁执行 pily方法this就指向谁
        document.addEventListener("click",this.clickFunction)
    }
    clickFunction(e){
        console.log(this)
    }
}
// 实例化对象 - box
var box = new Box()

在ES6 的类中，有两种方法：

一：静态方法：就是在属性或者方法的前面写上 static ，静态方法的this指向为 类本身，不管是属性还是方法

二：动态方法：没有使用 static的都是动态方法，通过构造函数 new出来调用，动态方法的this指向就是谁调用这个方法this指向就是谁，就是实例化对象  

　　六：箭头函数的this指向 -->为箭头函数外部的this

var obj3 = {
    a:()=>{
        console.log(this)  // this指向 ---> window
    }
}
obj3.a()

var obj4 = {
    a:function(){
        var o = {
            b:()=>{
                console.log(this)  // this指向 ---> obj4
            }
        }
        o.b()
    }
}
obj4.a()

这个案例中通过2个对象来验证箭头函数改变this的指向，在对象中调用方法那么this指向为该对象，当通过使用箭头函数后，this将当前this的指向全部指向外部，那么obj3.a的this指向本为obj3，遇到箭头函数后，this就指向obj3的外部，为window。同样在obj4也是一样的道理！