this关键字
this关键字：表示当前对象（与使用场景有关）
this使用的几种场景
在普通函数中
this指向window对象
function fn1() { console.log(this);//指向window this.a = 10 } 复制代码在对象方法中
this指向调用方法的对象
let obj = { a: 1, b: 2, fn: function () { console.log('对象方法中的this', this);//执行obj } } // obj.fn() 复制代码在定时器中
指向window对象
<button>this</button> setTimeout(() => { console.log('定时器', this); //指向window }, 1000); 复制代码在事件处理函数中
指向事件源
let btn =document.querySelector('button') btn.onclick=()=>{ console.log(this);//指向事件源btn } 复制代码自执行函数
指向window对象
let fn2 =(function () { console.log(this);//指向window })() 复制代码改变this指向
改变this指向可以通过三种方式，分别是call,apply,bind
call
var obj = { name: 'jack', age: 23 } function fn(a, b) { this.name = a this.age = b console.log(this);//{name: '小明', age: 20} } fn.call(obj, '小明', 20)//指向obj 复制代码apply
var obj = { name: 'jack', age: 23 } function fn(a, b) { this.name = a this.age = b console.log(this);//{name: '小明', age: 20} } fn.apply(obj, ['小明', 20])//指向obj 复制代码bind 会返回一个新函数
var obj = { name: 'jack', age: 23 } function fn(a, b) { this.name = a this.age = b console.log(this);//{name: '小明', age: 20} } var newFn = fn.bind(obj, '小明', 20)//指向obj newFn() 复制代码call、apply、bind 异同点
call和bind传参方式相同
call和bind是直接传参
call和apply传参方式不同
apply 传参是传入一个数组
call和apply不会返回一个新函数，bind会返回一个新的函数，通过调用这个函数才能实现相应的功能
箭头函数中的this问题
箭头函数中没有this，里面的this指向上下文（调用对象所在的对象）
总结
this的指向遵从谁调用就指向谁的原则
作者：小熊9号
链接：https://juejin.cn/post/7018881326929412103