当前位置: 首页 > Web前端 > HTML

JavaScriptFunctions详解(包括ES6箭头函数)

时间:2023-04-03 00:50:46 HTML

介绍JavaScript中的一切都发生在函数中。函数是可以定义一次并随时运行的代码块。函数可以选择性地接受参数并返回一个值。JavaScript中的函数是对象,一种特殊的对象:函数对象。此外,函数被称为一等函数,因为它们可以被赋值,它们可以作为参数传递并用作返回值。语法让我们从“旧的”、ES6/ES2015之前的语法开始。这是一个函数声明:functiondosomething(foo){//dosomething}(现在,在ES6/ES2015世界中,称为常规函数)函数可以赋值给变量(这称为函数表达式):constdosomething=function(foo){//dosomething}命名函数表达式类似,但更好地用于堆栈调用跟踪,这在发生错误时很有用-它包含函数的名称:constdosomething=functiondosomething(foo){//dosomething}ES6/ES2015引入了箭头函数,特别适合在使用内联函数时用作参数或回调函数:constdosomething=foo=>{//dosomething}箭头函数与上面的其他函数定义非常相似.很大的区别,我们稍后会解释。参数一个函数可以有一个或多个参数。constdosomething=()=>{//dosomething}constdosomethingElse=foo=>{//dosomething}constdosomethingElseAgain=(foo,bar)=>{//dosomething}从ES6/ES2015开始,函数可以有Default参数值:constdosomething=(foo=1,bar='hey')=>{//dosomething}这允许您在不填充所有参数的情况下调用函数:dosomething(3)dosomething()在ES2018中引入尾随逗号for参数,此功能有助于减少移动参数时因缺少逗号而导致的错误(例如,将最后一个移动到中间):constdosomething=(foo=1,bar='hey')=>{//dosomething}dosomething(2,'ho!')您可以将所有参数包装在一个数组中,并在调用函数时使用扩展运算符:constdosomething=(foo=1,bar='hey')=>{//dosomething}constargs=[2,'ho!']dosomething(...args)当使用很多参数时,很难记住这些参数。对象可以在这里使用,解构保留参数名称:constdosomething=({foo=1,bar='hey'})=>{//dosomethingconsole.log(foo)//2console.log(bar)//'ho!'}constargs={foo:2,bar:'ho!'}dosomething(args)返回值每个函数返回一个值,默认情况下是“未定义的”。任何函数在其代码行末尾或执行流找到return关键字时终止。当JavaScript遇到此关键字时,它会退出函数执行并将控制权返回给其调用者。如果传递了一个值,该值将作为函数的结果返回:constdosomething=()=>{return'test'}constresult=dosomething()//result==='test'你只能返回一个值。要_模拟_返回多个值,可以返回对象字面量或数组,并在调用时使用解构赋值函数。使用数组:使用对象:嵌套函数可以在其他函数内部定义函数:constdosomething=()=>{constdosomethingelse=()=>{}dosomethingelse()return'test'}嵌套函数的作用域在Function之外,不能从外面被调用。对象方法函数在用作对象属性时被称为方法:constcar={brand:'Ford',model:'Fiesta',start:function(){console.log(Started)}}car.start()arrowthisin当箭头函数和常规函数用作对象方法时,函数具有重要的行为。考虑这个例子:constcar={brand:'Ford',model:'Fiesta',start:function(){console.log(Started${this.brand}${this.model})},stop:()=>{console.log(Stopped${this.brand}${this.model})}}stop()方法没有像您预期的那样工作。这是因为这两个函数声明样式中对this的处理不同。箭头函数中的this指的是封闭的函数上下文,在本例中是window对象this,使用function()来指代宿主对象这意味着箭头函数不适合与对象方法和构造函数一起使用(箭头函数构造函数将实际上在调用时会引发TypeError)。IIFE,ImmediatelyInvokedFunction表达式IIFE是一个函数,它在声明后立即执行:;(functiondosomething(){console.log('executed')})()您可以将结果赋给一个变量:constsomething=(functiondosomething(){return'something'})()它们非常方便,因为你不需要在定义后单独调用函数。在执行代码之前挂载JavaScript的函数会根据一定的规则重新排序。会将函数移动到其范围的顶部。这就是下面例子不报错的原因;dosomething()functiondosomething(){console.log('didsomething')}在内部,JavaScript在调用函数之前移动函数,以及在同一范围内找到的所有其他函数:functiondosomething(){console.log('didsomething')}dosomething()现在,如果您使用命名函数表达式,因为您使用的是变量,就会发生不同的事情。变量声明被提升,但不是值,因此不是函数。dosomething()constdosomething=functiondosomething(){console.log('didsomething')}不会工作:这是因为内部发生的事情是:constdosomethingdosomething()dosomething=functiondosomething(){console.log('didsomething')}"let"声明也是如此。var声明也不起作用,但它不是同一个错误:这是因为var声明被提升并使用undefined作为值初始化,而const和let被提升但未初始化。