JavaScript 箭头函数介绍（js箭头函数作用域）

myzbx 2025-07-23 16:44 17 浏览

概念

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。为什么叫Arrow Function？

因为它的定义用的就是一个箭头：

x => x * x

示例相当于如下代码：

function (x) {
    return x * x;
}

JavaScript箭头函数是ECMAScript 6中引入的编写函数表达式的一种简便方法。

箭头函数的语法如下：

(parameters) => { statements }

如果没有参数，则表示一个箭头函数，如下所示：

() => { statements }

当您只有一个参数时，左括号是可选的：

parameters => { statements }

如果包含只返回返回表达式，请删除方括号：

parameters => expression

带来的好处

简洁的语法

让我们看一下常规函数：

function funcName(params) { 
  return params + 2; 
}
funcName(2); // 4

然后通过箭头函数精简之后为：

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

可以看到通过箭头函数实现之后，语法更加精简。

不绑定this

与常规函数不同，箭头函数不绑定this。相反，它是在词汇上绑定的(即this保持其原始上下文的含义)。

由于JavaScript函数对this绑定的错误处理，下面的例子无法得到预期结果：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return 2020 - this.birth; // this指向window或undefined
        };
        return fn();
    }
};

但是，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => 2020 - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 30

使用箭头函数的限制条件

应用箭头函数时要注意的一些限制条件：

箭头函数没有参数对象。

箭头函数不能与新运算符一起使用，因此它不能用作构造函数。

箭头函数没有原型属性。

如果你尝试使用箭头函数作为构造函数，那么你会得到异常。请看下面的代码：

var foo = (name, age) => { name = name, age = age };
var f1 = new foo("cat", 6);

代码试图通过使用箭头函数foo作为构造函数来创建对象f1，JavaScript将抛出以下异常：

而且，当你试图输出箭头函数的原型值时，你会得到undefined的输出：

var foo = (name, age) => { name = name, age = age };
console.log(foo.prototype);

发生这种情况的原因是因为箭头函数没有原型属性。请记住：虽然箭头函数为你提供了编写函数表达式的简短方法，但它没有自己的this值，也不能用作构造函数。

JS 箭头函数

上一篇：java基础都在这了，小主们拿去吧（java基础总结大全）
下一篇：碎片时间学编程「41]:JavaScript中的箭头函数介绍

JavaScript 箭头函数介绍（js箭头函数作用域）

概念

带来的好处

使用箭头函数的限制条件

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

20个免费音乐音效下载网站，无版权素材商业影片也可用