es6箭头函数this指向问题 箭头函数与普通函数的区别

         //  箭头函数是没有函数体,this也不会指向本身

        //箭头函数不会new来创建构造函数的实例,它没有重复使用的构造能力,不能用new关键字来调用箭头函数,因此也不需要              构造原型了,不会自动生成prototype属性

        //箭头函数是函数表达式,而且是匿名的,所以不能为箭头函数命名

 

  <!-- 普通函数 function(){}    箭头函数()=>{} -->

    <script>

        //普通函数可以是函数表达式,也可以是函数声明

        let arry=["a","b","c"]

        let  arryAdd=arry.map(function(item){

            return item+='字母'

        })

        //箭头函数是函数表达式,而且是匿名的,所以不能为箭头函数命名

     1  // let  arryAdd=arry.map(item=>item+='字母')

       // console.log(arryAdd); //["a字母","b字母","c字母"]

 

    2 function normal(){

            return arguments.length  //arguments类似数组的对象

            // 给函数传入参数的时候就可以像数组一样调用数组的元素或则属性

        }

        console.log("今天"+normal(1,2,3)+"碗饭"); //今天3碗饭

 

        let arrow=()=> arguments.length;  //没有arguments,所以显示未定义

        // 程序不会给箭头函数创建arguments对象,匿名函数一般都是不用参数或则限定函数来执行

         console.log(arrow(1,2,3));

 

      3 . //  function normal(){

        //      return ()=>arguments.length;

        //  }

        //  let arrow=normal(1,2,3);

        //  console.log("今天"+arrow()+"碗饭");  //今天3碗饭

 

 

<body>

    <p class="normal"></p>

    <p class="orrowP"></p>

    <script>

        const normaLP=document.querySelector(".normal");

        const arowP=document.querySelector(".orrowP")

     4.   // let normaL={

        //     bibi:'bibi',

        //     biubiu:function(){

        //         setTimeout(function(){

        //             normaLP.innerHTML="普通函数:"+this.bibi;

        //         },10)

        //     }

        // }

       // this.bibi原本是想获取normaL对象的bibi这个属性,this在普通函数里面是动态的

        //回调函数导致丢失this绑定的现象,当执行斩的任务执行完毕以后才会执行回调函数

        // 回调函数就相当于在全局对象里面执行,也就是指向window,而window并没有定义bibi这个属性,所以

        // 未定义

        // normaL.biubiu() //undefined  

 

      5. // let arrow={

        //     bibi:'bibi',

        //     biubiu:function(){

        //         setTimeout(()=>{

        //             arowP.innerHTML="箭头函数:"+this.bibi;},10)

        //     }

        // }

        //箭头函数是被一个普通函数给包住,this会绑定到最近一层普通函数的this

        // 也就是这个this会绑定到arrow对象,如果没有函数包住,这个this会指向全局,

        // arrow.biubiu()  //biubiu


 

   6. //   let icecrenom={

    //       nome:'牛',

    //       flavour:["羊","猪","马","驴","狗"],

    //       adding:function(){

    //           this.flavour.map(function(item){   //这个this指向adding

    //               normaLP.innerHTML+=item+this.nome+"";

    //           });

    //       }

    //   }

        // icecrenom.adding()   //这里的this.nome指向全局window

        //羊undefined猪undefined马undefined驴undefined狗undefined

 

    // 要想this.nome明确指向,需要强行改变this的指向,一般就要用call,apply或则bind三个方法

   7. let icecrenom={

          nome:'牛',

          flavour:["羊","猪","马","驴","狗"],

          adding:function(){

              this.flavour.map(function(item){   //这个this指向adding

                  normaLP.innerHTML+=item+this.nome+"";

              }.bind(this));  //这里用bind(),好处是bind可以改变this,但不自动执行函数

          }

      }

      icecrenom.adding()  //羊牛猪牛马牛驴牛狗牛


 

8.    //   如果用箭头函数就是直接指向了

          let icecrenom={

          nome:'牛',

          flavour:["羊","猪","马","驴","狗"],

          adding:function(){

            //   this.nome外面有函数包裹,因此this直接指向外部函数的this值

            //箭头函数不能通过call,apply或则bind三个方法来改变this的值

              this.flavour.map(item=>normaLP.innerHTML+=item+this.nome+"" ); 

          }

      }

      icecrenom.adding()  //羊牛猪牛马牛驴牛狗牛

    </script>

</body>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值