箭头函数

在ES6以前我们用 function 来定义函数,还记得楼主刚学js那会儿老是把function写错 (╯‵□′)╯︵┻━┻,但是自从ES6中出现了箭头函数以后,妈妈再也不担心我写成 fnuction了,那么我们下面开始正式学习!

基本语法:

  • ES6允许使用“箭头”(=>)定义函数。
let func = (num) => num;
  • 上面的箭头函数等同于:
let func = function (num) {
    return num;
}

小伙伴们发现了什么?没错, ES6的箭头函数去掉了function,使我们的代码变得更加简洁,下面再看看其他的写法

  • 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
var func = () => num;
// 等同于
var func = function () { return num };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

让我们来看一个更丧心病狂的写法~

  • 如果箭头函数只有一个参数,可以省略掉括号。
let func = num => 1;
//等同于
let func = function (num) {
    return 1;
}
  • 如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
var sum = (num1, num2) => { return num1 + num2; }
  • 需要注意的一点:因为大括号被解释成代码块,如果箭头函数直接返回一个对象,那么必须要在大括号外面加上括号。
var porson = name => ({ name: name, age: "18" });
  • 更加简洁的表达式。
const isEven = n => n % 2 == 0;
const square = n => n * n;

上面代码只用了两行,就定义了两个简单的工具函数。如果不用箭头函数要写很多行代码,而且不如这个结构清晰

  • 箭头函数的一个用处是简化回调函数,例子如下。
// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

使用注意点:

  1. this指向问题
  • 让我们使用特定的例子来体现箭头函数的this。

先来看看这段代码:

        let person = {
            name:‘光头强‘,
            init:function(){
            //为body添加一个点击事件,看看这个点击后的this属性有什么不同
                document.body.onclick = function(){
                    alert(this.name);//?? this在浏览器默认是调用时的对象,可变的?
                    alert(this);
                }
            }
        }     person.init();

如我们所愿,第一个 alert 弹出的是 undefined,第二个是 body (object HTMLBodyElement);

再来看一段代码:

           let person = {
            name:‘jike‘,
            init:function(){
            //为body添加一个点击事件,看看这个点击后的this属性有什么不同
                document.body.onclick = ()=>{
                    alert(this.name);//?? this在浏览器默认是调用时的对象,可变的?
                }
            }
        }
        person.init();

答案是 jike ,答对了吗?

  • 其实箭头函数本身没有this,而自身的this会在函数声明的时候做绑定,它是根据上级的function中的this来做绑定的

那么问题又来了,如果上级的function也是箭头函数呢?

看看这段代码:

           let person = {
            name:‘jike‘,
            init:()=>{
            //为body添加一个点击事件,看看这个点击后的this属性有什么不同
                document.body.onclick = ()=>{
                    alert(this.name);//?? this在浏览器默认是调用时的对象,可变的?
                }
            }
        }
        person.init();

毫无疑问 this 会指向 window (object Window)。

  • 总结出的结论就是:如果上级也是箭头函数,再上级查找

   2.箭头函数的构造函数

  • 问:箭头函数可以做构造函数吗?
  • 答:不可以!

请看下面代码:

function Person(p){
    //完成初始化
    this.name = p.name;
}

这是没有箭头函数的构造函数,但是用了箭头函数以后呢?

()=>{
   ......
}

等等....这是什么鬼!什么语法!不报错才怪。我故意让他报错的?嘿,你还不信,那再来一种写法。

var Person = (p)=>{
    this.???
}

好的,我们给他加上变量,再等等....这 this 指向哪里?向上级去找?

  • 根据上面代码可以得到结论:当我们知道箭头函数本没有this,而是借的,构造函数自然不攻自破,所以,箭头函数不能做构造函数。

   3. 箭头函数的 arguments

老规矩,先上代码:

let func = (n1,n2)=>{
       console.log(arguments);
     }
func(2,3);

不用看了,答案是:报错,Uncaught ReferenceError: arguments is not defined

  • 箭头函数没有 arguments 吗 ?到这里是不是想到了 this? 箭头函数本身没有this,可以通过向上级查找,那么 argument 呢?

我们来赌一把:

function func0(n1,n2,n3){ //[1, 2, 3]
      let func = (n1,n2)=>{
          console.log(arguments);
     }
        func();
   }

 func0(1,2,3);

恭喜你赌对了(可惜并没有奖励...)。

  • 箭头函数本身也没有 arguments,如果该箭头函数外部包含function,在函数的调用时,箭头函数会将外部arguments拿来

总结:

  • 在使用的时候,不必那么复杂,建议掌握一种就可以了 ()=>{}
  • 看到极为简单的情况也要认识let func = num => num;
  • 一个参数: var f = num => num; 也可以 var f = (num) => num;
  • 没有参数: var f = ()=> 1;
  • 多个参数: var f = (n1,n2)=> n1 + n2;
  • 多行代码: var f = (n1,n2)=>{//code.... return n1 + n2;}

箭头函数的注意点:

  • 箭头函数本身没有 this
  • 自身的 this 会在函数声明的时候做绑定
  • 根据上级的function中的this来做绑定,如果上级也是箭头函数,再上级查找,绑定以后就不再发生改变了,this不再多变
  • **箭头函数本没有this,绑定后不再多变**
  • 箭头函数不可以做构造函数
  • 箭头函数本身也没有arguments
  • 如果该箭头函数外部包含function,在函数的调用时,箭头函数会将外部arguments拿来

感谢观看,希望您看完能有一些收获。

最后安利阮老师的ES6入门:http://es6.ruanyifeng.com

时间: 04-11

箭头函数的相关文章

JS中generater和箭头函数

generater跟函数很像: function* fn(x){ yield x; yield x++; return x;} 如上所示,generater用function*定义,可以用yield返回多次,也可以使用return返回; 调用generater有两个方法,一是一直调用generater的next()方法: console.log(fn.next()); console.log(fn.next()); console.log(fn.next()); 直到fn.next()返回tru

es6箭头函数

1.先来看看es6对函数做了什么:默认值! function add(a=1,b=2) {//默认值 console.log(a+b) } add(5,6); let a=0; if(a==0){ // throw new Error('错误')//手动报错 } //console.log(add.length)//如果给了默认值,那就不计算在必要参数里,也就是得到0了 //好奇的朋友可以打开注释试一试,这个默认参数和必要参数不一样哦,不给默认值的为必要参数,是你必须要传入的,给了默认值的就不用

ES6的箭头函数详解:

箭头函数是ES6中新增一个函数表达形式,它是对函数的一种简化ES6允许使用"箭头"(=>)定义函数. Eg: var f = v => v; 等同于之前 var f = function(v) { return v; }; const Even = n => n % 2 == 0; const Square = n => n * n; 注: 箭头函数就是省略了function 参数集与函数体之间一定要有一个箭头=> 对于参数集而言: 零个参数用 () 表示

ES6新特性(函数默认参数,箭头函数)

ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者false时,会直接取到后面的值,而不是传入的这个参数值. 那怎么解决呢?对于上图的代码,可以通过判断是否传入了num参数,没有就用默认值:   这种做法还是很麻烦的,而ES6则直接在参数定义里面设置函数参数的默认值,而且不用担心传入参数是0或者false会出错了: 2.箭头函数 箭头函数用 =>

箭头函数无法使用this的解决方法

ES6中箭头函数  () => { }  ,看到这么简单的写法,我也是很喜欢用的.但是如果想在箭头函数里面使用this,那么就会出现获取不到当前对象,而是获取到window对象. 下面这个是ES5中原型链上添加了一个say函数,在函数内打印出this对象,运行后能够得到正确    Person {name: "小米", age: 7} <!DOCTYPE html> <html lang="en"> <head> <m

ES6中的箭头函数

箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作.但是它对this的处理与一般的普通函数不一样.箭头函数的 this 始终指向函数定义时的 this,而非执行时.我们通过一个例子来理解: var o = { x : 1, func : function() { console.log(this.x) }, test : function() { setTimeout(function() { this.func(); }, 100); } }; o.te

ES6 =&gt; 箭头函数

箭头函数ES6一个非常有用的新特性,我这里小小的总结一下用法: 箭头函数相当于直接return一个值,当没有参数时,可以这么写: var f = () => 0; // 上面这句话相当于 var f = function(){ return 0;} 当有一个参数时: var f = num => return num; // 上面这一句相当于 var f = function(num) { return num;} 当有两个或以上的参数时,要用括号并用逗号分隔开: var f = (a,b)

ES6新增—新增循环、箭头函数

5.新增循环: 以前for循环,for in循环 ES6新增循环: for of 循环:遍历(迭代,循环)整个对象,变现类似于for in 循环 两者的区别: for in循环:既可以循环数组,又可以循环json 循环数组:i代表数组的索引 var arr1=['apple','banana','appel','orange']; for(var i in arr1){ console.log(i); //0,1,2,3 } 循环json:name代表json的索引 var json=[a:'a

【转载】ES6——箭头函数

转载自:https://segmentfault.com/a/1190000004470909 侵删! 箭头函数 定义 定义一个箭头函数很简单,基本语法是: ([param] [, param]) => { statements } param => expression param 是参数,根据参数个数不同,分这几种情况:() => { ... } // 零个参数用 () 表示:x => { ... } // 一个参数可以省略 ():(x, y) => { ... } //