箭头函数心得

Posted 余烬的小舟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了箭头函数心得相关的知识,希望对你有一定的参考价值。

箭头函数

箭头函数是匿名函数,语法比函数表达式更简洁,并且没有自己的thisargumentssupernew.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

引入箭头函数有两个方面的作用:更简短的函数并且不绑定this

特性

  • 没有自己的this
  • 没有自己的argument
  • 没有prototype属性
  • 没有supernew.target
  • yield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。
  • 不能当作构造函数,不能进行new操作

语法

一般语法

(param1, param2, …, paramN) => { statements } 

当只有一个参数时,圆括号是可选的,下面两种都对。

param1 => { statements } 
(param1) => { statements } 

如果没有参数时,需要保留圆括号。

// 没有参数的函数应该写成一对圆括号。
() => { statements }

另外还有一些简写写法

(param1, param2, …, paramN) => expression
//相当于:
(param1, param2, …, paramN) =>{ return expression; }

建议无论是否只有一个参数,都保留圆括号(方便以后添加参数或删减参数)

高级语法:

//加括号的函数体返回对象字面量表达式:
params => ({foo: bar})

//支持剩余参数和默认参数
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { 
statements }

//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

箭头函数的this

<u>而箭头函数不会创建自己的this,它的this是在定义函数的时候绑定的,它只会在自己的作用域链向外逐层地查找,找到最近的普通函数的this对象(类似查找变量),然后继承这个this</u>

被继承的普通函数的this指向改变,箭头函数的this指向会跟着改变.并且在箭头函数this对象的指向是不能直接改变的。

function fn1(){ // 第一层普通函数
    console.log(this); // window
    let obj1 = { // 第二层对象
        fn2: () => { // 第三层箭头函数
            console.log(this); // window
        }
    }
    obj1.fn2();
}
fn1()

fn1是普通函数,它的this指向全局对象window,而fn2是一个箭头函数,它被嵌套在fn1的obj1对象内,它继承了fn1的this,因此箭头函数的this也指向window

当箭头函数的作用域链都没有能继承的this时,它的指向是全局对象。如下

let arrow = () => {
     console.log(this);
  }
arrow() // window对象
    let o1 = {
        o2: {
            arrow: () => {
                console.log(this);
            }
        }
    }
    o1.o2.arrow() // window对象

上面代码中箭头函数都无法在祖先作用域中找到能继承的this,因此无论是否在严格模式下都会指向window,下面把o2改成一个普通函数(拥有自己的this),此时箭头函数能找到继承的this,于是指向。

let o1 = {    o2(){        console.log(this); // o2对象        let arrow = () => {            console.log(this);        }        arrow()    }} o1.o2() // o2对象

箭头函数的arguments

箭头函数没有自己的arguments,直接使用会报错

let fn1 = (a) => {    console.log(arguments);}fn1("a")// Uncaught ReferenceError: arguments is not defined

但是和this一样,它能继承普通函数的arguments

function fn1(a,b){    console.log(arguments); // Arguments(2){...}    let arrow = () => {        console.log(arguments); // Arguments(2){...}    }    arrow()}fn1("a","b")

在大多数情况下,使用剩余参数是相较使用arguments对象的更好选择。

使用 new 操作符

箭头函数不能用作构造器,和 new一起用会抛出错误。

var Foo = () => {};var foo = new Foo(); // TypeError: Foo is not a constructor

使用prototype属性

箭头函数没有prototype属性。

var Foo = () => {};console.log(Foo.prototype); // undefined

使用 yield关键字

yield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。因此,箭头函数不能用作函数生成器。

修复缺陷

由于javascript的设计缺陷,在非严格模式下,在函数内部定义的函数 this 指向window,严格模式下,this为undefined

let oTest = {    fn(){        let fnTest = function(){            console.log(this);        }        fnTest();    }}oTest.fn(); // window对象

而箭头函数则完全修复了这个缺陷。只需要把上述代码修改成箭头函数即可。

let oTest = {    fn(){        let fnTest = function(){            console.log(this);        }        fnTest();    }}oTest.fn();

以上是关于箭头函数心得的主要内容,如果未能解决你的问题,请参考以下文章

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。

使用导航组件将返回箭头添加到片段

d3.select(this)不能用箭头函数

如何通过后退按钮(箭头)将活动导航到片段?

像导航抽屉一样切换片段(带后退箭头)