js中作用域的实例解析

首先，要了解一下作用域的概念：作用--读、写，域--范围或空间。作用域：可用来进行读、写操作的范围或者空间。

其次，再来看看浏览器读取js文件（script标签内的内容）的步骤。

第一步：预解析-----根据var function 把可能用到的参数或函数找出来，放在内存里（这相当于放到仓库里面）

例1：

<script>
alert(a)
var a=1
function fn1(){alert(2)}
</script>

根据var和function可以找到：a  fn1

预解析的过程中会自动给变量赋值undefined，即：a=undefined;而函数的值就函数本身，即：fn1=function fn1(){alert(2)}

所以预解析后：a = undefined, fn1=function fn1(){alert(2)}

如果函数和变量重名，那么只保留有值的那个。

例2：

<script>
alert(a)
var a=1
function a(){alert(2)}
var a=10
</script>

根据var和function可以找到：a  a  a

预解析的过程中：a=undefined, a=function a(){alert(2)}, a=undefined

预解析之后就只有 a=function a(){alert(2)}

例3：

如果例2中var a=10后面还有一个函数function a(){alert(4)}

那么预解析之后的结果就变成了：a=function a(){alert(4)}。因为后一个有值的会覆盖前一个。

第二步：就是从上而下逐行解读代码了

例4：

首先我们知道下面的代码预解析的结果是：a=function a(){alert(4)}

<script>
alert(a)                //读这一行的时候a=function a(){alert(4)},所以打印出来的是function a(){alert(4)}
var a=1                //读这一的行的是后，是给a重新赋值了，所以a=1
alert(a)                //读这一行的时候a=1,所以打印出来的是1
function a(){alert(2)}     //读这一行的时候，没有对a重新赋值，也不会打印任何东西，因为函数没被调用。
alert(a)               //读这一行的时候a=1,所以打印出来的是1
var a=10             //读这一的行的是后，是给a重新赋值了，所以a=10
alert(a)              //读这一行的时候a=10,所以打印出来的是10
function a(){alert(4)}    //读这一行的时候，没有对a重新赋值，也不会打印任何东西，因为函数没被调用。
alert(a)              //读这一行的时候a=10,所以打印出来的是10
</script>

---------------------上面的内容，帮助去理解预解析的概念，还没有用到“域”。而对于预解析来说，只要遇到一个“域”，就会在这个“域”内发生预解析------------------------

例5：

以下代码预解析：a=undefined,fn1=funciton fn1(){alert(a)var a=2;}，然后开始执行代码

<script>
var a=1     //读到这一行的时，给a赋值，a=1
funciton fn1(){alert(a);var a=2;} //读到这一行的时，什么都没发生
fn1();//读到这一行时，函数被调用。也分为两步
       //1、函数被调用首先进行这个函数域的预解析，并把自己的预解析放在自己的仓库里面。
       //2、逐行解读代码：当读到alert(a)时，函数域的预解析结果为a=undefined，所以打印出undefined。读到var a=2时，将自己预解析的结果变为a=2.
alert(a);//读到这一行的时候a=1,打印出1
</script>

例6：在例5的基础上进行一个小改动，把var a=2改为a=2,则输出的结果又不同。

<script>
var a=1  //a=1
funciton fn1(){alert(a); a=2;}
fn1();  //在函数调用的时候。因为函数内部没有“var”，所以预解析没有结果。当执行函数中的alert（a）,就会到函数外（父域）找a，此时a=1,所以打印出1
         //函数a=2，是给全局变量赋值，所以a=2
alert(a);//因为a=2,所以打印出2
</script>

例7：在例6基础上，改动一下

<script>
var a=1
funciton fn1(a){alert(a); a=2;}
fn1();
alert(a);
</script>

打印出的结果会是：undefined，1。大家自己思考吧。提示：funciton fn1（a）相当于funciton fn1（var a）

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

赞 (0)

相关推荐

  • javascript 函数及作用域总结介绍

    在js中使用函数注意三点:1.函数被调用时,它是运行在他被声明时的语法环境中的: 2.函数自己无法运行,它总是被对象调用的,函数运行时,函数体内的this指针指向调用该函数的对象,如果调用函数时没有明确指定该对象, this 默认指向 window ( strict 模式除外,本文不涉及 strict 模式): 3.函数是一种带有可执行代码的对象类型数据. 一.声明函数 1.使用 function 关键字 复制代码 代码如下: function myfun(a,b){ //声明名为myfun的函

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

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

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

  • Javascript基础回顾之(二) js作用域

    Javascript基础回顾之(二) js作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者那里的一知半解,所以决定先花一些时间整理一下这些基础知识和大家分享. 后面会附上培训用的PPT.刚开始是打算写一篇的,但是后来写着写着就发现越来越多,所以决定还是写一个系列吧.本系列所有内容都是涉及Javascript基础的,没有时髦的玩意儿,但是我相信这些基础的东西会有助于你理解那些有趣的东西的.

  • 网易JS面试题与Javascript词法作用域说明

    调用对象位于作用域链的前端,局部变量(在函数内部用var声明的变量).函数参数及Arguments对象都在函数内的作用域中--这意味着它们隐藏了作用域链更上层的任何同名的属性. 2010年9月14日,我去参加网易网页工程师招聘会,应聘JS工程师职位.有幸参加笔试,然后有幸栽在笔试,呵呵.废话少说,抓出音响极深的一题重新研究研究. 题目大概是:写出如下代码的输出结果并进行分析 复制代码 代码如下: var tt = 'aa'; function test(){ alert(tt); var tt

  • JavaScript的作用域和块级作用域概念理解

    作用域永远都是任何一门编程语言中的重中之重,因为它控制着变量与参数的可见性与生命周期.讲到这里,首先理解两个概念:块级作用域与函数作用域. 什么是块级作用域呢? 任何一对花括号({和})中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域. 函数作用域就好理解了(*^__^*) ,定义在函数中的参数和变量在函数外部是不可见的. 大多数类C语言都拥有块级作用域,JS却没有.请看下文demo: //C语言 #include <stdio.h> void mai

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

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

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

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

  • JS作用域闭包、预解释和this关键字综合实例解析

    本文实例分析了JS作用域闭包.预解释和this关键字.分享给大家供大家参考,具体如下: var number = 2; var obj = {number : 5, fn1 : ( function() { this.number *= 2; number=number*2; var number=3; return function() { this.number *= 2; number*=3; alert(number); } } )() }; var fn1 = obj.fn1; ale

  • 微信小程序本作用域下调用全局JS详解及实例

    微信小程序本作用域下调用全局JS详解 本地wxml文件 <view> app版本:{{version}} </view> 本地js文件 var app; Page({ data:{ }, onLoad:function() { app = getApp(); this.setData({version:app.globalData.appName}); } }) 全局js文件 //app.js App({ globalData:{ appName:"hcoder"

  • js中作用域的实例解析

    首先,要了解一下作用域的概念:作用--读.写,域--范围或空间.作用域:可用来进行读.写操作的范围或者空间. 其次,再来看看浏览器读取js文件(script标签内的内容)的步骤. 第一步:预解析-----根据var function 把可能用到的参数或函数找出来,放在内存里(这相当于放到仓库里面) 例1: <script> alert(a) var a=1 function fn1(){alert(2)} </script> 根据var和function可以找到:a  fn1 预解

  • Angular.js之作用域scope'@','=','&'实例详解

    什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执行环境.作用域有层次结构,这个层次和相应的 DOM 几乎是一样的.作用域能监控表达式和传递事件. 在 HTML 代码中,一旦一个 ng-app 指令被定义,那么一个作用域就产生了,由 ng-app 所生成的作用域比较特殊,它是一个根作用域($rootScope),它是其他所有$Scope 的最顶层. 除了用 ng-app 指令可以产生一个作用域之外,其他的指令如 ng-controller,ng-repeat

  • xtemplate node.js 的使用方法实例解析

    工程下安装XTemplate并使用它的方法实例说明: 1.安装xtpl 复制代码 代码如下: npm install xtpl xtemplate --save 2.在views目录添加test.xtpl文件,其内容为 this is {{title}}! 4.集成到Express中,只需要在app.js中,设置模板引擎即可 var print = require('./routes/print'); //此行代码放入app.js的require 声明代码段下边 app.set('view en

  • JS数据类型STRING使用实例解析

    这篇文章主要介绍了JS数据类型STRING使用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 转换为字符串 var num = 10 num.toString(); //"10" 转换为字符串-参数表示几进制的字符串 var stringValue = "hello world"; stringValue.length; //"11" 读取长度 读取字符串指定位置的字符 //下面两行可以

  • JS中的多态实例详解

    多态在面向对象编程语言中是十分重要的.在JAVA中是通过继承来得到多态的效果.如下: public abstract class Animal { abstract void makeSound(); // 抽象方法 } public class Chicken extends Animal{ public void makeSound(){ System.out.println( "咯咯咯" ); } } public class Duck extends Animal{ publi

  • 基于js中document.cookie全面解析

    什么是cookie? cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值. 设置cookie 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="userId=828"; document.cookie看上去就像一个属性,可以赋不同的值.但它和一般的属性不一样,改变它的赋值并不

  • Python中property属性实例解析

    本文主要讲述的是对Python中property属性(特性)的理解,具体如下. 定义及作用: 在property类中,有三个成员方法和三个装饰器函数. 三个成员方法分别是:fget.fset.fdel,它们分别用来管理属性访问: 三个装饰器函数分别是:getter.setter.deleter,它们分别用来把三个同名的类方法装饰成property. fget方法用来管理类实例属性的获取,fset方法用来管理类实例属性的赋值,fdel方法用来管理类实例属性的删除: getter装饰器把一个自定义类

  • Java中后台线程实例解析

    本文研究的主要是Java中后台线程的相关问题,具体介绍如下. 以前从来没有听说过,java中有后台线程这种东西.一般来说,JVM(JAVA虚拟机)中一般会包括俩种线程,分别是用户线程和后台线程.所谓后台线程(daemon)线程指的是:在程序运行的时候在后台提供的一种通用的服务的线程,并且这种线程并不属于程序中不可或缺的部分.因此,当所有的非后台线程结束的时候,也就是用户线程都结束的时候,程序也就终止了.同时,会杀死进程中的所有的后台线程.反过来说,只要有任何非后台线程还在运行,程序就不会结束.不

  • JS中作用域以及变量范围分析

    变量作用域 js作为一门脚本语言,他与c,java这些语言是不相同的. 全局变量 在js中声明全局变量,有下面几种方式: 1.在函数外通过var来声明. var test ="hello"; console.log(test); function a(){ test="xx"; console.log(test); } a(); console.log(test); 结果: hello xx xx 这种方式通过声明的变量在任何地方都可进行修改和使用. 2.在函数中隐

  • Node.js 中如何收集和解析命令行参数

    Node.js 中如何收集和解析命令行参数

    前言 在开发 CLI(Command Line Interface)工具的业务场景下,离不开命令行参数的收集和解析. 接下来,本文介绍如何收集和解析命令行参数. 收集命令行参数 在 Node.js 中,可以通过 process.argv 属性收集进程被启动时传入的命令行参数: // ./example/demo.js process.argv.slice(2); // 命令行执行如下命令 node ./example/demo.js --name=xiaoming --age=20 man //

随机推荐