JS箭头函数的优势在哪里

本文我们介绍箭头(arrow)函数的优点。

更简洁的语法

我们先来按常规语法定义函数:

function funcName(params) {

return params + 2;

}

funcName(2);// 4

该函数使用箭头函数可以使用仅仅一行代码搞定!

var funcName = (params) => params + 2;

funcName(2);// 4

是不是很酷!虽然是一个极端简洁的例子,但是很好的表述了箭头函数在写代码时的优势。我们来深入了解箭头函数的语法:

(parameters) => { statements }

如果没有参数,那么可以进一步简化:

() => { statements }

如果只有一个参数,可以省略括号:

parameters => { statements }

如果返回值仅仅只有一个表达式(expression), 还可以省略大括号:

parameters => expression

// 等价于:

function (parameters){

return expression;

}

现在你已经学会了箭头函数的语法,我们来实战一下。打开Chrome浏览器开发者控制台,输入:

var double = num => num * 2

我们将变量double绑定到一个箭头函数,该函数有一个参数num, 返回 num * 2。 调用该函数:

double(2);// 4

double(3);// 6

没有局部this的绑定和一般的函数不同,箭头函数不会绑定this。 或者说箭头函数不会改变this本来的绑定。

我们用一个例子来说明:

function Counter() {

this.num = 0;

}

var a = new Counter();

因为使用了关键字new构造,Count()函数中的this绑定到一个新的对象,并且赋值给a。通过console.log打印a.num,会输出0。

console.log(a.num);// 0

如果我们想每过一秒将a.num的值加1,该如何实现呢?可以使用setInterval()函数。

function Counter() {

this.num = 0;

this.timer = setInterval(function add() {

    this.num++;

    console.log(this.num);

 }, 1000);

}

我们来看一下输出结果:

var b = new Counter();// NaN// NaN// NaN…

你会发现,每隔一秒都会有一个NaN打印出来,而不是累加的数字。到底哪里错了呢?首先使用如下语句停止setInterval函数的连续执行:

clearInterval(b.timer);

我们来尝试理解为什么出错:首先函数setInterval没有被某个声明的对象调用,也没有使用new关键字,再之没有使用bind, call和apply。setInterval只是一个普通的函数。实际上setInterval里面的this绑定到全局对象的。我们可以通过将this打印出来验证这一点:

function Counter() {

this.num = 0;

this.timer = setInterval(function add() {

    console.log(this);

}, 1000);}

var b = new Counter();

你会发现,整个window对象被打印出来。 使用如下命令停止打印:

clearInterval(b.timer);

回到之前的函数,之所以打印NaN,是因为this.num绑定到window对象的num,而window.num未定义。

那么,我们如何解决这个问题呢?使用箭头函数!使用箭头函数就不会导致this被绑定到全局对象。

function Counter() {

this.num = 0;

this.timer = setInterval(() => {

    this.num++;

    console.log(this.num);

}, 1000);}

var b = new Counter();// 1// 2// 3// …

通过Counter构造函数绑定的this将会被保留。在setInterval函数中,this依然指向我们新创建的b对象。

为了验证刚刚的说法,我们可以将 Counter函数中的this绑定到that, 然后在setInterval中判断this和that是否相同。

function Counter() {

var that = this;

this.timer = setInterval(() => {

    console.log(this === that);

}, 1000);}

var b = new Counter();// true// true// …

正如我们期望的,打印值每次都是true。最后,结束刷屏的打印:

clearInterval(b.timer);

总结

箭头函数写代码拥有更加简洁的语法;

不会绑定this。

作者:Fundebug

来源:https://blog.fundebug.com/2017/05/24/arrow-function-for-beginner/

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
箭头函数和普通函数在语法和功能上存在一些区别: 1. 语法简洁性:箭头函数的语法更为简洁,可以省略 `function` 关键字和大括号。当只有一个参数时,还可以省略括号。示例: ```javascript // 普通函数 function sum(a, b) { return a + b; } // 箭头函数 const sum = (a, b) => a + b; ``` 2. `this` 的指向:箭头函数没有自己的 `this`,它会捕获上层作用域的 `this` 值。而普通函数的 `this` 指向调用它的对象(在严格模式下为 `undefined`)。 ```javascript const obj = { name: 'John', sayHello: function() { console.log('Hello, ' + this.name); } }; obj.sayHello(); // 输出:Hello, John const arrowFunc = () => { console.log('Hello, ' + this.name); }; arrowFunc.call(obj); // 输出:Hello, John ``` 3. 不可绑定 `arguments` 对象:箭头函数没有自己的 `arguments` 对象,但可以通过剩余参数(rest parameters)来获取传入的参数。 ```javascript function sum(a, b) { console.log(arguments); return a + b; } sum(1, 2); // 输出:Arguments(2) [1, 2] const arrowFunc = (a, b) => { console.log(arguments); // 报错:ReferenceError: arguments is not defined return a + b; }; arrowFunc(1, 2); ``` 4. 适用场景:箭头函数适合于简短的回调函数或需要保留上层作用域的 `this` 值的场景。普通函数则可用于更复杂的功能和需要使用 `this`、`arguments` 等特性的场景。 总的来说,箭头函数的主要优势在于语法简洁和更可靠的 `this` 绑定。但需要注意,在某些情况下,由于箭头函数的特性,可能无法满足所有的需求,这时候仍然需要使用普通函数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值