• ES6 箭头函数以及this


    es6箭头函数

    es6推出了箭头函数,用来简化定义匿名函数;

     

    基本语法:

    let func1=function(){
        console.log('普通无参匿名函数');
    }
    func1();
     
    let func2=()=>console.log('箭头函数');
    func2();

    执行效果一样:

    let func2=()=>console.log('箭头函数');

    这个括号是方法参数,里面可以写形参;=>后面的内容是方法体;

    假如有一个参数的时候,这么写:

    let func3=(c)=>console.log(c,'箭头函数,一个参数');
    
    func3('参数一');

    当然一个参数的时候,括号可以省略(我个人习惯,还是不省略,不然看着别扭)

    let func4=c=>console.log(c,'箭头函数,一个参数,括号可以省略');
    
    func4('参数一');

    // 两个或者两个以上参数情况 (括号不能省略)

    let func5=(a,b)=>console.log(a,b);
    
    func5(1,2);

    // 箭头函数,只有一条语句,可以省略大括号{}

    let func6=()=>{
    
    console.log('箭头函数,只有一条语句,可以省略大括号{}');
    
    }
    
    func6();

    // 函数体,多条语句,要用大括号{}

    let func7=(a,b)=>{
    
    let c=a+b;
    
    return c;
    
    }
    
    console.log(func7(1,2));

    // 特殊情况 假如不加花括号,表达式返回最终结果;

    let func8=(a,b)=>a+b
    
    console.log(func8(1,4));

    // 重要特性 箭头函数没有this,所以this是定义的时候,外部所在的对象是它的this。不是调用的时候的this;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button id="btn">
        按钮
    </button>
    </body>
    <script type="text/javascript">
        let func1=function(){
            console.log('普通无参匿名函数');
        }
        func1();
    
        let func2=()=>console.log('箭头函数');
        func2();
    
        let func3=(c)=>console.log(c,'箭头函数,一个参数');
        func3('参数一');
    
        let func4=c=>console.log(c,'箭头函数,一个参数,括号可以省略');
        func4('参数一');
    
        let func5=(a,b)=>console.log(a,b);
        func5(1,2);
    
        let func6=()=>{
            console.log('箭头函数,只有一条语句,可以省略大括号{}');
        }
        func6();
    
        // 函数体,多条语句,要用大括号{}
        let func7=(a,b)=>{
            let c=a+b;
            return c;
    
        }
        console.log(func7(1,2));
    
        // 特殊情况 假如不加花括号,表达式返回最终结果;
        let func8=(a,b)=>a+b
        console.log(func8(1,4));
    
        // 重要特性 箭头函数没有this,所以this是定义的时候,外部所在的对象是它的this。不是调用的时候的this;
        let name='marry';
        let obj={
            name:'jack',
            age:20,
            /*getName:()=>{
    
                console.log(this.name)
    
            }*/
    
            getName:function(){
                 document.getElementById('btn').onclick=()=>{
                     console.log(this)
                 }
                console.log(this.name)
            },
    
            getName2:() =>{
                document.getElementById('btn').onclick=()=>{
                    console.log(this.name)
                }
            }
        };
        obj.getName();
        obj.getName2();
    </script>
    </html>

     外部let name=’‘marry无法访问到,换成var去定义就可以

  • 相关阅读:
    dremio 学习一 简单了解
    dremio 集群简单部署
    idea 无法添加maven项目问题
    maven几个加速地址配置
    dremio mongodb objectid 转换问题
    cube.js 集成dremio
    dremio 集群部署模式
    timescaledb 2.0 ga了
    dremio 数据湖平台
    dremio 中文查询问题解决
  • 原文地址:https://www.cnblogs.com/zsh-blogs/p/12963347.html
Copyright © 2020-2023  润新知