箭头函数

今天我来总结一下ES6 对函数做的一些处理。结合我ES5的函数特征，能够让我们根据实际情况，来很好的完成我们的项目需求。

一、ES6的箭头函数

1. 带参数的箭头函数

代码语言：javascript复制

let fun = (x) => x
console.log(fun(2)) //2

这种写法等同于ES5的

代码语言：javascript复制

function fun(x){
  return x
}
console.log(fun(2))  //2

2.给参数默认值

代码语言：javascript复制

let fun = (x = 0,y = 0)=> console.log(x y) ;
fun(3);  // 3
fun(2,3) // 5

这种写法等同于ES5的

代码语言：javascript复制

function fun(x,y){
  var x = x || 0;
  var y = y || 0;
  console.log(x y);
}
fun(3);  // 3
fun(2,3) // 5

是不是简便很多。

3.参数为对象

代码语言：javascript复制

let fun = ({name,age}) => name " is " age " years old";
let obj = {
    name:"king",
    age:"23"
}
console.log(fun(obj)) //king is 23 years old

这种写法等同于ES5的

代码语言：javascript复制

 function fun(obj){
    return obj.name " is " obj.age " years old";
 }
 let obj = {
    name:"king",
    age:"23"
 }
 console.log(fun(obj)) //king is 23 years old

4.以上我们只在函数体内执行了一个代码语句，如果要执行多个我们需要用 {}

代码语言：javascript复制

let fun = (x = 0,y = 0)=>{
    console.log(x y);
    console.log(x-y);
}
fun(2,3);

5.如果我们要返回（return）的数据是对象我们应该使用 （），否之的话 {} 会被认为是代码块，而且被执行。

代码语言：javascript复制

let fun = ()=>({name:"jhon",age:23});

console.log(fun()) //返回对象 {name:"jhon",age:23}

6.在对象的方法中我们可以这样简化函数

代码语言：javascript复制

 let obj = {
    name:"king",
    fun(){
          alert(1)
    }
 }
 obj.fun(); // 1

这种写法等同于ES5的

代码语言：javascript复制

let obj = {
    name:"king",
    fun:function (){
          alert(1)
    }
 }
 obj.fun(); // 1

二、ES6中函数的注意点

1.箭头函数不可以用new 在去实例化对象，如果你这样操作，将会报错

代码语言：javascript复制

let fun = (x = 0,b = 0)=>{console.log(x b);};
let funClone = new fun(); // 报错 fun is not a constructo
funClone(2,3)

2.不可以使用arguments对象，该对象在函数体内不存在，如果要用的话，可以用rest参数代替；

3.函数体内的this对象就是定义时所在的对象，而不是使用时所在对象；

代码语言：javascript复制

var obj = {
    name:"king",
    fun(){
        setTimeout(() => { // 使用箭头函数
            console.log(this);
        },1000)
    },
    fuc:function(){
        setTimeout(function(){
            console.log(this);
        },1000)
    }
  }
  obj.fun(); // 返回 obj 对象
  obj.fuc(); // 返回window 对象

ecmascript

0 人点赞