一起来学习一下this关键字

一、定义

　　this是在函数被调用时确定的，它的指向完全取决于函数调用的地方，而不是它被声明的地方（箭头函数除外）。当一个函数被调用时，会创建一个执行上下文，它包含函数在哪里调用（调用栈）、调用方式、参数等信息，this属性会记录这些信息，会在函数执行的过程中被用到。

　　this在函数的指向有以下几种场景：

　　　　1）作为构造函数被new调用；

　　　　2）作为对象的方法使用；

　　　　3）作为函数直接调用；

　　　　4）被call、apply、bind调用；

　　　　5）箭头函数中的this；

二、this在各种场景中的指向

　　1、new 绑定

　　函数如果作为构造函数使用new调用时，this绑定的是新创建的构造函数的实例。

functionTest() {
    console.log(this)
}
var o = new Test()       // 输出: Test 实例，this 就是 o

　　实际上使用new调用构造函数时，会依次执行以下操作：

　　　　A：创建一个新对象；

　　　　B：构造函数的prototype被赋值给这个新对象的_proto_;

　　　　C：将新对象赋值给当前的this；

　　　　D：执行构造函数；

　　　　E：如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象，如果返回的不是对象将被忽略；

　　2、显式绑定

　　　我们可以通过call、apply、bind修改函数绑定的this，使其成为我们指定的对象。实现方法：通过方法的第一个参数来显式绑定this。

　　　call()方法与 apply()方法的作用相同，它们的区别仅在于接收参数的方式不同，call 方法接受的是参数列表，而 apply 方法接受的是一个参数数组。

func.call(thisArg, arg1, arg2, ...)        // call 用法
func.apply(thisArg, [arg1, arg2, ...])     // apply 用法

　　　bind()会创建一个函数的实例，其 this 值会被绑定到传给 bind()函数的值，并返回一个新的函数，且在调用新函数时，将给定参数列表作为原函数的参数序列的前若干项。

func.bind(thisArg[, arg1[, arg2[, ...]]])    // bind 用法

var food = {
    name: '汉堡',
    price: '5块钱',
    getPrice: function(place) {
        console.log(place + this.price)
    }
}

food.getPrice('KFC ')   // 浏览器中输出: "KFC 5块钱"

var getPrice1 = food.getPrice.bind({ name: '鸡腿', price: '7块钱' }, '肯打鸡 ')
getPrice1()       // 浏览器中输出: "肯打鸡 7块钱"

　　注意： 如果你把 null 或 undefined 作为 this 的绑定对象传入 call、apply、bind，这些值在调用时会被忽略，实际应用的是默认绑定规则。

var a = 'hello'

function foo() {
    console.log(this.a)
}

foo.call(null)         // 浏览器中输出: "hello"

　　3、隐式绑定

　　函数是否在某个上下文对象中调用，如果是的话 this 绑定的是那个上下文对象。

var a = 'hello'

var obj = {
    a: 'world',
    foo: function() {
        console.log(this.a)
    }
}

obj.foo()       // 浏览器中输出: "world"

　　4、默认绑定

　　非严格模式下 this 绑定到全局对象（浏览器下是 winodw，node 环境是 global），严格模式下 this 绑定到 undefined （因为严格模式不允许 this 指向全局对象）。

var a = 'hello'

function foo() {
    var a = 'world'
    console.log(this.a)
    console.log(this)
}

foo()             // 相当于执行 window.foo()  输出： "hello" Window 对象

　　注意：以下情况

var a = 'hello'

var obj = {
    a: 'world',
    foo: function() {
        console.log(this.a)
    }
}

var bar = obj.foo

bar()              // 浏览器中输出: "hello"

　　此时 bar 函数，也就是 obj 上的 foo 方法为什么又指向了全局对象呢，是因为 bar 方法此时是作为函数独立调用的，所以此时的场景属于默认绑定，而不是隐式绑定。这种情况和把方法作为回调函数的场景类似：

var a = 'hello'

var obj = {
    a: 'world',
    foo: function() {
        console.log(this.a)
    }
}

function func(fn) {
    fn()
}

func(obj.foo)              // 浏览器中输出: "hello"

参数传递实际上也是一种隐式的赋值，只不过这里 obj.foo 方法是被隐式赋值给了函数 func 的形参 fn，而之前的情景是自己赋值，两种情景实际上类似。这种场景我们遇到的比较多的是 setTimeout 和 setInterval，如果回调函数不是箭头函数，那么其中的 this 指向的就是全局对象。

　　　5、this绑定的优先级

　　　　new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定｜｜this 的判断顺序

　　　　A：new 绑定： 函数是否在 new 中调用？如果是的话 this 绑定的是新创建的对象；

　　　　B：显式绑定： 函数是否是通过 bind、call、apply 调用？如果是的话，this 绑定的是指定的对象；

　　　　C：隐式绑定： 函数是否在某个上下文对象中调用？如果是的话，this 绑定的是那个上下文对象；

　　　　D：如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到全局对象；

　　6、箭头函数中的this

　　　　箭头函数 是根据其声明的地方来决定 this 的 

　　　　

var a = 'hello'

var obj = {
    a: 'world',
    foo: () => {
        console.log(this.a)
    }
}

obj.foo()             // 浏览器中输出: "hello"

var a = 20
var obj = {
    a: 40,
    foo:() => {
        console.log(this.a)
    
        function func() {
            this.a = 60
            console.log(this.a)
        }
    
        func.prototype.a = 50
        return func
    }
}

var bar = obj.foo()        // 浏览器中输出: 20
bar()                      // 浏览器中输出: 60
new bar()              // 浏览器中输出: 60

　　稍微解释一下：

　　　　1、var a = 20 这句在全局变量 window 上创建了个属性 a 并赋值为 20；

　　　　2、首先执行的是 obj.foo()，这是一个箭头函数，箭头函数不创建新的函数作用域直接沿用语句外部的作用域，因此 obj.foo() 执行时箭头函数中 this 是全局 window，首先打印出 　　window 上的属性 a 的值 20，箭头函数返回了一个原型上有个值为 50 的属性 a 的函数对象 func 给 bar；

　　　　3、继续执行的是 bar()，这里执行的是刚刚箭头函数返回的闭包 func，其内部的 this 指向 window，因此 this.a 修改了 window.a 的值为 60 并打印出来；

　　　　4、然后执行的是 new bar()，根据之前的表述，new 操作符会在 func 函数中创建一个继承了 func 原型的实例对象并用 this 指向它，随后 this.a = 60 又在实例对象上创建了一个属性 a，在之后的打印中已经在实例上找到了属性 a，因此就不继续往对象原型上查找了，所以打印出第三个 60；