JavaScript 箭头函数的特点、与普通函数的区别
1. 箭头函数的使用
es6 中新增了使用箭头=>
来定义函数表达式的方法。很多情况下,箭头函数和函数表达式创建的函数并无区别,只有写法上的不同。
本文第二块内容将介绍箭头函数和普通函数功能上的区别。
1. 普通函数到箭头函数
如下所示,定义一个函数,可以使用function
关键字,函数接收两个参数a
和b
,返回a
和b
的和。
function getsum(a, b) { return a + b; }
若使用箭头函数来定义这个函数,可以写成如下形式,省略function
关键字,用箭头=>
定义一个函数。
const getsum = (a, b) => { return a + b; };
2. 省略大括号和 return
若定义的箭头函数,函数体内只有return
语句,则可以省略大括号{}
和return
。
如下所示,定义的箭头函数,完整写法。
const getsum = (a, b) => { return a + b; };
此箭头函数的函数体内只有return
语句,那么,省略了大括号{}
和return
后的精简写法如下:
const getsum = (a, b) => a + b;
3. 省略小括号
若定义的箭头函数,参数只有一个,则可以省略小括号。
如下所示,定义的箭头函数,只有一个参数,完整写法。
const func = (a) => { return a + 2; };
省略了参数旁边的小括号,以下代码等价于上面的代码。
const func = a => a + 2;
注意:若函数没有参数,或者多个参数的情况下,必须要使用括号。
2. 箭头函数与普通函数的区别
大多数情况下,能使用普通函数的地方都可以用箭头函数代替,因为箭头函数更精简。
但在部分情况下,箭头函数与普通函数有着很大的却别。
1. 箭头函数的 this 是父级作用域的 this
如下代码,定义了一个对象obj
,对象中有个普通函数定义的方法getthis
,打印出此处的this
。调用obj.getthis()
,会打印出obj
对象。这说明方法内部的this
指向对象obj
。
const obj = { name: 'jack', getthis() { console.log(this); }, }; obj.getthis(); // {name: 'jack', getthis: ƒ}
同样定义一个对象obj
,但里面的方法用箭头函数定义,浏览器中调用obj.getthis()
却打印出window
,这说明即使调用obj
对象身上的方法,方法内部的this
也不会指向obj
,而是指向定义obj
的上下文的this
。
const obj = { name: 'jack', getthis: () => { console.log(this); }, }; obj.getthis(); // window
2. call、apply、bind无法改变箭头函数的 this
如下代码,普通函数getname
打印this.name
,通过call
将函数中的this
绑定到obj
身上,调用getname
打印出obj
身上的属性name
。
const obj = { name: 'jack', }; function getname() { console.log(this.name); } getname.call(obj); // jack
若将函数改成箭头函数,那么call
将不起作用,无法将函数内部的this
绑定到obj
,打印出undefined
。
const obj = { name: 'jack', }; const getname = () => { console.log(this.name); }; getname.call(obj); // undefined
3. 不可以作为构造函数
箭头函数不可以作为构造函数使用,若将箭头函数作为构造函数,将报错,如下代码所示。
const person = () => { this.name = 'jack'; }; const usr = new person(); // person is not a constructor
4. 不可以使用 arguments
在普通函数内部,可以使用arguments
来获取传入的参数,是一个类数组对象:
function func() { console.log(arguments); } func(1, 2, 3); // [arguments] { '0': 1, '1': 2, '2': 3 }
而箭头函数就不可以使用arguments
对象,获取不到输入的参数。
在浏览器中,若在箭头函数使用arguments
对象,将报错。
const func = () => { // 浏览器环境 console.log(arguments); // arguments is not defined }; func(1, 2, 3);
但是箭头函数可以在参数内,以...args
的方式,获取到输入的参数,得到的args
是一个数组。
const func = (...args) => { console.log(args); // [ 1, 2, 3 ] }; func(1, 2, 3);
5. 箭头函数不支持 new.target
普通函数定义的构造函数内部,支持使用new.target
,返回构造实例的构造函数。
function person() { this.name = 'jack'; console.log(new.target); } // 指向构造函数 new person(); // [function: person]
而在箭头函数中,不支持使用new.target
。在浏览器环境中,箭头函数使用new.target
将报错:new.target expression is not allowed here
。
const person=() =>{ this.name = 'jack'; console.log(new.target); } // 浏览器环境 new person(); // new.target expression is not allowed here
本文参考:
《javascript高级程序设计(第4版)》
到此这篇关于javascript 箭头函数的特点、与普通函数的区别的文章就介绍到这了,更多相关js箭头函数普通函数内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
上一篇: Python Pandas数据分析之iloc和loc的用法详解
下一篇: vue 页面跳转的实现方式
推荐阅读
-
javascript回调函数的概念理解与用法分析
-
谈谈sqlserver自定义函数与存储过程的区别
-
C语言中值得深入知识点----数组做函数参数、数组名a与&a区别、数组名a的"数据类型"
-
javascript构造函数和原型(js构造函数和普通函数的区别)
-
JQuery中window.onload函数与$(document).ready()的区别实例讲解
-
javascript构造函数和原型(js构造函数和普通函数的区别)
-
Javascript 普通函数和构造函数的区别
-
JavaScript学习和使用之函数声明和函数表达式的区别
-
javascript函数命名的三种方式及区别介绍
-
jquery中map函数与each函数的区别实例教程介绍