this的指向3

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。

上节课我们详细的介绍了this的四种绑定方式，其中显示绑定里面通过apply,call,bind方式绑定，通过new方式绑定的两种我们在详细的介绍一下。

call，apply和bind有什么区别？

• call和apply的第一个参数都是需要改变this指定的对象，call的参数是依次传入，apply的第二个参数是需要采用数组的形式传入。
• bind不会立即执行，会返回一个函数，需要调用才会执行。

function sum(num1, num2) {
  console.log(num1 + num2, this);
}

sum.call("call",10,20)  //30 String {"call"}
sum.apply("apply",[10,20])  //30 String {"apply"}


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

var bar = foo.bind("foo")
bar()  //String {"foo"}

使用new关键字来调用函数，会执行哪些操作

• 创建一个全新的对象
• 这个新对象被毁执行prototype连接
• 这个新对象会绑定都函数调用的this上
• 如果函数没有返回其他对象，表达式会返回这个对象。

关于this指向的一些补充

• setTimeout中的this指向

setTimeout(function(){
    console.log(this)  //window
},1000)

监听点击的this指向

const boxDiv = document.querySelector(".box")

boxDiv.onclick = function () {
  console.log(this)  //window
}

boxDiv.addEventListener("click",function(){
  console.log(this);  //window
})

高阶函数的this的指向

- `forEach()`，`map`等

    var name = ['a','b','c']
    names.forEach(function(item){
        console.log(item, this)
    })

如何改变`this`的指向

四种this绑定规则的优先级（由低到高）

• 默认规则
• 隐式绑定
• 显示绑定
• new绑定

其this的四种绑定规则也是具有一点的优先级顺序的，这些我们下一篇再来介绍吧~