js箭头函数/函数this指向

一、函数的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......都是原始函数需要的参数数据