js 作用域和变量详解

 更新时间:2017年02月16日 15:35:20   作者:summer_88  
本文主要介绍了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>

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

相关文章

  • JS 文件传参及处理技巧分析

    JS 文件传参及处理技巧分析

    其实为js文件传参是很久就接触过的一个问题,只是一直没有放在心上,今天在无忧看到又有人问这个问题,今日总结一下。
    2010-05-05
  • 学习Bootstrap滚动监听 附调用方法

    学习Bootstrap滚动监听 附调用方法

    这篇文章主要为大家全面解析Bootstrap中滚动监听的使用方法,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 微信小程序wx:for和wx:for-item的用法详解

    微信小程序wx:for和wx:for-item的用法详解

    这篇文章主要介绍了微信小程序wx:for和wx:for-item的正确用法,wx:for是循环数组,wx:for-item即给列表赋别名,文中给大家列出来几个错误用法,大家一起学习下
    2018-04-04
  • Javascript实现获取及设置光标位置的方法

    Javascript实现获取及设置光标位置的方法

    这篇文章主要介绍了Javascript实现获取及设置光标位置的方法,涉及javascript针对页面光标位置的相关操作技巧,具有良好的兼容性,非常简单实用,需要的朋友可以参考下
    2015-07-07
  • js replace 全局替换的操作方法

    js replace 全局替换的操作方法

    这篇文章主要介绍了js replace 全局替换的操作方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • JS实现网页表格自动变大缩小的方法

    JS实现网页表格自动变大缩小的方法

    这篇文章主要介绍了JS实现网页表格自动变大缩小的方法,实例分析了javascript操作表格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • js中cookie的使用详细分析

    js中cookie的使用详细分析

    JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求。 cookie是浏览器 提供的一种机制,它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制,而并不是JavaScript本身的性质。
    2008-05-05
  • Bootstrap实现默认导航栏效果

    Bootstrap实现默认导航栏效果

    这篇文章主要介绍了Bootstrap实现默认导航栏效果,导航栏是一个很好的功能,是Bootstrap网站的一个突出特点,本文带领大家学习实现Bootstrap导航栏,需要的朋友可以参考下
    2015-12-12
  • javascript获取当前鼠标坐标的方法

    javascript获取当前鼠标坐标的方法

    这篇文章主要介绍了javascript获取当前鼠标坐标的方法,可针对不同浏览器获取鼠标的坐标位置,是非常实用技巧,需要的朋友可以参考下
    2015-01-01
  • 一道优雅面试题分析js中fn()和return fn()的区别

    一道优雅面试题分析js中fn()和return fn()的区别

    这篇文章主要带领大家深入理解JavaScript中 fn() 和 return fn() 的区别,感兴趣的小伙伴们可以参考一下
    2016-07-07

最新评论