箭头函数的介绍
箭头函数是 es6 当中对函数的一种全新表示法. 其将函数的简洁性发扬到了极致! 先来看一个最简单的箭头函数:
- let fn=v=>v;
- console.log(fn("好酷的箭头函数!"));// 好酷的箭头函数!
初次接触箭头函数的人可能会为其简洁性的语法而惊讶! 和之前的写法进行一次比较:
- let fn=function(v){
- return v;
- }
- console.log(fn("好酷的箭头函数!"));// 好酷的箭头函数!
箭头函数的写法
1, 如果只有一条语句, 可以将 {} 和 return 省略掉
- v=>v+v;
- // 相当于
- function (v){.
- return v+v;
- }
2, 如果语句为多条, 则不可以省略 {} 和 return
- v=>{
- var sum=0;
- for(let i=0;i<v;i++){
- sum+=i;
- }
- return sum;
- }
有两点需要注意:
* 当没有参数或有多个参数时, 需要用括号 () 括起来:
(num1,num2)=>num1+num2;
* 当省略 {} 和 return 时, 如果返回的内容是一个对象, 对象需要用括号 () 括起来:
()=>({name:"laoliu"});
箭头函数不能用于构造函数
先看不是箭头函数的构造函数代码, 一切正常!
- var Box=function(age){
- this.myAge=age;
- }
- var obj=new Box(20);
- console.log(obj.myAge);//20
如果改为箭头函数的形式, 再来看看:
- var Box=age=>{
- this.myAge=age;
- }
- var obj=new Box(20);//Box is not a constructor
- console.log(obj.myAge);
箭头函数没有 prototype 属性
- var Foo = () => {};
- console.log(Foo.prototype); // undefined
箭头函数不绑定 arguments
一道面试题可以说明一切:
- var arguments = 42;
- var fn = () => arguments;
- console.log(fn()); // 42
- function foo() {
- var f = (i) => arguments[0]+i;
- return f(2);
- }
- console.log(foo(1)); // 3
箭头函数不绑定 this
箭头函数中的 this 指向的是定义时的 this, 而不是执行时的 this. 也就是说箭头函数没有自己的 this, 其内部的 this 绑定到它的外围作用域. 对象内部的箭头函数若有 this, 则指向对象的外围作用域.
再来看道面试题:
- window.color = "red";
- //let 声明的全局变量不具有全局属性, 即不能用 window. 访问
- let color = "green";
- let obj = {
- color: "blue",
- getColor: () => {
- return this.color;//this 指向 window
- }
- };
- let sayColor = () => {
- return this.color;//this 指向 window
- };
- obj.getColor();//red
- sayColor();//red
箭头函数无法使用 call()或 apply()来改变其运行的作用域.
再来一道面试题
- window.color = "red";
- let color = "green";
- let obj = {
- color: "blue"
- };
- let sayColor = () => {
- return this.color;
- };
- sayColor.apply(obj);//red
来源: http://www.jianshu.com/p/a416cb02e4a2