JavaScript中的函数申明、函数表达式、箭头函数

JavaScript中的函数可以通过几种方式创建，如下。

// 函数声明
function getName() {
　　return 'Michael'
}
// 函数表达式
const getName = function() {
　　return 'Michael'
}
// 箭头函数（同样也是表达式）
const getName = () => {
　　return 'Michael'
}

函数声明和表达式之间的差别是

JavaScript 解释器中存在一种变量声明被提升的机制，也就是说函数声明会被提升到作用域的最前面，即使写代码的时候是写在最后面，也还是会被提升至最前面。而用函数表达式创建的函数是在运行时进行赋值，且要等到表达式赋值完成后才能调用

看一个例子

getName()//oaoafly
var getName = function() {
　　console.log('wscat')
}
getName()//wscat
function getName() {
　　console.log('oaoafly')
}
getName()//wscat

上面的问题可以分解成两个简单的问题，有助于你更清楚的看出函数声明和表达式之间的区别

var getName;
console.log(getName)//undefined
getName()//Uncaught TypeError: getName is not a function
var getName = function() {
　　console.log('wscat')
}

var getName;
console.log(getName)//function getName() {console.log('oaoafly')}
getName()//oaoafly
function getName() {
　　console.log('oaoafly')
}

这个区别看似微不足道，但在某些情况下确实是一个难以察觉并且“致命“的陷阱。出现这个陷阱的本质原因体现在这两种类型在函数提升和运行时机（解析时/运行时）上的差异。

箭头函数

箭头函数是语法和函数表达式比起来稍有不同的函数表达式。在上面的示例中，你可以看到箭头函数看起来像函数表达式，但没有单词function，然后在括号和大括号之间带有粗箭头=>。

你可能听说过，在JavaScript中，函数会创建自己的作用域。这意味着JavaScript函数会创建自己的上下文this，如果我们需要一个函数但是这个函数却没有自己的上下this，那么就可能会遇到问题。箭头函数的特征之一是它们不创建上下文，因此箭头函数的内部this与外部的this相同。

箭头函数也可以很小巧。查看下面两个完全相同的示例：

const getName = () => {
　　return 'Michael'
}
// 和上面的相同，但是更小巧
const getName = () => 'Michael'

当箭头函数忽略其大括号时，表示我们希望粗箭头右侧的内容为返回值（不用加return）。这称为隐式返回值。关于箭头函数，还有一些更细微的细节需要了解，例如如何返回对象以及如何省略单个参数的括号。

// 箭头函数直接返回对象
const getStudent = () => ({ name: 'Michael', age: 18, });

// 省略单个参数的括号
const addOne = (n) => n+1;
const addOne = n => n+1;

总结

以上所述是小编给大家介绍的JavaScript中的函数申明、函数表达式、箭头函数，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • js 在定义的时候立即执行的函数表达式(function)写法

    1.前言 函数需要先定义,后使用. 这基本上所有编程语言的一条铁的定律. 一般状况下, 我们需要调用一个JavaScript 函数, 基本的状况都是先定义, 然后再调用. 看一个例子 复制代码 代码如下: <!--by oscar999 2013-1-16--> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt

  • JavaScript 申明函数的三种方法 每个函数就是一个对象（一）

    一.申明函数的三种方法 (Declaring a Function) 方法一:function functionName([parameters]){functionBody}; Example D1 复制代码 代码如下: function add(a, b) { return a+b; } alert(add(1,2)); // produces 3 当我们这样申明函数时,函数的内容被解释(但没有执行,要我们调用该函数才会执行),同时,一个名为add的对象已经建立. 方法二:将一个未命名的函数

  • JavaScript中的普通函数和箭头函数的区别和用法详解

    最近被问到了一个问题: javaScript 中的箭头函数 ( => ) 和普通函数 ( function ) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答-- 箭头函数中的 this 和调用时的上下文无关,而是取决于定义时的上下文 这并不是很正确的答案--虽然也不是完全错误 箭头函数中的 this 首先说我的回答中没有错误的部分:箭头函数中的 this 确实和调用时的上下文无关 function make () { return ()=>{ consol

  • 详解JavaScript什么情况下不建议使用箭头函数

    详解JavaScript什么情况下不建议使用箭头函数

    目录 this指向原理 问题的由来 内存的数据结构 函数 环境变量 箭头函数的缺点 不适用的场景 总结 箭头函数作为ES6新增的语法,在使用时不仅能使得代码更加简洁,而且在某些场景避免this指向问题.但是箭头函数不是万能的,也有自己的缺点以及不适用的场景,虽然可以解决this只想问题,但是也可能会带来this指向问题.具体场景具体分析,本文就深入探讨箭头函数. 箭头函数没有自己的this,其this取决于上下文中定义的this. this指向原理 问题的由来 学懂 JavaScript 语言,

  • 详解Javascript 中的 class、构造函数、工厂函数

    到了ES6时代,我们创建对象的手段又增加了,在不同的场景下我们可以选择不同的方法来建立.现在就主要有三种方法来构建对象,class关键字,构造函数,工厂函数.他们都是创建对象的手段,但是却又有不同的地方,平时开发时,也需要针对这不同来选择. 首先我们来看一下,这三种方法是怎样的 // class 关键字,ES6新特性 class ClassCar { drive () { console.log('Vroom!'); } } const car1 = new ClassCar(); consol

  • 深入浅出ES6新特性之函数默认参数和箭头函数

    深入浅出ES6新特性之函数默认参数和箭头函数

    1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者false时,会直接取到后面的值,而不是传入的这个参数值. 那怎么解决呢?对于上图的代码,可以通过判断是否传入了num参数,没有就用默认值: 这种做法还是很麻烦的,而ES6则直接在参数定义里面设置函数参数的默认值,而且不用担心传入参数是0或者false会出错了: 2.箭头函数 箭头函数用 => 符号来定义. 箭头函数相当于匿名函数,所以采用函数表达式的写法

  • JavaScript中Hoisting详解 (变量提升与函数声明提升)

    JavaScript中Hoisting详解 (变量提升与函数声明提升)

    本文主要给大家介绍了关于JavaScript中Hoisting(变量提升与函数声明提升)的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 如何将 函数声明 / 变量 "移动" 到作用域的顶部. 术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析.其实 Hoisting(提升) 这个词是用来解释 变量 和 函数声明 是如何被提升到 函数或全局 作用域顶部的.你在任何的 JavaScript 文档中找不到这个术语,我们说的

  • javascript 用函数语句和表达式定义函数的区别详解

    使用javascript多年,写过无数函数,今天却才真正弄明白两种函数定义的区别,真是悲剧,写下这个随笔, 以时刻提醒自己要打好基础 , 一大把年纪了, 不能继续懵懵懂懂了. 通常我们会看到以下两种定义函数的方式: 复制代码 代码如下: // 函数语句function fn(str){  console.log(str);}; // 表达式定义var fnx=function(str){  console.log(str+ ' from fnx');}; 以前都是凭借自己手指的感觉随心所欲使用两

  • JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题

    复制代码 代码如下: <script type="text/javascript"> function createArray() { var arr = new Array(); for (var i = 0; i < 10; i++) { arr[i] = function () { return i; } } return arr; } var funcs = createArray(); for (var i = 0; i < funcs.length;

  • 浅析JavaScript中两种类型的全局对象/函数

    浅析JavaScript中两种类型的全局对象/函数

    这里所说的JavaScript指浏览器环境中的包括宿主环境在内的.第一种是ECMAScript Global Object,第二种是宿主环境(Host)下的全局对象/函数. 一.核心JavaScript内置对象,即ECMAScript实现提供的不依赖于宿主环境的对象 这些对象在程序执行之前就已经(实例化)存在了.ECMAScript称为The Global Object,分为以下几种 1, 值属性的全局对象(Value Properties of the Global Object).有NaN,

  • 详解JavaScript中的箭头函数的使用

    详解JavaScript中的箭头函数的使用

    目录 前言 箭头函数语法 无圆括号语法 隐式返回 注意隐式返回错误 无法命名箭头函数 如何处理this关键字 匿名箭头函数 不正常工作的情况 箭头函数作为对象方法 箭头函数与第三方库 箭头函数没有arguments对象 总结 前言 本文可以让你了解所有有关JavaScript箭头函数的信息.我们将告诉你如何使用ES6的箭头语法,以及在代码中使用箭头函数时需要注意的一些常见错误.你会看到很多例子来说明它们是如何工作的. JavaScript的箭头函数随着ECMAScript 2015的发布而到来,

  • 浅析JavaScript 箭头函数 generator Date JSON

    ES6 标准新增了一种新的函数: Arrow Function(箭头函数). x => x *x 上面的箭头相当于: function (x){ return x*x; } 箭头函数相当于匿名函数,并且简化了函数定义.一种像上面的,只包含一个表达式, 连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return: x =>{ if(x > 0){ return x * x; }else{ return -x *x; } } 如果参数不是

随机推荐