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();
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    在画图时添加中文
    legend图例
    数组的拼接
    将多维数组改为一维数组
    ChinaCock扫描控件介绍-使用TCCBarcodeScanner引起app闪退
    ChinaCock打印控件介绍-TCCFujitsuPrinter实现蓝牙针式打印
    用NetHttpClient执行Post操作遇到的问题
    【转】FireMonkey ListView 自动计算行高
    基于MQTT的串口数据转发器
    kbmMW均衡负载与容灾(1)
  • 原文地址:https://www.cnblogs.com/ht955/p/14092140.html
Copyright © 2011-2022 走看看