箭头函数和普通函数的区别

1、箭头函数不绑定this，会捕获其所在的上下文的值(继承外围作用域的this)，作为自己的this。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var obj = {  
    a:10,  
    b:() => {  
        console.log(this.a)  //undefined  
        console.log(this)    //window  
    },  
    c:function(){  
        return () => {  
            console.log(this.a)  //10  
        }  
    },  
	d:function(){  
   	        console.log(this.a)  //10  
   	        console.log(this)    //f  
   	    }  
   	}  
   	obj.b();  
   	obj.c()();  
   	obj.d()

2、箭头函数在定义之后，this就不会发生改变了。通过call()或apply()方法调用一个函数时，只是传入了参数而异，对this并没有什么影响。

1
2
3
4
5
6
7
8
9
var obj = {  
    a:10,  
    b:function(n){  
        var f = (v)=> v + this.a  
        var c = {a:20};  
        return f.call(c,n)  
    }  
}  
console.log(obj.b(1)) //11

3、不可以当作构造函数，也就是说，不可以new命令，否则会抛出一个错误。

1
2
3
4
let Fun =()=>{  
    console.log('111')  
}  
let f = new Fun()  //TypeError:Fun is not a constructor

4、不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。

1
2
3
4
5
6
7
8
9
10
11
12
13
function A(){  
    console.log(arguments)  
}  
var B = (b) => {  
    console.log(arguments)  
}  
let C = (...c) => {   //..c即为rest的参数  
    console.log(c)  
  
}  
A(2)       //Arguments[2, callee: ƒ, Symbol(Symbol.iterator): ƒ]  
B(2)       //ReferenceError:arguments is not defined  
C(2)       //[2]

5、不可以使用yield命令，因此箭头函数不能用做Generator函数。

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

1
2
3
4
5
6
7
8
var a = () => {  
    return 1  
}  
function b(){  
    return 2;  
}  
console.log(a.prototype)  //undefined  
console.log(b.prototype)  // {constructor:f}

7、箭头函数不能换行

1
2
var a = ()  
          =>1;  //SyntaxError:Unexpectede token =>

箭头函数后面的大括号

注意：

  • 箭头函数后面不加大括号，默认只能有一行代码，默认return；
  • 箭头函数后面加大括号，默认没有return
1
2
3
4
5
6
7
8
9
let res1 = (r1,r2) => r1+r2;
let res2 = (r1,r2) => {r1+r2};
let res3 = (r1,r2) => {return (r1+r2)}
let r1 = res1(1,2)
let r2 = res2(1,2)
let r3 = res3(1,2)
console.log(r1) //3
console.log(r2) //undefined
console.log(r3) //3

打印出来发现r1,r3正确，r2为undefined