您好,登录后才能下订单哦!
本文小编为大家详细介绍“JavaScript箭头函数的使用方法有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript箭头函数的使用方法有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
前言:
箭头函数是ES6新增的定义函数的方式,我们可以使用()=>{}
来顶替以前的函数定义方式,下面从五个使用姿势与三点注意事项来刨析箭头函数。
当我们箭头函数函数只有一个参数的时候是可以将()
省略,当代码块只有一行的时候可以将{}
与return
省略
const fn = num => num.sort(); console.log(fn([2, 1, 3])); // [1,2,3]
如上代码块只有一个参数num
且只有一行代码return num.sort()
,所以将()
,{}
与return
省略
为了进一步简化还可以与解构赋值结合使用
let person = { name: "猪痞恶霸", age: 12, }; const fn = ({ name, age }) => name + "今年" + age + "岁了"; console.log(fn(person)); // 猪痞恶霸今年12岁了
使用解构赋值直接将name
与age
解构,替换了person,name
的用法,使函数更加简洁。
在函数参数定义中可以结合rest
参数搭配使用
const fn = (...arr) => arr.sort(); console.log(fn(2, 1, 4)); // [1,2,4]
使用...arr
将所有参数都包裹在内,在函数体内进行一些需要的操作。
this
指向的改变在箭头函数中使用this
,它的指向是不变的,因为箭头函数没有拥有属于自己的this
,其指向的是函数定义时所在的对象 , 所以箭头函数的出现往往就顶替了我们常用的let _that = this
又或者在函数结尾使用绑定this
指向的对象来解决在函数体内this
的问题
var name = "fzf404"; function set() { setTimeout(() => { console.log(this.name); }, 1000); } set(); // fzf404 set.call({ name: "猪痞恶霸" }); // 猪痞恶霸
如上例子,在全局中声明了一个name
变量,我们再通过call()
绑定新的对象{ name: "猪痞恶霸" }
,在set
函数执行的时候,箭头函数被定义,而被定义的时候其已经通过set.call()
更改了指向的对象,所以打印出的是新的对象中的name
属性,这就是箭头函数的this
指向特点,如果是普通函数,其指向依旧是顶层对象。
在之前ES5可以通过bind
,call
,apply
来显式绑定this
对象,而箭头函数的出现打破了这种局面,同时也配套使用::
来作为函数绑定的方式
::
的使用方法:将要绑定的对象放在::
的左边,函数放在::
的右边,执行后,函数内的this
就会指向绑定的对象
obj::fn // 等同于 fn.bind(obj)
如上,原来的显式绑定方式与使用::
的绑定方式进行一个比较,看过二者的比较就可以了解::
的使用了。
箭头函数无法作为一个构造函数,所以无法通过new
命令来构造
const fn = () => {} let _fn = new fn() // fn is not a constructor
如上,如果使用new
来构造的化就会抛出fn
不是一个构造函数
在箭头函数内是无法使用arguments
即参数对象,因为在其函数体内部不存在arguments
对象当然我们可以使用扩展运算符来代替其使用,比使用参数对象方便。
const fn = () => { console.log(arguments) } fn() // arguments is not defined
箭头函数无法使用yield命令,也就是说无法将箭头函数转变为生成器函数,具体是为什么,我的直观感受就是作为生成器必须是function*
,而箭头函数的形式无法作为一个生成器。
了解到这里,下面我们来看一道经典的面试题。
let name = "猪痞恶霸"; let person = { name:"fzf404", fn: () => { setTimeout(() => { console.log(this.name); }) } } person.fn();
上面是一道考察箭头函数,this指向,作用域的面试题,它的打印结果为undefined
,我们来一点一点分析
使用let
在下声明了一个name
再声明一个对象,内含一个name
属性和一个方法,该方法使用定时器并打印this.name
调用对象的这个方法,this
开始寻找
定时器中的箭头函数没有this
,向上寻找,到达person
,由于person
是一个对象,所以它的{}
包裹的不是作用域
继续向上寻找,到达了顶层对象window
查看window
内是否含有name
属性,由于使用let
声明,所以其属性不在window
中,打印出undefined
读到这里,这篇“JavaScript箭头函数的使用方法有哪些”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。