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）的机制，也就是说变量（函数）的声明会被提升到当前作用域的最前面，即使写代码的时候是写在最后面，也还是会被提升至最前面。

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

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

 

本文章转载于IMWeb