资讯专栏INFORMATION COLUMN

函数声明与函数表达式的区别

_Suqin / 924人阅读

摘要:有两种定义函数的方式函数声明与函数表达式。所以在实际开发的时候,一定要注意变量函数的声明会被提升到当前作用域的最前面

JS有两种定义函数的方式:函数声明与函数表达式。那么这两种方式有区别吗,还是一样的呢?下面我们来进一步探讨探讨。

下面我们定义了两个函数分别为 hello 和 hi,前者采用函数声明,后者采用函数表达式,然后再调用,如下:

function hello () {
    console.log("Hello the world");
}

var hi = function () {
    console.log("Hi, IMWeb");
}

hello(); // "Hello the world"
hi(); // "Hi, IMWeb"

上面的调用,我们都能得到正确的运行,并没有什么区别。但是如果我们把顺序掉下,先调用函数后定义函数,那么情况就会有点不一样了。如下:

hello(); // "Hello the world"
hi(); // Uncaught TypeError: hi is not a function

function hello () {
    console.log("Hello the world");
}

var hi = function () {
    console.log("Hi, IMWeb");
}

从上我们可以看到,hello 函数可以照常运行,但是我们的 hi 函数就会报错了。根据报错“Uncaught TypeError: hi is not a function”,我们知道 hi 不是 function 了,那又是什么呢?我们继续使用 typeof 查看下:

console.log(typeof hello); // function
console.log(typeof hi); // undefined

function hello () {
    console.log("Hello the world");
}

var hi = function () {
    console.log("Hi, IMWeb");
}
function hello () {
    console.log("Hello the world");
}
var hi;

console.log(typeof hello); // function
console.log(typeof hi); // undefined

hi = function () {
    console.log("Hi, IMWeb");
}

通过 typeof 我们可以看到 hi 现在是个 undefined 了,这是为什么呢?

这是因为 JavaScript 解释器中存在一种变量声明被提升(hoisting)的机制,也就是说变量(函数)的声明会被提升到当前作用域的最前面,即使写代码的时候是写在最后面,也还是会被提升至最前面。

这样上面的例子在执行的时候就成了这样的:

这样是不是一下就恍然大悟了。所以在实际开发的时候,一定要注意变量(函数)的声明会被提升到当前作用域的最前面

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92863.html

相关文章

  • JS基础篇--函数声明定义,作用域,函数声明达式区别

    摘要:在中,有四种方式可以让命名进入到作用域中按优先级语言定义的命名比如或者,它们在所有作用域内都有效且优先级最高,所以在任何地方你都不能把变量命名为之类的,这样是没有意义的形式参数函数定义时声明的形式参数会作为变量被至该函数的作用域内。 Scoping & Hoisting 例: var a = 1; function foo() { if (!a) { var ...

    TerryCai 评论0 收藏0
  • JavaScript—— 函数声明函数达式有什么不同吗?

    摘要:函数声明和函数表达式的区别函数声明只能出现在程序或函数体内。所以,在等语义为语句的代码块中存在函数声明,由于函数提升特性,会破坏掉原本的语义。 这篇谈一下JS函数声明与函数表达式的区别及要注意的地方: 函数声明主要有两种类型: 函数声明 function fn() {}; 函数表达式 var fn = function () {}; 这两种函数创建方式...

    FleyX 评论0 收藏0
  • 函数声明函数达式区别

    摘要:函数声明函数声明的语法说明函数声明最重要的特征就是函数声明提升,意思是在执行代码之前就会读取函数声明例子不会报错,因为函数声明在在函数之前已经读取函数表达式函数表达式的语法说明用函数表达式定义的函数在使用之前必须先赋值例子报错,函数调用之前 1.函数声明 函数声明的语法: function functionName(arg0,arg1...) { //functionBody ...

    Karrdy 评论0 收藏0
  • 函数声明函数达式区别

    摘要:,在这里的将所有的函数声明进行了提升,从而由替代了函数表达式的在顺着条件判断进行了定义,执行为的情况,进行赋值解析。 函数声明(funDeclaration) 无论在哪儿定义函数,只要是外层函数并且满足不被包裹,就都可以进行全局范围的调用 function foo() { } 在函数体内部的函数声明无法提升到全局,只能提升到函数体内顶部(块级作用域空间) function test()...

    浠ラ箍 评论0 收藏0
  • js中函数声明函数达式区别以及立即执行函数

    摘要:最近在写代码时遇到了闭包,其中闭包又和立即执行函数有点关系,于是牵扯除了函数声明以及函数表达式,我感觉中文的很多文章写的不太好,查阅了的指南和这篇关于的文章,觉得写的很好,整合一下。函数声明和函数表达式。 最近在写代码时遇到了闭包,其中闭包又和立即执行函数(immediately invoked function expression, aka IIFE)有点关系,于是牵扯除了函数声明...

    madthumb 评论0 收藏0

发表评论

0条评论

_Suqin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<