ES6学习笔记:箭头函数

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

前端的学习是永无止境的,总是不断的有新知识需要学习,为了能跟上节奏,也硬逼自己开始学习一些ES6相关的知识。今天先来学习ES6中的箭头函数。在学习箭头函数之前先简单的回顾一下JavaScript中的一些概念。

函数常见的写法及调用方法

平时在看别人写的代码,总是能看到各种不同风格的JavaScript函数写法,自己一脸蒙逼。写个函数还有这么多的姿势。对于新手更是蛋疼,那么在JavaScript中常见的一些写法有:

常规写法

这种方法也称之为函数声明。

// 函数的写法
function sum(a, b) {
    return a + b;
}

// 调用
sum(1,2); // 3

匿名函数写法

这种方法也称为函数表达式。

// 函数写法
var sum = function (a, b) {
    return a + b;
}

// 调用
sum(2, 3); // 5

函数赋值给一个变量。这是一种声明函数的方式,左边sum是一个变量,右边是一个函数的表达式。意思就是把一个匿名的函数表达式赋值给了变量sum,只是声明了一个变量指向了一个函数对象。

将方法作为一个对象

// 作为对象方法,函数写法

var foo = {
    sum: function(a, b) {
        return a + b
    },
    subtraction: function(a, b) {
        return a - b
    },
    multiplication: function (a, b) {
        return a * b
    }
}

// 调用
foo.sum(1, 4); // 5
foo.subtraction(1, 4); // -3
foo.multiplication(2, 4); // 8

构造函数中给对象添加方法

// 给对象添加方法
var calculate = function() {};
calculate.prototype.sum = function(a, b){
    return a + b
}

在JavaScript中的每个对象都有prototype属性,JavaScript中对象的prototype属性的解释是:返回对象类型原型的引用。比如上面的代码,在calculate的函数上的原始对象添加了一个sum方法,将在构造函数中用到。

// 调用
var calc = new calculate(); //创建对象
calc.sum(1, 2); // 调用对象属性,返回3

自执行函数

JavaScript中自执行函数有几种不同写法:

// 方法一:最前最后加括号
(function(){
    console.log('1'); // 1
}());

// 方法二:function前面加运算符,最常见的是!与void

!function(){
    console.log('1'); // 1
}();

这种自执行函数表达式,主要用于创建一个新的作用域,在此作用域内声明的变量不会和其它作用域内的变量冲突或混淆,大多是以匿名函数方式存在,且立即自动执行。也算是函数表达式。

虽然上面罗列了几种常见创建函数的方法。但在ECMAScript中,创建函数的最常用方法是函数表达式函数声明。初学者对这两者都是比较晕的,比如我自己,很多时候就傻傻的分不清楚什么是函数表达式,什么又是函数声明?为了整清楚,我看书和查资料得知,如果不声明函数名称,它肯定是函数表达式,可如果声明了函数名称的话,如何判断是函数声明还是函数表达式?那又晕呼了:

JavaScript通过上下文秋区分两者,如果function foo() {}是作为赋值表达式的一部分的话,那它就是一个函数表达式;如果function foo() {}被包含在一个函数体内或者位于程序的最顶部的话,那它就是一个函数声明。

// 函数声明
function foo () {} // 它是程序的一部分

(function(){
    function foo() {} // 它是函数体的一部分
})();

// 函数表达式
var bar = function foo() {} // 它是赋值表达式的一部分
new function foo() {} // 它是new表达式
(function foo(){}); // 它包含在分组操作符内

除了上面的之外,还有函数生成器和箭头函数。@Dmitri Pavlutin曾经整理过一篇博文,介绍了在JavaScript中声明函数的六种方法

函数声明的规则

函数声明只能出现在程序或函数体内。从句法上讲,它们 不能出现在Block(块)({ ... })中,例如不能出现在 ifwhilefor 语句中。因为 Block(块) 中只能包含Statement语句, 而不能包含函数声明这样的源元素。另一方面,仔细看一看规则也会发现,唯一可能让表达式出现在Block(块)中情形,就是让它作为表达式语句的一部分。但是,规范明确规定了表达式语句不能以关键字function开头。而这实际上就是说,函数表达式同样也不能出现在Statement语句或Block(块)中(因为Block(块)就是由Statement语句构成的)。

匿名函数

匿名函数是一种在运行时动态声明的函数。它们之所以被称为匿名函数是因为不同于普通函数,它们并没有函数名。 匿名函数是通过函数表达式而不是函数声明语法定义的。你可以在任何可以放置表达式的地方利用函数表达式创建一个新函数。例如你可以定义一个新函数,作为一个函数调用的参数或者作为另一个对象的属性。

从前面的函数声明方式中,或多或少可以知道:

  • 匿名函数是被函数表达式创建的:
  • 匿名函数在运行时被创建
  • 匿名函数不需要函数名

有关于JavaScript中匿名函数的相关介绍,可以阅读众成翻译中的一篇译文:《JavaScript匿名函数》。

箭头函数

通过前面的篇幅,我们对JavaScript中的函数有一些概念性的了解,也算是为接下来的内容打个前哨。我们要了解的是ES6中的箭头函数,这也是JavaScript声明函数的另一种方法。而箭头函数也是ES6中使用率最高的新特性。那什么是箭头函数?

箭头函数在有些地方也称为胖函数,使用箭头=>定义的函数,称为箭头函数,它也属于匿名函数一类。

我们首先了解箭头函数语法,然后我们会发现箭头函数主要优势是:上下文绑定

箭头函数语法

在ES5中我们是这样写函数,比如一个求和的函数:

var sum = function(a, b) {
    return a + b
}

使用箭头=>我们可以分两步实现同样的函数功能。

首先使用=>来替代关键词function

var sum = (a, b) => {
    return a + b
}

如果函数的返回值是一个表达式和函数体没有副作用的话,我们可以省略括号{}return关键词:

var sum = (a, b) => a + b

上面看到的是就是ES6中的箭头函数的使用语法。事实上,ES6的箭头函数有四种使用语法。

单一参数的单行箭头函数

const fn = foo => `${foo} World`

这个箭头函数就只有一个参数foo,并且还省略了大括号{}return关键词。我们可以这样调用:

fn('Hello'); // Hello World

其实上面的函数换成ES5来写就是这样:

var fn = function (foo) {
    return foo + ' World';
}

fn('Hello'); // Hello World

这是箭头函数最简洁的形式,常用于作用简单的处理函数,比如过滤:

// ES5
var array = ['a', 'bc', 'def', 'ghij'];
array = array.filter(function (item) {
    return item.length >= 2;
});

// ES6
let array = ['a', 'bc', 'def', 'ghij'];
array = array.filter(item => item.length >= 2); // "bc", "def", "ghij"

多参数的单行箭头函数

const fn = (foo, bar) => foo + bar
fn(2, 3); // 5

在大多数情况下,函数都不会只有一个参数传入,在箭头函数中,多参数的语法跟普通函数一样,以括号来包裹参数列。上面的函数fn

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/es6-arrow-function.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部