美文网首页web 杂谈Web前端之路让前端飞
你不知的 JS 知识普及——“声明式函数”和“表达式函数”的区别

你不知的 JS 知识普及——“声明式函数”和“表达式函数”的区别

作者: 高少辉_骚辉 | 来源:发表于2017-06-09 23:53 被阅读46次

声明式函数

定义函数的时候,关键字 function 为本语句的第一个关键字时候就是声明式函数。意思就是上一个“;”之后(虽然写 js 的时候可以省略,但是编译时会为你加入)

// 定义一个声明式函数 fn
function fn(){
  console.log('fn')
}
fn() // => 'fn'

这里有两个问题需要注意

  • 声明式函数不可以匿名,否则会报一个语法错误
  • 声明式函数声明成功后,在当前作用于可以访问到

表达式函数

定义函数的时候,只要关键字 function 不为语句的第一个关键字则为表达式函数,也就是存在于表达式中间的函数。

// 举例
(functino fn1(){}) // 在表达式 () 括号内声明了一个表达式函数
!function fn2(){} // 在 ! 非表达式之后声明了一个表达式函数
+function fn3(){}
-function fn4(){}
false? function fn6(){} : '';
var a = function fn5(){} // 正在等号右边声明了一个表达式函数
...
  • 表达式函数可以声明匿名函数
  • 表达式函数,可以立即执行
  • 表达式函数,如果有名字只能在函数作用域中访问到,当前作用域访问不到

匿名函数,就不用多介绍了,学前端的基本都用过,比如:

var fn = function (){} //这里定义了一个匿名函数(表达式函数)

立即执行函数,前端的小伙伴也应该知道,就是直接自己加括号调用

!function (){
  console.log('我自己立即执行')
}() // => '我自己立即执行'

如果有名字只能在函数作用域中访问到,当前作用域访问不到?这句话怎么理解呢?直接看例子吧

// 先定义一个表达式函数 fn1,之后在当前作用域查是否有此函数(打印)

(function fn1() {})

console.log( fn1 ) // => 报错,抛出了 ReferenceError 错误,作用域无此变量

// 先定义一个表达式函数 fn2,并且立即执行,然后在函数内部查是否有此函数(打印)
(function fn2() {
  console.log( fn2 )
})() // => 'function fn2() { console.log( fn2 ) }'

好了结束!希望对大家有帮助,如果觉得还不错给个喜欢

相关文章

  • 函数与作用域

    1.函数声明和函数表达式有什么区别?Javascript 中函数声明和函数表达式是存在区别的,函数声明在JS解析时...

  • 你不知的 JS 知识普及——“声明式函数”和“表达式函数”的区别

    声明式函数 定义函数的时候,关键字 function 为本语句的第一个关键字时候就是声明式函数。意思就是上一个“;...

  • 函数

    函数声明和函数表达式有什么区别 函数声明 函数表达式 函数声明和函数表达式的区别: 函数声明必须给定函数名称,函数...

  • 函数

    一、问答 函数声明和函数表达式有什么区别? Js中的函数声明是指下面的形式: 函数表达式则是类似表达式那样来声明一...

  • web前端-js小记(3)-函数及作用域

    1. 函数声明和函数表达式有什么区别 函数声明 函数表达式 区别:函数声明不用把声明放到函数调用的前面,函数表达式...

  • 函数与作用域

    1. 函数声明和函数表达式有什么区别 函数声明和函数表达式都是声明函数的方式 区别1 写法:函数声明 : fu...

  • 函数

    一、函数声明和函数表达式有什么区别 函数声明: 函数表达式: 区别:在于函数声明前置的不同,函数声明是整个函数前置...

  • JS函数与作用域

    函数声明和函数表达式有什么区别 使用函数声明时,在执行js语句的时候,会先把函数提升到js语句的顶部,所以即使函数...

  • 函数声明以及词法作用域

    函数声明和函数表达式有什么区别 函数在JS中有三种方式来定义: 函数声明(function declaration...

  • js函数

    一、函数声明和函数表达式有什么区别? 函数声明和函数表达式的区别:函数声明可以提升到其他代码之前(即函数声明前置)...

网友评论

    本文标题:你不知的 JS 知识普及——“声明式函数”和“表达式函数”的区别

    本文链接:https://www.haomeiwen.com/subject/qvcqqxtx.html