8.ES6箭头函数

作者: 圆梦人生 | 来源:发表于2019-02-11 22:46 被阅读2次

    ES6中函数的定义可以使用箭头( => ) 来定义:

    1、函数可使用箭头定义 =>
    2、当函数只有一个参数的时候 可以省略()
    3、当函数只有一行代码时可以省略{}
    4、箭头函数不绑定this(直接调用的this是继承父级的this)

    案例

    
    <html>
        <head>
            <title>箭头函数</title>
            <meta charset="utf-8"/>
            <script>
                
                // es5 函数定义
                var abc = function(){
                    alert(1);
                }
                //
                abc(); // 1
                
                // es6 使用箭头函数定义
                var abc2 = ()=>{
                    alert(2);
                }
                //
                abc2(); // 2
                
                // es6 当函数只有一个参数的时候 可以省略()
                var abc3 = n =>{
                    alert(n * 2);
                }
                abc3(10)  // 20
                
                //  es6 当函数只有一行代码时可以省略{}
                var abc4 = n => alert(n * 2)
                abc4(20) // 40
                
                // 箭头函数不绑定this
                // es5 函数 this
                var abc5 = function(){
                    //
                    return {
                        aa: function(){
                            console.log(this); // this指向的是当前aa函数
                            this.abc && this.abc() // 当前aa函数下没有abc
                        }
                    }
                }
                abc5().aa();
                // es6 箭头函数 this
                var abc6 = ()=>{
                    //
                    return {
                        aa:()=>{
                            console.log(this); // this指向的是当前window
                            this.abc && this.abc() // 调用abc函数 弹出1
                        }
                    }
                }
                abc6().aa();
            </script>
        </head>
        <body>
            
        </body>
    </html>
    
    

    相关文章

      网友评论

        本文标题:8.ES6箭头函数

        本文链接:https://www.haomeiwen.com/subject/znvceqtx.html