js 作用域和变量详解

一、说起变量的提升呢，首先我们先看一段简单的代码

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
  var v = 'hello world';
  alert(v);
 </script>
</body>
</html>

以上代码执行的结果是hello world

然后在看一段代码：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
  var v='Hello World';
  (function(){
   alert(v);
  })();
 </script>
</body>
</html>

执行的结果和第一段代码一样hello world

好了，接下来在看这段代码：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
  var v='Hello World';
  (function(){
   alert(v);
   var v='I love you';
   alert(v);
  })();
 </script>
</body>
</html>

以上代码执行的结果： 第一个弹出的是undefined；第二个结果是I love you。为什么会有这样的结果呢？

这就跟刚开始提到的变量提升有关系哦~~~下面我们来做下总结：

最后一段代码展现了2个知识点：

1、变量提升

2、作用域链

首先来说作用域链，js访问一个变量时会优先在该作用域内（访问时的那个作用域）寻找是否声明过这个变量，如果该变量已经存在，则直接使用它的值，否则会寻找该作用域的‘父作用域/上级作用域'，依次类推，直到找到全局作用域为止。

关于变量提升是指：js在解析的时候总是会将var，function这类关键词的声明语句提升至作用域的最顶部（注意：这里只会提升声明的部分，赋值不会被提升）

所以，由此看来，上述的那段代码就等于：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
  var v='Hello World';
  (function () {
   var v; //先将该作用域下的变量提升，但没有赋值
   alert(v); //所以此时是undefined
   var v='I love you';
   alert(v); //I love you
  })();
 </script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • js变量以及其作用域详解

    一.变量的类型 Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量.例如: 复制代码 代码如下: i=100;//Number类型 i="variable";//String类型 i={x:4};//Object类型 i=[1,2,3];//Array类型 JS的这种特性虽然让我们的编码更加灵活,但也带来了一个弊端,不利于Debug,编译器的弱检测让我们维护冗长的

  • Angularjs全局变量被作用域监听的正确姿势

    如果你只想知道结论: $scope.$watch($rootScope.xxx,function(newVal,oldVal){ //do something }) 马上就有人问为什么不是: $rootScope.$watch("xxx",function(newVal,oldVal){ //do something }) 从我最近的一个bug来说说为什么要用第一种方式. 逻辑如图,一开始我使用了 $rootScope.$watch 的写法.因为 angularjs 在 $rootSc

  • 浅谈Javascript变量作用域问题

    Js中的变量作用域问题: 1.没有块级作用域.Js中的变量作用域不是以{}为界的,不像C/C++/Java. 如: 复制代码 代码如下: if(true){      var name = "qqyumidi";  }               alert(name);  // 结果:qqyumidi Js会将在if中定义的变量添加到当前的执行环境中,尤其在使用for循环时需要注意与其他语言的差异. 复制代码 代码如下: for(var i=0; i<10; i++){    

  • 深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解

    函数表达式 1.JavaScript中定义函数有2钟方法: 1-1.函数声明: 复制代码 代码如下: function funcName(arg1,arg2,arg3){  //函数体} ①name属性:可读取函数名.非标准,浏览器支持:FF.Chrome.safari.Opera. ②函数声明提升:指执行代码之前会先读取函数声明.即函数调用可置于函数声明之前. 1-2.函数表达式: 复制代码 代码如下: var funcName = function(arg1,arg2,arg3){  //函

  • js变量、作用域及内存详解

    js变量、作用域及内存详解

    基本类型值有:undefined,NUll,Boolean,Number和String,这些类型分别在内存中占有固定的大小空间,他们的值保存在栈空间,我们通过按值来访问的. (1)值类型:数值.布尔值.null.undefined. (2)引用类型:对象.数组.函数. 如果赋值的是引用类型的值,则必须在堆内存中为这个值分配空间.由于这种值的大小不固定(对象有很多属性和方法),因此不能把他们保存到栈内存中.但内存地址大小是固定的,因此可以将内存地址保存在栈内存中. <script type="

  • js函数内变量的作用域分析

    本文实例分析了js函数内变量的作用域.分享给大家供大家参考.具体分析如下: 先看一个函数实例: 复制代码 代码如下: <html> <head> </head> <body> <script type="text/javascript"> var a = 5; var c = 3; function t(){  var a = 6;  var b = 10;  document.write(a+'-----'+b);  doc

  • JS变量及其作用域

    1. 变量及其作用域:变量分为"全局变量"和"局部变量","全局变量"申明在函数外部,可供所有函数使用,而"局部变量"申明在函数体内部,只能在定义该变量的函数体内使用. (备注:在申明变量时没有var关键字,而是直接赋值的变量均为全局变量) <script type="text/javascript"> function main() { n = 10;//这里的n为全局变量,可以被外部直接使用

  • JavaScript的变量作用域深入理解

    在学习JavaScript的变量作用域之前,我们应当明确几点: a.JavaScript的变量作用域是基于其特有的作用域链的. b.JavaScript没有块级作用域. c.函数中声明的变量在整个函数中都有定义. 1.JavaScript的作用域链 首先看下下面这段代码: 复制代码 代码如下: <script type="text/javascript" language="javascript"> var rain = 1; function rain

  • 关于javascript 回调函数中变量作用域的讨论

    1.背景 Javascript中的回调函数,相信大家都不陌生,最明显的例子是做Ajax请求时,提供的回调函数, 实际上DOM节点的事件处理方法(onclick,ondblclick等)也是回调函数. 在使用DWR的时候,回调函数可以作为第一个或者最后一个参数出现,如: JScript code function callBack(result){ } myDwrService.doSomething(param1,param2,callBack);//DWR的推荐方式 //或者 myDwrSer

  • JS中作用域和变量提升(hoisting)的深入理解

    JS中作用域和变量提升(hoisting)的深入理解

    作用域(Scoping) 对于Javascript初学者来说,一个最迷惑的地方就是作用域:事实上,不光是初学者.我就见过一些有经验的javascript程序员,但他们对scope理解不深.javascript作用域之所以迷惑,是因为它程序语法本身长的像C家族的语言.我对作用域的理解是只会对某个范围产生作用,而不会对外产生影响的封闭空间.在这样的一些空间里,外部不能访问内部变量,但内部可以访问外部变量. c语言的变量分为全局变量和局部变量,全局变量的作用范围是任何文件和函数访问(当然,对于非变量定

随机推荐