第一次写博,还蛮激动。。。

看到了三题经典题型,就我目前的认识对此题进行总结。如有错误,敬请指正

首先,我们先明确一下JS引擎的工作步骤:

js引擎工作分为两步:

1.将这个js中的变量和函数声明保存到当前(注意,是当前)执行环境的变量对象中

2.再逐行解析执行js。当看到一个函数或一个变量时,js引擎就会去查询 这个函数或变量是在哪里定义的

查询的方式有两种:

a.按作用域链查找:先在当前执行环境查询这个变量或程序,如果没有,就到父执行环境 中查找,还没有就继续向上查找,一直到window

b.从对象中查找:如果一个函数是用对象来调用的,就可以从这个对象中查找,如果 在执行环境中没有找到,会报错,如果在对象中没有找到,会返回undefined

照我个人的理解:每一个函数都是一个独立的执行环境,在每一个执行环境中,都有两个工作步骤,也就是1和2,下面就题目分析

第一题:

 var a = 10;
function test(){
  a = 100;
  alert(a);
  alert(this.a);
  var a;
  alert(a);
}
test();

答案:100 10 100

就代码解析:函数的工作域是window,首先进行第1步:将变量和函数声明保存到当前执行环境的变量对象中,个人对此句话的理解是:引擎工作的第一步是将变量和函数的声明提前,相当于:

var a;
var test;

之后开始第2步:逐行解析执行js,首先将10赋值给a,然后跳过没有自执行的test函数,开始第9句,第9句是一句对test()函数调用,执行环境要注意是window,因此,test函数中的this指向的必然是window。进入test函数内部,与开始时的步骤相同,第一步,将变量及函数声明提前至解析函数之前,即:

var a;

之后开始对函数内代码逐条执行,首先将100赋值给a,则此时,a 结果为100;而this指的是调用此函数的对象,由第9句,由上述的分析知this指的是window,因此this.a 指的是window中的变量a,其值为10,因此第5句结果为10;第六句在test解析时就被提前了,所以可直接跳到第7句,此时的a指向的还是函数内部的变量a,因此结果为100。

第二题:

 var a = 100;
function test(){
alert(a);
var a = 10;
alert(a);
}
test();

答案:undefined 10

就代码解析:函数的工作域是window,依旧是进行第1步:

var a;
var test;

之后进行逐行解析,第1行将100赋值给a,第7行调用此函数,在被调用的函数test()内,首先有

var a;

第2步,逐行解析,a在其执行环境中已经被定义,所以不会有是全局变量的可能,但因第一步只是把变量声明提前,而非将其赋值,因此在第3句中,a是一个声明但未初始化的值,因此其结果为undefined。第4句将10赋值给a,因此第5句结果为10。

第三题:

 var a = 100;
function test(){
alert(a);
a = 10;
alert(a);
}
test();
alert(a);

答案:100 10 10

就代码解析:函数的工作域是window,依旧是进行第1步:

var a;
var test;

逐行解析:第1行将100赋值给a,第7行调用此函数,在被调用的函数test()内,第一遍并没有变量声明或函数声明,因此进入第2步,依旧是逐行解析,第3行,a在其执行环境中并无声明,由开头介绍的js引擎的第2步a中介绍,先在当前执行环境查询这个变量或程序,如果没有,就到父执行环境 中查找,还没有就继续向上查找,一直到window。因此a在test中并非局部变量,而是window的全局变量,即a的结果是100;第4行中,全局变量a的值修改为10,因此第5行结果为10;在函数结束后,全局变量a的值已经被修改为10,因此第8行结果为10。

针对JS经典题型对全局变量及局部变量的理解浅谈的更多相关文章

  1. python3 函数传参练习 全局变量与局部变量 的理解

    额 还是继续抄一边NLP第二条: 2.一个人不能控制另外一个人   一个人不能改变另外一个人,一个人只能改变自己. 每个人的信念,价值观,规条系统只对本人有效,不应强求别人接守. 改变自己,别人才会有 ...

  2. js作用域链以及全局变量和局部变量

    > [带var] > 在当前作用于中声明了一个变量,如果当前是全局作用域,也相当于给全局作用域设置了一个属性叫做a ```javascript //=>变量提升:var a; < ...

  3. JavaScript中全局变量和局部变量的不同

    今天看到大神写得一片文章,自己对全局变量和局部变量的理解还是不够深刻,因此写到这篇文章,做个总结. 大神代码截图+理解文字如下: 解析:上面代码中,变量i是var命令声明的,在全局范围内都有效,所以全 ...

  4. JS函数 -- 功能,语法,返回值,匿名函数,自调用匿名函数,全局变量与局部变量,arguments的使用

    “JavaScript设计得最出色的就是它的函数的实现.” -- <JavaScript语言精粹> 函数包含一组语句,它们是JS的基础模块单元,用于指定对象的行为.一般来说,所谓编程,就是 ...

  5. Javascript:谈谈JS的全局变量跟局部变量

    原文链接:http://blog.csdn.net/zyz511919766/article/details/7276089# 今天公司一个实习小妹子问我两段JS代码的区别: <script t ...

  6. JS全局变量与局部变量

    一句话概括:在函数外声明的变量都为全局变量,在函数内声明的为局部变量. 一.局部变量和全局变量重名会覆盖全局变量 var a = 1; function test1() { var a = 2; al ...

  7. PHP和JS中全局变量和局部变量

    一,PHP中全局变量和局部变量 php与C++中对全局变量和局部变量定义类似,全局变量:函数外定义的变量,在全局通用:局部变量:在函数内定义的变量,只在函数内有效.PHP中变量范围跨越了include ...

  8. 对js中局部变量、全局变量和闭包的理解

    对js中局部变量.全局变量和闭包的理解 局部变量 对于局部变量,js给出的定义是这样的:在 JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它.(该变量的作用域 ...

  9. js中全局变量和局部变量以及变量声明提升

    javascript中全局变量和局部变量的区别 转载前端小99 发布于2018-04-23 15:31:35 阅读数 2102  收藏 展开 [javascript] view plain copy ...

随机推荐

  1. Idea下用SBT搭建Spark Helloworld

    没用过IDEA工具,听说跟Eclipse差不多,sbt在Idea其实就等于maven在Eclipse.Spark运行在JVM中,所以要在Idea下运行spark,就先要安装JDK 1.8+ 然后加入S ...

  2. 乐乎环球WiFi

    乐乎环球WiFi招商加盟 随身WiFi设备 乐乎环球Wifi是由北京蔚蓝创智科技有限公司研发的产品,是一款可以在全球100多个国家和地区实现免漫游4G高速上网的随身WiFi设备.和普通MiFi设备相比 ...

  3. [转]ThinkPHP中实例化对象M()和D()的区别,select和find的区别

    1.ThinkPHP中实例化对象M()和D()的区别 在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在于M方法实例化模型无需用户为每个数据表定义模型类,如果D方法没有找到定义的模型类,则会 ...

  4. Vue.js——60分钟组件快速入门(上篇)

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...

  5. 让ASP.NET5在Jexus上飞呀飞

    就在最近一段时间,“Visual Studio 2015 CTP 5”(以下简称CTP5)发布了,CTP5的发布不仅标志着新一代的VisualStudio正式发布又向前迈出了一步,还标志着距离ASP. ...

  6. JNI 备注

    本文记录一个基础的JNI例子及过程中遇到的问题解决. 1.定义一个JAVA类如下: package jnidemo01; public class JniHello { public native v ...

  7. MyBatis3:SQL映射

    前言 前面学习了config.xml,下面就要进入MyBatis的核心SQL映射了,第一篇文章的时候,student.xml里面是这么写的: <?xml version="1.0&qu ...

  8. 感悟 GNU C 以及将 Vim 打造成 C/C++ 的半自动化 IDE

    C 语言在 Linux 系统中的重要性自然是无与伦比.不可替代,所以我写 Linux 江湖系列不可能不提 C 语言.C 语言是我的启蒙语言,感谢 C 语言带领我进入了程序世界.虽然现在不靠它吃饭,但是 ...

  9. 如何开发一款堪比APP的微信小程序(腾讯内部团队分享)

    一夜之间,微信小程序刷爆了行业网站和朋友圈,小程序真的能如张小龙所说让用户"即用即走"吗? 其功能能和动辄几十兆安装文件的APP相比吗? 开发小程序,是不是意味着移动应用开发的一次 ...

  10. Atitit. 提升存储过程与编程语言的可读性解决方案v3 qc25.docx

    Atitit. 提升存储过程与编程语言的可读性解决方案v3 qc25.docx 1. 大原则:分解+命名1 1.1. 命名规范1 1.2. 分层.DI和AOP是继OO1 1.3. 运算符可读性一般要比 ...