JavaScript var声明变量背后的原理示例解析_基础知识

只要是写过点JS代码,很简单一个var 就完事了。那对于JS编译器背后它又发生了什么呢?那就一步步通过代码来讲起。

复制代码 代码如下:

x = 1;
alert(x);
var y = function() {
alert(x);
var x = 2;
alert(x);
}
y();

上面的代码也会你答对了它会分别输出:1,undefined,2。对于我来说,第一反应它会输出:1,1,2。为什么第二个会输出undefined?在上面我明确定义了一个全局变量x,为何找不到?

那是因为:js编译器在执行这个y函数的时候,会把把它body里面的声明变量提前到最前面进行声明。比如:var x=2; 编译器先会在body最前面进行var x 声明。其实上面的代码等同于下面的这段代码:

复制代码 代码如下:

x = 1;
alert(x);
var y = function() {<BR>var x;//此时x还未赋值,所以为undefined。
alert(x);
x = 2;
alert(x);
}
y();

所以也就不难理解x=undefined的了.但是如果把var x = 2;这段代码给删掉,在内部它没有进行var声明。它会一直沿着作用域向上找,此时的x 就为全局x.
接下来再看一个更有趣的例子。

复制代码 代码如下:

var a = 1;
function b() {
a = 10;
return;
}
b();
alert(a);
///////////////////////////////////
var a = 1;
function b() {
a = 10;
return;
function a() {}
} b(); alert(a);

例子很简单。第一个例子为输出10,第二个会输出1。这是为什么呢?况且第二个例子我都return 了。按理都应当输出10才对呀!那时因为JS编译器在背后作怪。
两段代码差别就是第二个例子多了个function a(){};便这个函数体里面什么也没有,并且也没有对它进行任何调用。

其实JS编译器在背后会把function a() {}编译成 var a=function (){}。此时对于函数内部也有一个a=10; 外面的a些也还是1;根据JS作用域。会先找内部的a,如果找不到再向上一级一级找。
最张alert(a) 就会显示1;

时间: 2024-08-02 23:06:26

JavaScript var声明变量背后的原理示例解析_基础知识的相关文章

javascript中interval与setTimeOut的区别示例介绍_基础知识

setTimeout(code,millisec) //- 在指定时间后执行代码 code必须: millisec必须: clearTimeout(setTimeoutId) //- 取消 setTimeout() setInterval(code,millisec)://指定间隔毫秒内循环执行代码 code必须: millisec必须: clearInterval(intervalId); 用setTimeout(code,millisec)可以实现setInterval效果,只需要嵌套调用方

JavaScript对内存分配及管理机制详细解析_基础知识

你可能听说过JAVA..NET.PHP这些语言有垃圾回收的内存管理机制,但是很少会听到JavaScript也有自己的内存管理机制,JavaScript同样有着类似的垃圾回收功能.本文主要讲述了JavaScript的垃圾回收原理和具体的过程. 简介在底层语言中,比如C,有专门的内存管理机制,比如malloc() 和 free().而Javascript是有垃圾回收(garbage collection)机制的,也就是说JS解释器会自动分配和回收内存.这样就有人觉得,我用的是高级语言,就不用关心内存

整理的比较不错的JavaScript的方法和技巧第1/3页_基础知识

适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识  1 创建脚本块 1: <script language="JavaScript"> 2: JavaScript code goes here 3: </script>  2 隐藏脚本代码 1: <script language="JavaScript"> 2: <!-- 3: documen

JavaScript变量的作用域全解析_基础知识

变量作用域是程序中定义这个变量的区域. 先来看一段示例: /*  代码1  */ var scope = "global "; function checkScope() { var scope = "local "; function childCheck() { var scope = "childLocal "; document.write(scope); } function childUndefined() { document.wr

老生常谈javascript变量的命名规范和注释_基础知识

简单说,标识符命名规则如下: 第一个字符可以是任意Unicode字母,以及美元符号($)和下划线(_). 第二个字符及后面的字符,还可以用数字. 下面这些都是合法的标识符. arg0 _tmp $elem π 下面这些则是不合法的标识符. 1a 23 *** a+b -d 中文是合法的标识符,可以用作变量名. var 临时变量 = 1; JavaScript有一些保留字,不能用作标识符:arguments.break.case.catch.class.const.continue.debugge

javascript学习笔记(四)function函数部分_基础知识

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. Jscript 支持两种函数:一类是语言内部的函数(如eval() ),另一类是自己创建的. 在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它.(该变量的作用域是局部的). 您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量. 函数的调用方式 1.普通调用:functionName(实际参数...) 2.通过指向函数的变量去调用: var  myVar

讲解JavaScript的Backbone.js框架的MVC结构设计理念_基础知识

什么是Backbone.js?Backbone.js是十大JS框架之首,Backbone.js 是一个重量级js  MVC 应用框架,也是js MVC框架的鼻祖.它通过Models数据模型进行键值绑定及custom事件处理,通过模型集合器Collections提供一套丰富的API用于枚举功能,通过视图Views来进行事件处理及与现有的Application通过JSON接口进行交互. 简而言之,Backbone是实现了web前端MVC模式的js库 什么是MVC?MVC:后端服务器首先(过程1)通过

JavaScript中Array 对象相关的几个方法_基础知识

push 方法将新元素添加到一个数组中,并返回数组的新长度值. arrayObj.push([item1 [item2 [. . . [itemN ]]]]) 参数arrayObj 必选项.一个 Array 对象. item, item2,. . . itemN 可选项.该 Array 的新元素. 说明push 方法将以新元素出现的顺序添加这些元素.如果参数之一为数组,那么该数组将作为单个元素添加到数组中.如果要合并两个或多个数组中的元素,请使用 concat 方法. 示例 <script ty

探讨JavaScript中的Rest参数和参数默认值_基础知识

Rest 参数 通常,我们需要创建一个可变参数的函数,可变参数是指函数可以接受任意数量的参数.例如,String.prototype.concat 可以接受任何数量的字符串作为参数.使用 Rest 参数,ES6 为我们提供一种新的方式来创建可变参数的函数. 我们来实现一个示例函数 containsAll,用于检查一个字符串中是否包含某些子字符串.例如,containsAll("banana", "b", "nan") 将返回true,contai