在js中关于同名变量和函数的地位争夺问题

先上一段让大家比较蒙圈的代码,接下来再慢慢讲解

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<script type="text/javascript">
console.log(foo);
var foo = 1;
console.log(foo);
function foo () {
}
console.log(foo);
</script>
</body>

</html>

其实,在浏览器解析js代码的过程中,会有一个预编译的过程,遇到function 函数定义的部分,会先将该部分的代码提前,所以我们在第一个console.log(foo)中,会打印出function foo(){},第二个和第三个foo被变为1,所以会打出来1

我们如果将var变成let,大家应该能想到会报错,ES6规定let定义的变量不需要重复定义,但是聪明的你知道是哪里报的错吗

竟然是第一行报错了,它竟然还显示foo已经被定义了!真是岂有此理,竟然还有比第1行还早执行的代码吗?这里其实是预编译的结果,好神奇,对不对

时间: 2024-08-04 00:47:02

在js中关于同名变量和函数的地位争夺问题的相关文章

JS中,子类调用超类函数

概述 JS虽然并不直接具备面向对象的特性,但仍可以通过prototype来模拟面向对象的继承和多态等特性.和大多数面向对象语言(例如C++,Java等)相比,JS来实现面向对象仍稍显繁琐和抽象,需要对JS的prototype模型有深入的理解. 在开发过程中,有时候会遇到这样一个问题:如果在子类中"覆盖"了超类的某个方法,但仍需要在子类方法中调用一次超类方法,这时候应该怎么做?如果是Java,一个简单的super关键字即可解决问题,但如果是JS呢? 解决问题的最基本方法可以是:在子类中,

JS中的日期内置函数

用JS中的日期内置函数实现在页面显示:“今天是:2013年9月26日14:32:45”. var date=new Date(Date.parse('9/26/2013 14:32:45'));   写出JS中声明对象的三种方法. Var obj={ name:名字, Say:function(){ Alert(‘sssss’); } }     Var obj=new Object();     Var obj={} Obj.name=’名字’; Obj.say=function(){ Ale

JS中的let变量

介绍JS中的let变量: let允许你声明一个作用域被限制在块级中的变量.语句或者表达式.在Function中局部变量推荐使用let变量,避免变量名冲突. 作用域规则 let 声明的变量只在其声明的块或子块中可用,这一点,与var相似.二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数. function varTest() { var x = 1; if (true) { var x = 2; // 同样的变量! console.log(x); // 2 } console.log

js中startWith、endWith效果函数

JavaScript采用正则表达式实现startWith.endWith效果函数 String.prototype.startWith=function(str){       var reg=new RegExp("^"+str);       return reg.test(this);        } String.prototype.endWith=function(str){       var reg=new RegExp(str+"$");     

HTML代码中在两个匿名函数中使用同名变量出现bug而引起的变量作用域的思考

在学习HTML的时候,为了方便地对同一个css样式的不同值的效果进行对比,我做成了下面这个样子. 代码也是很典型的用于展示的格式(p元素的内容随便写的): 1 <head> 2 <style> 3 p{ 4 border: medium solid black; 5 padding: 5px; 6 margin: 5px; 7 text-justify:inter-word; 8 } 9 button{ 10 margin: 5px; 11 } 12 </style>

js中静态函数与变量

一 私有变量和函数 js中没有概念上的私有,公有也没有静态和非静态相关概念,有的只能是通过作用于来模仿 函数的块级作用域使得函数内部成员可以不被外部所访问,比如我们使用块级作用于定义一个类 //定义一个命名空间,用于相关类挂靠到该空间下,使得外部通过该命名空间访问某个类型 var MyLib = window.MyLib = MyLib || {}; (function{ // 在函数内部 name 是不会被外部直接能够访问的,除非通过方法暴露接口 var name=''; //同样的道理,如果

JS中的循环嵌套 BOM函数

[嵌套循环特点]                           外层循环转一次,内层循环转一圈              外层循环控制行数,内层循环控制每行元素个数             [做图形题思路]              1确定图形一共几行  极为外层的循环的次数             2确定每行有几种元素,代表有几个内层循环.             3 确定每种元素的个数,即为每个内层循环的次数                 tips:通常:找出每种元素个数,与行号的关

JS中的this变量的使用介绍

脚本之家 在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余. 对于this变量最要的是能够理清this所引用的对象到底是哪一个,也许很多资料上都有自己的解释,但有些概念讲的偏繁杂.而我的理解是:首先分析this所在的函数是当做哪个对象的方法调用的,则该对象就是this所引用的对象. 示例一. 代码如下: var obj = {}; obj.x = 100; obj.y

js中要声明变量吗?

你好,js语言是弱类型语言,无需申明即可直接使用,默认是作为全局变量使用的.建议:在function里时应使用var 申明变量,这样改变量仅仅只在function的生存周期内存在,不会污染到,全局控件.至于直接在<script>标签内使用的话则申明不声明效果都是一样的. 下面的文章可以帮助你更清楚的了解js变量一.变量的类型 Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个