this new bind call apply

1. this 指向的类型

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

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

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

2 作为对象的方法使用；

3 作为函数直接调用

4 被call   apply bind调用

5 箭头函数中的this

下面我们分别来讨论一下这些场景中this的指向

1.1 new 绑定

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

function Foo() {
console.log(this)
}

var bar = new Foo() // 输出: Foo 实例，this 就是 bar

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

1. 创建一个新对象；
2. 构造函数的 prototype 被赋值给这个新对象的 __proto__；
3. 将新对象赋给当前的 this；
4. 执行构造函数；
5. 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象，如果返回的不是对象将被忽略；

1.2 显式绑定

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

function foo(name, price) {
this.name = name
this.price = price
}

function Food(category, name, price) {
foo.call(this, name, price) // call 方式调用
// foo.apply(this, [name, price]) // apply 方式调用
this.category = category
}

new Food('食品', '汉堡', '5块钱')

// 浏览器中输出: {name: "汉堡", price: "5块钱", category: "食品"}

call 和 apply 的区别是 call 方法接受的是参数列表，而 apply 方法接受的是一个参数数组。

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

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

附参考链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/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块钱"

1.3 隐式绑定

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

var a = 'hello'

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

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

上面代码中，foo 方法是作为对象的属性调用的，那么此时 foo 方法执行时，this 指向 obj 对象。也就是说，此时 this 指向调用这个方法的对象，如果嵌套了多个对象，那么指向最后一个调用这个方法的对象：

var a = 'hello'

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

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

最后一个对象是 obj 上的 b，那么此时 foo 方法执行时，其中的 this 指向的就是 b 对象。

1.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 对象

上面代码中，变量 a 被声明在全局作用域，成为全局对象 window 的一个同名属性。函数 foo 被执行时，this 此时指向的是全局对象，因此打印出来的 a 是全局对象的属性

注意有一种情况：

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 指向的就是全局对象.

其实我们可以把默认绑定当作是隐式绑定的特殊情况，比如上面的 bar()，我们可以当作是使用 window.bar() 的方式调用的，此时 bar 中的 this 根据隐式绑定的情景指向的就是 window。

2. this 绑定的优先级

this 存在多个使用场景，那么多个场景同时出现的时候，this 到底应该如何指向呢。这里存在一个优先级的概念，this 根据优先级来确定指向。优先级：new 绑定 > 显示绑定 > 隐式绑定 > 默认绑定

所以 this 的判断顺序：

1. new 绑定： 函数是否在 new 中调用？如果是的话 this 绑定的是新创建的对象；
2. 显式绑定： 函数是否是通过 bind、call、apply 调用？如果是的话，this 绑定的是指定的对象；
3. 隐式绑定： 函数是否在某个上下文对象中调用？如果是的话，this 绑定的是那个上下文对象；
4. 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到全局对象；

3. 箭头函数中的 this

箭头函数 是根据其声明的地方来决定 this 的，它是 ES6 中出现的知识点。

箭头函数的 this 绑定是无法通过 call、apply、bind 被修改的，且因为箭头函数没有构造函数 constructor，所以也不可以使用 new 调用，即不能作为构造函数，否则会报错。

var a = 'hello'

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

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