ES6学习笔记之箭头函数

Vultr 发布于2019-08-19 18:12 / 1223人阅读

摘要：特性介绍箭头函数是新增的特性之一，它为这门语言提供了一种全新的书写函数的语法。用生成的函数会定义一个自己的，而箭头函数没有自己的，而是会和上一层的作用域共享。

本文同步自我得博客：http://www.joeray61.com

JS中的箭头

箭头在JS里并不算是个新鲜的玩意儿，一直以来，JS都支持-->这样的箭头。

很早的时候有些浏览器还不支持JS，当时的人们为了兼容这些浏览器，需要这样写JS:

这段代码在不支持JS的浏览器里会被解读成2个未知标签和一段html注释。在支持JS的浏览器里，JS引擎会把看成是单行注释的开始。需要说明的是，-->仅仅是在一行的开头才能表示这一行是注释，其余情况-->是一个操作符，表示goes to的含义。

function countdown(n) {
    while (n --> 0) {
        alert(n);
    }
}

这段代码确实能够正常运行哦。当你给countdown函数传入一个大于0的参数时，这个循环能够一直运行，直到n变为0为止。

此箭头非彼箭头，以上讲述的-->并不是我们今天要讲的主角，大家权当拓展下JS知识，下面让我们进入正题。

特性介绍

箭头函数是ES6新增的特性之一，它为JS这门语言提供了一种全新的书写函数的语法。

// ES5
var double = nums.map(function (v) {
    return 2 * n;
});

// ES6
var double = nums.map(v => 2 * n);

箭头函数简化了原先的函数语法，不需要再写function，如果函数体只有一行代码的话连return都不用写，这个特性对于热衷于简化流程和工作的程序员来说相当对胃口。

使用箭头函数有几个注意点：

函数体

箭头函数支持两种模式的函数体写法，我们姑且叫他简洁函数体和块级函数体。

// 简洁函数体
var fn = x => x * x;

// 块级函数体
var fn = (x, y) => {return x + y;};

简介函数体默认会把表达式的结果返回，块级函数体需要手动return。如果想要返回一个对象又想使用简洁函数体的话，需要这么写：

var fn = () => ({});
fn();   // {}

如果写成var fn = () => {};，那么执行fn()只能返回undefined。

this

用function生成的函数会定义一个自己的this，而箭头函数没有自己的this，而是会和上一层的作用域共享this。

function Person() {
    this.age = 0;
    var self = this;
    setTimeout(function () {
        self.age++;
        console.log(self.age);
    }, 1000);
}
var p = new Person();

这段代码里，setTimeout的参数function中需要操作外层的age属性，必须要把this赋值给self，然后通过self来获取到age

如果使用箭头函数则省事很多，代码如下：

function Person() {
    this.age = 0;
    setTimeout(() => {
        this.age++;
        console.log(this.age);
    }, 1000);
}
var p = new Person();

apply & call

由于箭头函数已经绑定了this的值，即使使用apply或者call也不能只能起到传参数的作用，并不能强行改变箭头函数里的this。

var adder = {
    x: 1,
    add1: function (y) {
        var fn = v => v + this.x;
        return fn(y);
    },
    add2: function (y) {
        var fn = v => v + this.x;
        var whatever = {
            x: 2
        };
        return fn.call(whatever, y);
    }
};

adder.add1(1);    // 2
adder.add2(1);    // 仍然是2

arguments

普通函数里arguments代表了调用时传入的参数，但是箭头函数不然，在箭头函数中无法使用arguments

当然，ES6中也有办法可以让箭头函数像普通函数一样使用类似于arguments这样的类数组对象

var fn = (...rest) => rest[0];
fn(2);    // 2

...rest也是ES6的一个新特性，之后会介绍。

不能被new

箭头函数不能与new关键字一起使用，会报错

var Fn = () => {
    this.a = 1;
};
var f = new Fn();    // Error

使用场景

在我看来，箭头函数几乎可以完全取代function，除非是函数需要进行递归或者需要可变的this对象，其他场景我认为都可以使用箭头函数。

参考资料

ES6 In Depth: Arrow functions

Arrow functions

专线服务服务器托管箭头函数学习笔记学习笔记一基础学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79314.html

ES6学习笔记

摘要：所以，如果一个数组成员不严格等于，默认值是不会生效的因为不严格等于对象解构对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。 http://es6.ruanyifeng.com/?se... 一、作用域 let //i作用域在全局，每次循环i都被重新赋值了而覆盖了之前的值 var a = []...

Gu_Yan 2019-08-20 14:34 评论0 收藏0
es6学习笔记-箭头函数_v1.0_byKL

摘要：因为箭头函数本身没有所以不可以当作构造函数，也就是说，不可以使用命令，否则会抛出一个错误。箭头函数不可以使用对象，该对象在函数体内不存在。 es6学习笔记-箭头函数_v1.0 箭头函数使用方法 var f = v => v; //普通函数配合箭头函数写法,这里并且是传参的 //相当于 var f = function(v) { return v; }; /*-----------...

lushan 2019-08-20 14:47 评论0 收藏0
ES6箭头函数学习笔记

摘要：普通函数里代表了调用时传入的参数，但是箭头函数不然，箭头函数会把当成一个普通的变量，顺着作用域链由内而外地查询。不能被箭头函数不能与关键字一起使用，会报错。语法具有一个参数的简单函数 var single = a => a single(hello, world) // hello, world 没有参数的需要用在箭头前加上小括号 var log = () => { ...

sydMobile 2019-08-21 10:51 评论0 收藏0
学习ES6笔记──工作中常用到的ES6语法

摘要：但是有了尾调用优化之后，递归函数的性能有了提升。常被用来检查对象中是否存在某个键名，集合常被用来获取已存的信息。循环解构对象本身不支持迭代，但是我们可以自己添加一个生成器，返回一个，的迭代器，然后使用循环解构和。一、let和const 在JavaScript中咱们以前主要用关键var来定义变量，ES6之后，新增了定义变量的两个关键字，分别是let和const。对于变量来说，在ES5中...

curried 2019-08-26 12:16 评论0 收藏0
【前端工程师手册】this拾遗之关于箭头函数的种种

摘要：之前总结了的一些常见绑定情况前端工程师手册之的笔记，但是还有一些没有说到，今天继续学习一下。参考资料箭头函数你不知道的上卷之前总结了this的一些常见绑定情况（【前端工程师手册】JavaScript之this的笔记），但是还有一些没有说到，今天继续学习一下。 es6箭头函数先说结论：箭头函数没有自己的this，它是根据外层(函数或者全局，后面会说到箭头函数作为某个对象的方法时的情况...

oogh 2019-08-26 11:55 评论0 收藏0