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

简介: 每日一道javascript面试题(九)函数的参数可以和函数体中的变量重名吗

前言

  • 我是小嘟,努力每天分享一道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中有函数作用域、全局作用域、块级作用域,这里我认为应该是在同一个块级作用域,否则不应该报语法错误)所以应该是这样的一个原因。(大家仅供参考,欢迎下方指正)

  • 说了这么多还没有演示letconst声明会发生什么呢?

题目三(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) ;


结果如下

结尾

  • 以上就是本节内容,若有问题,欢迎评论区留言。
  • 觉的对你有所帮助,请点赞👍评论👈,要是能给个关注➗更
相关文章
|
1天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
8 2
|
3天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指什么
【5月更文挑战第9天】JavaScript中的异步函数用于处理非立即完成的操作,如定时器、网络请求等。它们可通过回调函数、Promise或async/await来实现。示例展示了如何使用async/await模拟网络请求:定义异步函数fetchData返回Promise,在另一异步函数processData中使用await等待结果并处理。当fetchData的Promise解析时,data变量接收结果并继续执行后续代码。注意,调用异步函数不会阻塞执行,而是会在适当时间点继续。
10 0
|
3天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
10 1
|
3天前
|
JavaScript 前端开发 网络架构
JavaScript中的箭头函数是一种新的函数表达形式
【5月更文挑战第9天】JavaScript的箭头函数以简洁语法简化函数定义,其特性包括:1) 不绑定自身this,继承上下文的this,适合回调和事件处理;2) 没有arguments对象,需用剩余参数语法访问参数;3) 不能用作构造函数,无new调用;4) 没有prototype属性,不支持基于原型的继承。箭头函数在特定场景下优化了this处理,但使用时要注意与普通函数的差异。
8 2
|
5天前
|
自然语言处理 JavaScript 前端开发
三个JavaScript面试题
摘要: - 闭包是JavaScript函数能记住词法作用域,即使在外部执行。示例:计数器函数`createCounter()`返回访问`count`的匿名函数,每次调用计数递增。 - 事件循环处理异步操作,通过检查任务队列执行回调。示例:`setTimeout`异步任务在3秒后添加到队列,待执行,输出顺序为同步任务1、2,然后异步任务1。 - 箭头函数是ES6简洁的函数定义方式,如`greet = name => `Hello, ${name}!`。它没有自己的`this`,不适用作构造函数。
25 6
|
6天前
|
JavaScript 前端开发
js的一些内置函数
js的一些内置函数
7 1
|
6天前
|
JavaScript 前端开发 索引
js的includes函数
js的includes函数
11 1
|
13天前
|
JavaScript 前端开发
【专栏】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表
【4月更文挑战第29天】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表。它接受两个参数:上下文对象和参数数组。理解`apply`有助于深入JS运行机制。文章分三部分探讨其原理:基本概念和用法、工作原理详解、实际应用与注意事项。在应用中要注意性能、参数类型和兼容性问题。`apply`可用于动态改变上下文、传递参数数组,甚至模拟其他语言的调用方式。通过深入理解`apply`,能提升代码质量和效率。
|
4月前
|
JavaScript 前端开发 程序员
如何像人类一样写JavaScript代码(包会)之函数参数和返回值
如何像人类一样写JavaScript代码(包会)之函数参数和返回值
119 1
|
10月前
|
JavaScript
js中函数的传递参数
js中函数的传递参数
93 0