每日一道javascript面试题（九）函数的参数可以和函数体中的变量重名吗

最新推荐文章于 2024-04-26 16:47:03 发布

爱叨叨的小嘟

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量784

点赞数 3

分类专栏：每日一题文章标签： javascript 前端开发语言面试 es6

本文链接：https://blog.csdn.net/L_Z_jay/article/details/121985649

版权

每日一题专栏收录该内容

9 篇文章 1 订阅

订阅专栏

前言

我是小嘟，努力每天分享一道javascript相关的题目。
希望对你有所帮助。
觉得有用的话，请点赞支持，你的鼓励是我坚持下去的动力。
今天在牛客看面经的时候，发现这个题目，虽然只有几行代码，但是考的知识点还是挺难理解的。
大家一起来看看吧！说的不对的地方欢迎指出。

题目一

function f(x = 3){
     var x;
     console.log("我是f的x：",x);
}
f(5) ;

结果如下

本题知识点

本题考查知识点：函数的参数和函数体中的变量到底能不能重名呢？
小嘟这个题也做错了，然后就去看了阮老师的es6文档，从中又学到了新的知识（真的是每次读每次有新的感悟）。
感悟：参数变量是默认声明的，所以在函数体中不能再用let或const声明（这个是官方文档里边说的哦），但是用var还可以声明的，说到这里我们还是不能解决这个问题，然后我又参考了木易杨大佬的解释：
总结一下：我们不能用let和const再次声明已经存在的变量名，用var声明的变量不会覆盖参数的变量。
对var再详细说下：
- (1)如果在函数体仅仅是声明变量但是没有赋值，那么在函数体中打印该变量的值则是参数中存储的值。
- (2)如果声明并且赋值了，那么在函数体中打印该变量的值则是函数体中变量的值，请看下边的例子：

function f(x = 3){
     var x;
     console.log("我是f的x：",x);
}
f(5);
function f1(x = 3){
     var x = 7;
     console.log("我是f1的x：",x);
}
f1(5);

结果如下

在这里插入图片描述

题目二（函数作用域）

function f2(x, y = function() {console.log("我是赋值前的x：",x); x = 2; console.log("我是赋值后的x：",x); }) 
{
      var x = 3;
      y();
      console.log("我是函数体中的x：",x);
}
f2();

结果如下

在这里插入图片描述

分析

读者是不是都迷糊啦，说实话，小嘟我也迷啦，所以这篇文章小嘟写了好几天，生怕什么地方解释的太离谱了。若觉得不错请点赞支持，小嘟我会继续努力的。
这个题我在阮老师的文档中找到了依据：
也正是因为如此，y中x指向的是参数中的x而不是函数体中的x，说到这里大家应该基本明白这个结果为什么是这样。这里小嘟产生了一个新的问题：既然是不同的作用域，那么为什么不能使用let和const声明相同的变量名呢？
最后我给自己的解释是：是不同的作用域，但是不是不同的块级作用域，（js中有函数作用域、全局作用域、块级作用域，这里我认为应该是在同一个块级作用域，否则不应该报语法错误）所以应该是这样的一个原因。（大家仅供参考，欢迎下方指正）
说了这么多还没有演示let和const声明会发生什么呢？

题目三（let声明）

function f(x = 3){
     var x;
     console.log("我是f的x：",x);
}
f(5);
function f1(x = 3){
     var x = 7;
     console.log("我是f1的x：",x);
}
f1(5);
function f2(x = 3){
     let x;
     console.log("我是f2的x：",x);
}
f2(5) ;

结果如下

在这里插入图片描述

我们知道js会有一个预编译的过程，将函数声明提升、将var声明的变l量提升、检查语法等。从这个结果中我们会发现一个结果都没有执行，如果没有预编译的过程那么应该会输出前两个结果的。

题目四（const声明）

function f(x = 3){
     var x;
     console.log("我是f的x：",x);
}
f(5);
function f1(x = 3){
     var x = 7;
     console.log("我是f1的x：",x);
}
f1(5);
function f3(x = 3){
      const x;
      console.log("我是f3的x：",x);
}
f3(5) ;