ES6—箭头函数

箭头函数用 => 符号来定义。
箭头函数相当于匿名函数,所以采用函数表达式的写法。
左边是传入函数的参数,右边是函数中执行的语句。

一、箭头函数基本形式

let func = (num) => num;
let func = () => num;
let sum = (num1,num2) => num1 + num2;
[1,2,3].map(x => x * x);

1、当只有一条 return 语句时,{} 和 return 可以一起省略

const getSum = (x, y) => { return x + y }
const getSum2 = (x, y) => x + y
console.log(getSum(1, 2));
console.log(getSum2(1, 2));

2、当只有一个形参时,() 可以省略

const double = (x) => { return x * 2 }
const double2 = x => x * 2
console.log(double(3));
console.log(double2(3));

3、当只有一条 return 语句,且返回的是一个对象时,把这个对象用()包起来

const f4 = () => { return { a: 2 } }
const f5 = () => ({ a: 2 })
console.log(f4())
console.log(f5())

将函数 fun() 转化为箭头函数

const fun=function(x){
     return function(y){
          return y*3
     }
}
console.log(fun(1)(3));

// 转换为箭头函数
const fun1=x=>y=>y*3
console.log(fun1(1)(4));

二、箭头函数基本特点

1、箭头函数this为父作用域的this,不是调用时的this

箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind。
普通函数的this指向调用它的那个对象。

2、箭头函数不能作为构造函数,不能使用new

3、箭头函数没有 argument ,普通函数有

4、箭头函数没有原型属性

5、箭头函数不能进行函数提升 

const fun = () => {
            console.log(this)
        }
        fun()
        // new fun()
        const obj1 = {
            a: 1,
            fun2: () =>{
                console.log(this)
                const fun3 = () => {
                    console.log(this);
                }
                fun3()
            },
        }
        obj1.fun2()  // window  window
        obj1.fun2.call(obj1)  // window  window

        const obj2 = {
            a: 2,
            fun2: function() {
                console.log(this)
                const fun3 = () => {
                    console.log(this);
                }
                fun3()
            },
        }
        obj2.fun2()  // obj2  obj2
        obj2.fun2.call(obj2)  // obj2 obj2

你可能感兴趣的:(es6,前端,ecmascript)