箭头函数的定义
ES6 新增了箭头函数 (Arrow function) 的概念,相对于传统的函数声明,箭头函数更加简洁易懂。箭头函数是一种匿名函数,可以使用匿名函数的多种语法。
箭头函数的格式如下:
-------- -- ------------
其中,params 表示函数的参数,可以是多个参数,也可以是一个,如果没有参数,需要写一个空括号 () ;statements 表示函数体,可以是多个语句。
普通函数和箭头函数的区别
在使用箭头函数时,需要注意其与普通函数的区别。
this
的指向不同
箭头函数的 this
指向是静态的,指向函数定义时所处的对象。而普通函数的 this
指向是动态的,指向调用时所处的对象。具体来说,箭头函数的 this
就是在函数定义时所处的上下文所绑定的对象。
--- --- - - ----- ------ ------ -------- -- - ---------------- --- --------------- -- ----------- -- -- - ---------------- --- --------------- - -- ------------ -- --- --- --- ----------------- -- --- --- ---------
在这个例子中,普通函数 sayHi
的 this
指向的是定义时的对象 obj
,而箭头函数 sayHiArrow
的 this
指向的是上一级父级作用域的 this
,即全局对象 window
,所以输出的是 undefined
。
- 箭头函数没有
arguments
对象
箭头函数没有 arguments
对象,因此无法直接访问传入的参数。需要使用 rest parameters(“...”)解决这个问题。
-------- ------ - ----------------------- - ------- -- --- -- -- --- -- -- --- --------- - --------- -- - ------------------ - ------------ -- --- -- -- --- -- --
- 箭头函数不能作为构造函数
由于箭头函数没有自己的 this
,因此不能用 new
来调用。如果用 new
调用箭头函数,会报错。
--- ------ - ------ ---- -- - --------- - ----- -------- - ---- - --- - - --- ------------- ---- -- -------- ---------- ------ -- --- - -----------
- 箭头函数没有原型
针对箭头函数不能作为构造函数这一点,我们也可以很容易地理解箭头函数没有原型这一特点。
--- ---- - -- -- --- ---------------------------- -- ---------
箭头函数的应用场景
由于箭头函数的特点,其适用于一些特定的场景中。以下是一些常见的箭头函数的应用场景:
- 适用于回调函数的场景
箭头函数可以在一定程度上消除函数声明带来的冗余,适用于只需要短小的回调函数的场景。
--- --- - --- -- -- -- --- --- --- - ------------ -- ---- - --- ----------------- -- -- --- -- -- -- ---
- 适用于简化对象方法的定义
箭头函数可以更加简单地定义对象方法。
--- --- - - ----- ------ ------ -- -- - ---------------- --- --------------- - -- ------------ -- --- --- ---------
- 适用于使用
bind
固定this
的场景
由于箭头函数本身没有 this
,因此在需要固定函数内部的 this
时,可以使用箭头函数与 bind
方法结合使用来实现。
--- --- - - ----- ------ ------ -------- -- - ---------------- --- --------------- - -- --- ---------- - -- -- - ---------------------- -- ------------- -- --- --- ---
总结
以上就是 ES6 中箭头函数和普通函数的区别及应用场景的详细介绍。需要注意的是,虽然箭头函数可以在很多场景下取代传统的函数声明,但是由于它的特殊性,我们需要谨慎使用,并在不同场景中合理地选择合适的函数类型。
示例代码
-- ------------ --- --- - - ----- ------ ------ -------- -- - ---------------- --- --------------- -- ----------- -- -- - ---------------- --- --------------- - -- ------------ -- --- --- --- ----------------- -- --- --- --------- -------- ------ - ----------------------- - ------- -- --- -- -- --- -- -- --- --------- - --------- -- - ------------------ - ------------ -- --- -- -- --- -- -- --- ------ - ------ ---- -- - --------- - ----- -------- - ---- - --- - - --- ------------- ---- -- -------- ---------- ------ -- --- - ----------- --- ---- - -- -- --- ---------------------------- -- --------- -- --------- --- --- - --- -- -- -- --- --- --- - ------------ -- ---- - --- ----------------- -- -- --- -- -- -- --- --- --- - - ----- ------ ------ -- -- - ---------------- --- --------------- - -- ------------ -- --- --- --------- --- --- - - ----- ------ ------ -------- -- - ---------------- --- --------------- - -- --- ---------- - -- -- - ---------------------- -- ------------- -- --- --- ---
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/649d1a9c48841e98949d2079