箭头函数 函数中的this指向

  // 箭头函数

        // 在匿名函数中,使用 => 箭头来替换 关键词 function 

        // 箭头定义下 () 和 {} 之间

        // 等于在使用新的关键词声明 函数

        // 箭头函数的主要作用是,改变 函数中的 this 指向 

        // 为了 配合 构造函数语法

        // 普通的匿名函数

        var fun = function(){};

        // 箭头函数声明的匿名函数

        var fun = () => {}

        // 如果只有一个形参要定义,可以不写()

        var fun = function(e){}

        var fun = (e) => {}

        var fun = e => {}

        // {}中如果只有一行执行程序,可以不写{}

        var fun = function(){console.log();}

        var fun = () => { console.log(); }

        var fun = () => console.log();

        // 只有一个参数,并且只有一行代码,(),{}都可以不写

        var fun = function(e){console.log(e);}

        var fun = e => { console.log(e); }

        var fun = e => console.log(e);

 

 

  <div>123</div>

    <script>

        const oDiv = document.querySelector('div');

        const arr = [1,2,3,4,5];

        console.dir(arr);

        

        // 函数中的this指向

        // this 只 存在于 函数,构造函数中 才会有 this

        // 其他程序语句中是没有this的

        // 如果你该不清楚this指向是谁,直接在程序中console.log(this),瞅瞅

        // this的作用是 替换替代,this指向的对象

        // 在对象中的this,指向的是,定义这个函数的对象本身

        // this.属性等于就是 这个 对象.属性

        // const fdjkasfjdsiauewrjnewkj = {

        //     name:'张三',

        //     age:18,

        //     sex:'男',

        //     fun:function(){

        //         console.log(this);

        //         console.log(this.name , this.age , this.sex);

        //     }

        // }

        // fdjkasfjdsiauewrjnewkj.fun();

        // 函数中的this指向

        // 普通函数 ---- 不是构造函数,不是箭头函数等,就是通过function声明的函数

        

        // this指向是window

        function fun1(){

            console.log(this);

        }

        fun1();

        window.fun1();

        

        // this指向是window

        var fun2 = function(){

            console.log(this);

        }

        fun2();

        window.fun2();

        

        // this指向是存储这个函数的对象

        // const obj = {fun:function(){}}

        obj.fun()

        

        // this指向是绑定事件的标签对象

        // e事件对象,指向的是触发事件的标签对象

        // oDiv.onclick = function(){

        //     console.log(this);

        // }

        // this指向是绑定事件的标签对象

        // document.addEventListener('click' , function(){console.log(this)} )

        

        // this指向是window  

        // arr.forEach(function(){console.log(this)});

        

        // this指向是window  

        // setInterval( function(){

        //     console.log(this);

        // } , 1000 );

        // this指向是window  

        // setTimeout( function(){

        //     console.log(this);

        // } , 1000 );

        // 总结:

        // window : 是 BOM 操作的顶级对象

        //          JavaScript会把 声明式定义的函数 赋值式的匿名函数 存储在 window顶级对象中

        //          调用 window中定义的函数方法,可以不写 window    alert()  window.alert()

        //          调用 fun1()  实际上,本质是在调用 window.fun1()

        // 对象   : 调用对象中函数,通过  对象.函数键名()

        // 以上两种情况,this指向的都是 点之前的对象

        // 事件处理函数 : on...绑定语法 addEventListener 监听语法

        //               this指向都是 函数前 绑定函数的标签对象

        // 定时器,延时器 : 实际也是存储在 window 中

        //                调用时 实际上也是 window.定时器  window.延时器

        // forEach 的 this 指向是 window

        //         forEach 是存储在 数组中 

        //         理论上,语法是 arr.forEach

        //         理论上,this指向应该是 arr 数组

        //         只有函数有this指向,arr数组本身是没有this指向的

        //         没有this指向,指向的是父级程序的this指向,arr的父级,就是window顶级对象

        // 总结: 通过 function 声明的函数,this指向的都是

        //       调用函数时,函数之前写的内容

        //       数组是特殊的内容,forEach 循环变量数组, this指向window

    </script>