zoukankan      html  css  js  c++  java
  • 箭头函数中的this指向

        // 箭头函数中的this指向
            //     如果是箭头函数,this指向是,父级程序的,this的指向
            //       如果父级程序是一个函数,函数也是有this的,那么箭头函数的this,就是父级函数的this
            //       如果父级程序不是函数,例如对象,数组等,没有this指向,箭头函数的this指向是window顶级对象

            // function声明的,对象中的函数
            // this执行应该是,obj对象本身

            // const obj = {
            //     name:'张三',
            //     age:18,
            //     fun:function(){
            //         console.log(this);
            //     }
            // }

            // 对象中的函数,但是是使用 箭头函数声明的
            // 这个对象中的箭头函数,this指向是 window
            const obj = {
                name:'张三',
                age:18,
                fun:function(){
                    // 当前函数 fun this 指向 是 obj 对象

                    // 在 函数fun 中定义的 子级函数f
                    // 使用的是箭头函数语法
                    // 箭头函数f 也应该有this指向
                    // 所有箭头函数的this指向,都是父级程序的this指向
                    // 箭头函数f 的父级程序 是 函数 fun
                    // 箭头函数f 的this指向,应该就是 父级程序函数fun的this指向
                    // 就是 对象 obj
                    var f = ()=> {
                        console.log(this);
                    }

                    f();
                }
            }

            // obj.fun();


            // obj,中,定义了子级箭头函数fun2
            // 箭头函数fun2,this指向应该是父级程序的this指向
            // 箭头函数fun2,父级程序是,obj
            // obj是个对象,没有this指向的
            // fun2的this指向,是window
            // const obj2 = {
            //     fun2:()=>{console.log(this)}
            // }
            
            // 数组中子级箭头函数,this指向是父级程序数组的this指向
            // 数组是没有this指向的,指向的是window
            // const arr = [()=>{console.log(this)}];

            // arr[0]();

            // 如果匿名函数都写成箭头函数语法,this指向是什么

            // function fun(){}   声明式定义函数,不是匿名函数,不能写成箭头函数形式

            // 匿名函数本身this指向已经是 window,写成箭头函数,this指向仍然你是window
            // var fun = ()=>{console.log(this)} 

            // 定时器,延时器,函数写成箭头函数,this指向仍然是 window
            // setInterval( ()=>{console.log(this)} ,1000 );
            // setTimeout( ()=>{console.log(this)} ,1000 );

            // 事件绑定,匿名函数,this指向,也是window
            // document.addEventListener( 'click' , ()=>{console.log(this)} );
            
            // 总结:
            //    箭头函数的this指向,是 父级程序的 this指向
            //    如果父级没有this指向,结果是 window
            //    如果之前this指向就是window,箭头函数父级没有程序,this指向是window
            //    如果原本this指向是window的箭头函数,如果被父级程序嵌套,也会改变this指向的


            const obj1 = {
                name:'zhangsan',
                fun : function(){
                    // 原本事件处理函数,箭头函数,this指向是window
                    // 当前有父级程序,函数fun
                    // this指向,就是父级程序 函数fun 的this指向
                    // 就是 obj 对象
                    document.addEventListener('click' , ()=>{
                        console.log(this);
                    })
                }
            }
            obj1.fun();
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    01 Java基础第一天
    2019牛客暑期多校训练营(第七场)J A+B problem
    SDNU 1477.矩形面积交(思维)
    SDNU 1194.传纸条(DP)&& 1032.机器人
    SDNU 1280.就问你慌不慌(高精度)
    POJ 2528 Mayor's posters(线段树+离散化)
    HDU 1698 Just a Hook(线段树区间赋值)
    POJ 3468 A Simple Problem with Integers (区间加区间查找)
    HDU 1754 I Hate It(线段树单点更改、区间查找最大值)
    HDU 1166 敌兵布阵(线段树单点加区间查询)
  • 原文地址:https://www.cnblogs.com/ht955/p/14092140.html
Copyright © 2011-2022 走看看