ES6 的 新特性 3 箭头函数

发布时间 2023-07-06 18:39:14作者: luytest

箭头函数的作用:

1. 比function这种写法更加简洁;

2. 可以解决thsi指向的问题,因为它不会创建自己的this,而是继承上一级作用域的this。

使用场景:

1. 当函数内部不需要用到this的时候,都可以用箭头函数代替function;

2.需要this,但是需要的是上一级作用域的this。

箭头函数的几种写法:

1. 无参方法

    const fn = ()=>{alert(1)};
    fn();

2. 有参方法,有返回值

    const fn = (a,b)=>{return a+b};
    const r = fn(1,2);
    alert(r);

如果方法体只有一行代码,可以简化

    const fn = (a,b)=>a+b;
    const r = fn(1,2);
    alert(r);

如果参数只有一个,可以简化

    const fn = a=>a+1;
    const r = fn(1);
    alert(r);

 

需要注意的点

箭头函数被定义在对象中时,对象不产生作用域,箭头函数中的this指向对象的作用域中的this。

    var age = 100;

var obj = {
    age: 20,
    say: () => {
        alert(this.age)
    }
}

obj.say();

弹出的值是 100 。

如果用function,弹出的就是20,说明此时对象中的 this 指向的是 obj 自己的 作用域。

    var obj = {
        age: 20,
        say: function () {
            alert(this.age)
        }
    }

 如果在箭头函数中想调用对象的age,就不能用this,需要指定obj.age。

alert(obj.age)