浅析JavaScript中作用域和作用域链

 更新时间:2016年12月06日 16:30:34   作者:智轩资本  
本文主要介绍了JavaScript中作用域和作用域链解析,条理分明,方便理解,这里推荐给小伙伴们,有需要的朋友可以参考下

学习js,肯定要学习作用域,js作用域和其他的主流语言的作用域还存在很大的区别。

一.js没有块级作用域。

 js没有块级作用域,就像这样:

if(){
 var a = 100; 
  console.log(a) //输出100
}
console.log(a) //输出100

 js中像if,for,switch之类的语句,他们包含的代码块里面的变量,在代码块外面也能被读取,所以说,js没有块级作用域。

二.js的全局变量

 js中规定,全局变量都可以看作是window的属性,而且全局变量能够被所有的代码块读取。

var a = 10;
function() {
  b = 20; 
 console.log(a); //输出10;
}
console.log(b); //输出20;

 虽然在匿名函数中对a没有定义,但是由于a是全局变量,所以其他任何的代码块都能够读取a的值。在一个复杂的项目中,全局变量如果操作不慎,很有可能带来重大的bug。所以在平时写代码的时候,应该尽量避免使用全局变量!对于一个变量来说,如果没有用var来声明的话,那么会自动认为是全局变量,因此,在书写中,一定不能漏写var。

三.js的局部变量

 js中的全局变量,很容易使代码存在问题,所以我们应该明确区分全局变量和局部变量!局部变量只在他所在的函数内部读取,在函数外部却无法读取这个变量。

function doSomething(){
 var blogName="智轩资本";
 function innerSay(){
  alert(blogName);
 }
 innerSay();
}
alert(blogName); //undefined
innerSay(); //undefined

四.js的作用域链问题

 由于js存在全局变量和局部变量,在调用一个变量是,会对他的作用域链进行查找,如果函数内部定义了这个变量,那么取该变量的值,如果没有,那么向上一层查找,如果找到了,就获取这个值,如果还没找到,继续往上层查找,直到找到位置,如果找到最后也没找到,那么该变量的值为undefined。

 先看一个例子:

var myName = '智轩资本';
function scoap() {
  console.log(myName);
    var myName = "zhixuan";
    console.log(myName);
    console.log(age);
 } 
scoap();

先分析一下这个例子,scoap()将调用这个函数,第一个console.log(name),会对name的值进行原型链查找,首先看函数scoap内部是否进行了定义,发现在函数内部对name进行了定义,那么第一个console.log(name)将不再往上层查找!那么第一个console.log(name)的值是不是就是“zhixuan”了呢?no!no!no!由于第一个console.log(name)时,对name还没有赋值,所以,第一个console.log(name)为undefined,第二个console.log(name)为“zhixuan”!

再看一个例子:

var a = 10;
function zhixuan() {
 console.log(a);
}
function ziben() {
 var a = 20;
 zhixuan();
}
ziben();

这次console.log(a)的值为多少呢?首先执行ziben()函数,里面定义了a为20,再执行zhixuan()函数,要求输出a的值,由于作用域在函数定义的那一瞬间就决定了,所以,zhixuan()函数会向上查找到a的全局变量,即var a=10,而不是演着ziben()里的作用域查找!所以console.log(a)为10.

当然,我的这些理解比较浅,如果想要继续深入,推荐阅读:https://www.jb51.net/article/57393.htm

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,同时也希望多多支持脚本之家!

相关文章

  • URL中“#” “?” &“”号的作用浅析

    URL中“#” “?” &“”号的作用浅析

    这篇文章主要介绍了URL中“#” “?” &“”号的作用浅析,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • element-ui的回调函数Events的用法详解

    element-ui的回调函数Events的用法详解

    这篇文章主要介绍了element-ui的回调函数Events的用法,本文通过实例代码给大家介绍了change回调函数的使用方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • 原生js实现复制对象、扩展对象 类似jquery中的extend()方法

    原生js实现复制对象、扩展对象 类似jquery中的extend()方法

    jq的extend()方法能很方便的实现扩展对象方法,这里要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,需要的朋友可以参考下
    2014-08-08
  • 基于JS实现文字转语音即文本朗读

    基于JS实现文字转语音即文本朗读

    这篇文章主要为大家详细介绍了JavaScript如何利用SpeechSynthesis实现文字转语音即文本朗读的功能,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • javascript实现简单下拉菜单效果

    javascript实现简单下拉菜单效果

    这篇文章主要为大家详细介绍了javascript实现简单下拉菜单效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一
    2022-08-08
  • 微信小程序输入多行文本的实战记录

    微信小程序输入多行文本的实战记录

    多行输入框组件是原生组件,这篇文章主要给大家介绍了关于微信小程序输入多行文本的相关资料,文中通过实例代码介绍的介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • js实现可控制左右方向的无缝滚动效果

    js实现可控制左右方向的无缝滚动效果

    这篇文章主要介绍了js实现可控制左右方向的无缝滚动效果,页面中添加了两个按钮,控制图片滚动的方向,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • js淡入淡出的图片轮播效果代码分享

    js淡入淡出的图片轮播效果代码分享

    这篇文章主要介绍了js淡入淡出的图片轮播切换特效,图片可以随意替换,文中示例代码介绍的非常详细,具有一定的参考价值,推荐给大家,感兴趣的小伙伴们可以参考一下
    2015-08-08
  • Bootstrap警告框(Alert)插件使用方法

    Bootstrap警告框(Alert)插件使用方法

    这篇文章主要为大家详细介绍了Bootstrap 警告框(Alert)插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 修改js Calendar日历控件 兼容IE9/谷歌/火狐

    修改js Calendar日历控件 兼容IE9/谷歌/火狐

    修改js Calendar日历控件 兼容IE9/谷歌/火狐等主流浏览器,只是能用,出现的位置存在一些差异,晒出来与大家分享,希望有高手再帮我改改吧
    2013-01-01

最新评论