学弟的一张图,让我重学了一遍函数声明和函数表达式!

简介: 首先我们要知道,当函数声明与变量命名冲突的时候,要保持着**函数声明优先的原则**

前言

今天下午,在我们微信群里,学弟突然发出来这样一个图:
image.png

我点开一看,这不是函数声明跟函数表达式的知识点吗?前一阵子还看过相关文章。

看了几眼,我说到:第一个输出应该是最后的函数声明

然后呢? 没有然后了,真的,犹豫代表着此时的我不会。

看来卷的还不够!

先贴上答案,如果你跟我一样犹豫不决,不知道结果,那么跟我一起再次学习一遍吧。

image.png

开始复习

首先,确定问题:函数表达式和函数声明的区别,以及困扰住我们的优先问题

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

函数声明

首先我们要知道,当函数声明与变量命名冲突的时候,要保持着函数声明优先的原则

fn();
function fn () {
    console.log(‘fn’);
}
var fn = 2;

例如这样,不会报错,会输出fn。

如果你不知道为什么调用函数可以在函数声明之前,看这里

是因为javascript代码是一段一段预载的,在一段代码预载完成后,会把函数声明提前到代码段的前面执行,以便在代码段的任何地方调用,所以前面的代码无错

那么,多个同名的函数声明,会如何呢?我们接着来看一下

fn();
function fn () {
    console.log(‘1’);
}
function fn () {
    console.log(‘2’);
}

输出结果为2。这是因为有多个函数声明的时候,是由最后的函数声明来替代前面的

这也是我上文中读了几眼代码直接说第一个输出为最后的函数声明的原因!

函数表达式

fn();
var fn = function () {
    console.log('fn');
}

有用过的同学可能看到这里,说我知道,完后写出了上面这段代码,但其实这段代码是不对的,会爆出fn is not a function这个错误。

这是什么原因呢?这其实就是函数声明和函数表达式的区别之一

因为函数表达式相当于把一个函数当做值,赋予一个变量,而这个变量在未声明的时候,是不能使用的

正确的函数表达式:

var fn = function () {
    console.log('fn');
}
fn();

复习回来,再战!

先把代码贴出来方便阅读:

// 下面的代码输出什么
function method(foo){
    console.log(foo)
    var foo = 'A'
    var foo = function () {
        console.log('B')
    }
    foo()
    function foo() {
        console.log('C')
    }
    foo()
}
var foo = 1
method(foo)

经过了上面的复习,我们知道,JavaScript会将函数声明提前,所以我们来整理一下这段代码:

function method(foo){
    function foo() {
        console.log('C')
    }
    console.log(foo)
    var foo = 'A'
    var foo = function () {
        console.log('B')
    }
    foo()
    foo()
}
var foo = 1
method(foo)

现在,再利用我们刚刚学的知识,来分析打印的都是什么数据:

首先,第一个打印的是我们输出C的foo函数,第二个和第三个调用foo函数的时候,函数表达式的变量已经声明了!所以函数发生了覆盖,现在的foo函数已经是输出B的foo函数了。

现在让我们来整理一下结果:

function foo() {
    console.log('C')
}
B
B

你学会了吗?没学会快去看看相关知识点!

最后

但是犹豫就是不会,不能拿曾经学过当做借口,把遇到的每一个自己不会的问题弄懂,才能逐渐让自己变得更强!

相关文章
|
6月前
|
编译器 程序员 C语言
爱上C语言:什么C语言函数不太会,那你千万不要错过这篇(函数篇)
爱上C语言:什么C语言函数不太会,那你千万不要错过这篇(函数篇)
|
6月前
|
算法 Java C语言
【c语言基础题】— —第一版,可当作日常练习和期末复习,有奇效哟!
【c语言基础题】— —第一版,可当作日常练习和期末复习,有奇效哟!
|
存储 编译器 C语言
2023-3-9-一篇简短的文章把C++左右值关系讲的透透彻彻
2023-3-9-一篇简短的文章把C++左右值关系讲的透透彻彻
118 0
有点迷糊的题
2541. 使数组中所有元素相等的最小操作数 II - 力扣(LeetCode)
72 0
|
前端开发 JavaScript C语言
带你读书之“红宝书”:第十章 函数①
带你读书之“红宝书”:第十章 函数①
103 0
带你读书之“红宝书”:第十章 函数①
|
前端开发 C语言
带你读书之“红宝书”:第十章 函数④
带你读书之“红宝书”:第十章 函数④
78 0
带你读书之“红宝书”:第十章 函数④
使用 Lambda 表达式的正确姿势,写得太好了叭
Lambda 表达式非常方便,在项目中一般在 stream 编程中用得比较多。 List<Student> studentList = gen(); Map<String, Student> map = studentList .stream() .collect(Collectors.toMap(Student::getId, a -> a, (a, b) -> a)); 理解一个 Lambda 表达式就三步: 1. 确认 Lambda 表达式的类型 2. 找到要实现的方法 3. 实现这个方法 就这三步,没其他的了。而每一步,都非常非常简单,以至于我分别展开讲一下,你就懂了。
|
存储 JavaScript 前端开发
带你读书之“红宝书”:第十章 函数②
带你读书之“红宝书”:第十章 函数②
103 0
带你读书之“红宝书”:第十章 函数②
|
前端开发 C语言
带你读书之“红宝书”:第十章 函数⑦
带你读书之“红宝书”:第十章 函数⑦
94 0
带你读书之“红宝书”:第十章 函数⑦
|
存储 前端开发 JavaScript
带你读书之“红宝书”:第三章 语法基础(中)之 3.5操作符②
带你读书之“红宝书”:第三章 语法基础(中)之 3.5操作符②
96 0
带你读书之“红宝书”:第三章 语法基础(中)之 3.5操作符②