一、函数的this指向
this是每一个函数都 一定有的关键词
this本质上是一个对象数据结构 用于指向数据
通过this关键词，可以调用操作这个 数据
1、this指向window 声明式函数 匿名函数 定时器 延时器 forEach循环
2、this指向事件源 事件绑定中，事件处理函数 this指向默认是事件源，也就是绑定事件的标签对象
3、this指向数组/对象 数组/对象 中存储的函数this指向是这个数组/对象
二、箭头函数的this指向
箭头函数的this指向 是 父级程序的this指向
如果没有父级程序 或者 父级程序没有指向 箭头函数的this指向是window
(1)匿名函数绑定的事件处理函数 this指向默认是事件源 也就是div标签对象
oDiv.addEventListener('click' , function(){
console.log(this);
})
（2）箭头函数的this指向，是父级程序的this指向，下面的箭头函数没有父级程序，所以this指向是window
oDiv.addEventListener('click' , ()=>{
console.log(this);
})
(3)对象中定义的函数 和箭头函数
const obj = {
name:'张三',
age:18,
sex:'男',
// 对象中定义的函数 this指向是这个对象本身
fun1:function(){
console.log(this)
},
// 箭头函数,this指向是父级程序
// 当前箭头函数,父级程序是对象
// 对象是没有this的,箭头函数this指向是window
fun2:()=>{
console.log(this)
},
fun3:function(){
//定义在对象中的函数fun3,this指向是对象本身
//函数fun4是一个箭头函数
//存储在 函数fun3 中 父级程序就是函数fun3
//函数fun3的this指向是存储fun3的对象obj
//箭头函数fun4 的this指向 和 父级程序fun3的this指向相同
//也就是 obj对象本身
const fun4 = ()=>{
console.log(this);
}
fun4();
}
};
三、改变this指向 ==>通过JavaScript提供的函数方法
1、调用执行函数时 改变this指向
call
函数调用.call(参数1，参数2，参数3......)
参数1：要改变的指向
之后的参数2，参数3......是原始函数需要的数据
apply
函数调用.apply(参数1，[参数2，参数3....])
参数1：要改变的this指向
之后的所有参数以数组的形式赋值 原始函数需要的数据
call和apply执行程序的原理、结果都完全一致，只是给原始函数赋值参数的语法形式不同
2、【生成新的函数】时 改变this指向
bind
函数.bind(参数1，参数2，参数3....)
参数1：新的this指向
之后所有的参数 参数2，参数3......都是原始函数需要的参数数据
