一、函数的this指向
? ? ? ? this是每一个函数都 一定有的关键词
? ? ? ? this本质上是一个对象数据结构 用于指向数据
? ? ? ? 通过this关键词，可以调用操作这个 数据
? ? ? ? 1、this指向window? ? 声明式函数 匿名函数 定时器 延时器 forEach循环
? ? ? ? 2、this指向事件源? ? ?事件绑定中，事件处理函数 this指向默认是事件源，也就是绑定事件的标签对象
? ? ? ? 3、this指向数组/对象 数组/对象 中存储的函数this指向是这个数组/对象
二、箭头函数的this指向
? ? ? ? 箭头函数的this指向 是 父级程序的this指向
? ? ? ? 如果没有父级程序 或者 父级程序没有指向 箭头函数的this指向是window
(1)匿名函数绑定的事件处理函数 this指向默认是事件源 也就是香港vpsdiv标签对象
?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......都是原始函数需要的参数数据
31177577