zoukankan      html  css  js  c++  java
  • 简述箭头函数基本使用和this指向的问题

    箭头函数是es6中定义函数的一种方式:

    它分几种方式:

    1. 有两个参数时
    2. 有一个参数时
    3. 没有参数
    4. 在函数代码块中只有一行代码时
    //第一张方式
    const test=(num1,num2)=>
    {
        return num1+num2  
    }
    //第二种方式:当参数只有一个时括号可以省略
    const test=num1=>
    {
        return num1*num1
    }
    //第三种方式
    const test=()=>{}
    //第四种方式,代码块中只有一行代码的时候可以省略掉return以及大括号{}
    const test=(num1,num2)=> nun1*num2

    还有一种情况:

    const test=()=>console.log("test") //打印test,原因就是这里也只有一行代码但是它还是会打印。
    console.log(test()) //打印undefined,原因时console是没有返回值的所以打印的是undefined。

    箭头函数中this指向问题:

    箭头函数在什么情况下使用?

    将一个函数作为参数传给另一个函数的时候这种情况下是可以使用箭头函数的。

    //普通语法
    setimeout(function(){},1000)
    //箭头函数用法:
    setimeout(()=>{},1000)

    此时在箭头函数中使用this的时候会出现一些让人懵逼的问题。。。

    const obj={
        aaa(){
             setimeout(function()
             {
                  console.log(this) //打印的是:window
             },1000),
             settimeout(()=>
             {
                  console.log(this) //打印的是:aaa()对象
             },1000)  
        }
    }

    那么为什么会出现这样的结果呢?

    个人理解:

    就是这个箭头函数中的this指向和通过funtction里面的this差别就是function里面的this是指向的回调函数的,也就是setimeout里面回调的this就是window。而箭头函数中的this是没有执行回调的,而是会一层一层往外找,找到setimeout外面之后这一层的作用域也就是obj里面的aaa这个对象,所以它指向的是aaa。

  • 相关阅读:
    JasperReport笔记
    关于iReport5.6.0无法正常启动或者闪退或者JDK8不兼容的解决方案
    sublime text3 3176激活
    直播技术之编码和封装
    直播技术之推流和传输
    Quic协议剖析
    Glide Picasso和Fresco的对比
    MVP架构学习
    反向打印链表
    重建二叉树
  • 原文地址:https://www.cnblogs.com/hcyesdo/p/15587154.html
Copyright © 2011-2022 走看看