每日挑战，从Javascript面试题目了解一些你可能忽略的概念 - Day6

tags: ItIron2021 Javascript

前言

这两天我们透过几个问题复习了提升(hoist)的概念，今天让我们再看一题同样常见的提升相关问题吧! 若觉得你已经彻底掌握提升了，那你可以选择跳过此文，放自己一天假，把时间拿去...hmmm...看尚气?不得不说意外得好看:D

本日题目与解释

我们知道JS中有两种宣告函数的方法，请问以下两种方法有差别吗?

var foo = function() {
  // some code
}

function bar() {
  // some code
}

老样子，再来张新的防雷图吧!

上述两种宣告方式，前者称作function expression，後者则是function declaration，相信现在的你看到declaration一字心理应该有什麽东西被勾起了，用食记的程序码来验证你的想法吧? 请试着回答下方两种情境的输出结果!

情境一

console.log(add(3,5))

var add = function(a, b) {
  return a + b
}

情境二

console.log(add(3,5))

function add(a, b) {
  return a + b
}

若你认为两种情境没有任何差异，都会出现8这个结果，那麽不好意思你需要继续看完这篇文章?

最终情境一其实会抛出错误

Uncaught TypeError: add is not a function

其实原因相当的单纯，我们说过提升是将所有的宣告(declaration)放到记忆体位置的行为，且只有宣告会被提升、复职的行为并不会一并被提升，所以情境一的程序码你可以这样理解。

var add

console.log(add(3,5))

add = function(a, b) {
  return a + b
}

这麽一来就清楚多了，在function expression的情况中，虽然add变数被提升，但它仍还没被赋值为一个函数，试着将它当作函数呼叫自然会看到红辣辣的错误讯息罗!

所以回到一开始的问题，两者确实是存在差异的，而最主要的差异就是虽然都有提升的行为，但在function expression的情况中，被实际赋值前是无法使用该函数的! 当然他们还存在一些其他的差异(像是是否套用JS的垃圾回收机制等)，但一般来说你只要能举例回答以上的内容即可!

本日核心观念与总结

核心观念

提升(hoist)、function expression & function declaration

总结

• 再次强调，只有宣告的行为会被提升，赋值的行为则不会

本文章同步发布於个人部落格，有兴趣的朋友也可以来逛逛~!