ES6+ 箭头函数定义

发布时间：2023-03-24 08:44:31 所属栏目：教程来源：

导读：在编程中使用最多的就是函数，在 ES5 中是用 function 关键字来定义函数的，由于历史原因 function 定义的函数存在一些问题，如 this 的指向、函数参数 arguments 等。

ES6 规定了可以使用 “箭头” =>

在编程中使用最多的就是函数，在 ES5 中是用 function 关键字来定义函数的，由于历史原因 function 定义的函数存在一些问题，如 this 的指向、函数参数 arguments 等。

ES6 规定了可以使用 “箭头” => 来定义一个函数，语法更加简洁。它没有自己的 this、arguments、super 或 new.target，箭头函数表达式更适用于那些本来需要匿名函数的地方，但它不能用作构造函数。

在 JavaScript 中，要说让人最头疼的知识点中，this 绑定绝对算一个，这是因为 this 的绑定 ‘难以捉摸’，出错的时候还往往不知道为什么，相当反逻辑。下面我们来看一个示例：

var title = "全局标题";
var imooc = {
   title: "网 ES6 Wiki",
   getTitle : function(){
       console.log(this.title);
   }
};
imooc.getTitle();       // 网 ES6 Wiki
var bar = imooc.getTitle;
bar();       // 全局标题
通过上面的小例子的打印结果可以看出 this 的问题，说明 this 的指向是不固定的。

这里简单说明一下 this 的指向，this 指向的是调用它的对象。例子中的 this 是在 getTitle 的函数中的，执行 imooc.getTitle() 这个方法时，调用它的对象是 imooc，所以 this 的指向是 imooc。

之后把 imooc.getTitle 方法赋给 bar，这里要注意的是，只是把地址赋值给了 bar ，并没有调用。而 bar 是全局对象 window 下的方法，所以在执行 bar 方法时，调用它的是 Window 对象，所以这里打印的结果是 window 下的 title——“全局标题”。

TIPS: 上面的示例只是简单的 this 指向问题，还有很多更加复杂的，在面试中经常会被问到，所以还不清楚的同学可以去研究一下 this 的问题。

ES6 为了规避这样的问题，提出了箭头函数的解决方案，在箭头函数中没有自己的 this 指向，所有的 this 指向都指向它的上一层 this ，这样规定就比较容易理解了。下面看使用箭头函数下的 this 指向：

var title = "全局标题";
var imooc = {
   title: "网 ES6 Wiki",
   getTitle : () => {
       console.log(this.title);
   }
};
imooc.getTitle();       // 全局标题
var bar = imooc.getTitle;
bar();       // 全局标题
上面的打印结果可以看出来，所有的 this 指向都指向了 window 对象下的 title，本身的 imooc 对象下没有了 this ，它的上一层就是 window。

箭头函数的使用很简单，使用 => 来定义函数，下面对比 ES5 和 ES6 定义函数的对比。

// ES5
var sum = function () {
// todo
};
// ES6
var sum = () => {
// todo
}

当函数体内有返回值时，ES6 的箭头函数可以省略大括号：

var sum = (num1, num2) => num1 + num2;
当传递的参数只有一个时，圆括号也可以省略：

var sum = num => num + ;
下面看个使用 map 求和的例子：

// ES5
[,,].map(function (x) {
return x * x;
});
// 等同于ES6
[,,].map(x => x * x);
对比 ES5 可以看出箭头函数的简洁表达，更加准确明了。

如果函数体返回对象字面量表达式，可以省略大括号，使用圆括号的形式包裹对象。

var getimooc = () => ({a: , b: });
getimooc() // {a: 1, b: 2}
3.4 默认参数
在定义函数时，往往需要给参数添加默认值，ES6 中可以直接在圆括号中进行赋值。

var sum = (num1, num2 = ) => num1 + num2;
console.log(sum()) // 3
在使用 function 关键字定义函数时，如果要给传递的参数设置默认参数，只能在函数体内进行赋值操作，ES6 简化了默认参数的赋值过程。

函数在接收不定参数时，可以使用剩余运算符把调用函数时传入的参数聚拢起来成为一个参数数组（类似 function 中的 arguments 对象，但 arguments 不是数组，不能直接使用）。

下面是剩余参数的例子：

var fun = (param1, param2, ...rest) => {
console.log(param1)
console.log(param2)
console.log(rest)
};
fun(, , , , );
// 1
// 2
// [3, 4, 5]

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!