ES6 的 新特性 3 箭头函数

箭头函数的作用:

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

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

使用场景:

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

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

箭头函数的几种写法:

1. 无参方法

1
2
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)

 

posted @   luytest  阅读(11)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示