ES6箭头函数和this

138 阅读1分钟

ES6新增了一个使用(=>)箭头符号定义函数的语法特性

let fn = name => name;
        console.log(fn(''));
        //翻译成函数代码为
        let fn = function (name){
            return name;
        };

复制代码箭头函数也可以传递两个或以上的参数,并实现运算后返回

 let fn=()=>'111';
        console.log(fn());
        //翻译成函数代码为:
        let fn = function (){
            return '111';
        };

如果函数体需要更复杂的操作,可以将将头符号右边使用传统函数体

let fn = (x,y)=>{
            return x+y;
                };
                console.log(fn(10,20));

如果箭头函数右边是对象,返回的是对象,则需要用圆括号包含着

 let fn =name=>({name:name,age:100});
        console.log(fn('111').name);
        //翻译成函数代码为:
        let fn=function (name){
            return{
                name:name,
                age:100
            }
        };

如果箭头函数左边是对象作为参数,右边是对象的属性运算,也支持

let fn = ({name,age})=> name + ',' +age;
        console.log(fn({name:'111',age:100}));

自我立即执行函数,也可以使用箭头符号来创建

((name) =>{
            console.log(name);
        })('111');
        //翻译成函数代码为:
        (function (name){
            console.log(name);
        })('111');