全局预处理与执行,作用域与作用域链

一.全局预处理

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>全局预处理:首先会创建一个词法环境(Lexical Environment),然后扫面全局里用var声明的变量和
用声明的方式创建的函数即function xxx(){代码段}</p>
<p>函数表达式即var q=function(){代码段}</p>
<p>扫描后把变量存入写成 a:undefined  把函数写成 xxx:指向函数或对函数的一个引用</p>
<script>
alert(a);
alert(b);
alert(c);
alert(f);
//alert(d);//此处d弹出报错d为未定义undefined,影响后续,故注释掉
var a=1;
var b;
d=5;
alert(d);
function f(){
console.log('ff');
}
var c=function (){//此时由于使用函数表达式创建的函数,所以可以当作用var声明的变量
console.log('ccc');
}
</script>
</body>
</html>

二.全局预处理与执行

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>js会从上往下扫描解读js代码</p>
<p>预处理扫描阶段:先扫描var=a变量并js解析器储存为a:undefined,和声明的函数存为d:指向函数的引用。此时扫描完后即几个alert都
弹出过后,遇到var a=1;则此时将先前存的undefined改为值1</p>
<p>执行阶段:与预处理不同,直接扫描到c=2就直接存入显示c:2</p>
<script>
alert(a);
alert(b);//在c处会因扫描不到报错未定义而停止,故将其先注释
//alert(c);
        alert(d);
alert(e);
var a=1;
var b;
c=2;
alert(c);
function d(){
console.log('ddd');
}
var e=function(){
consolu.log('eee');
}
</script>
</body>
</html>

 

三.函数预处理与执行

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>对于函数的预处理与执行:首先会扫描函数的参数,再函数内部声明式函数,再内部var变量</p>
<p>所以下面的首先词法环境会存入参数a:1,b:2(因为参数已经传入所以先扫描存入参数,若形参两个为ab,而实参传入一个
则第二个参数值为undefined) </p>
<p>之后预处理,则函数内部声明的函数命名与之前的参数冲突,函数覆盖,故此时a由值1变为指向函数的引用,同时内
部var声明的变量也有冲突为忽略,则b值依旧为2</p>
<p>预处理结束后执行阶段:此时弹出的a为函数的引用,b为2</p>
<script>
function f(a,b){
alert(a);
alert(b);
var b=100;
function a(){
console.log('gggg');
}
}
f(1,2);
</script>
</body>
</html>

四.变量与函数命名冲突

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>函数为第一优先级,碰到函数命名与其他有冲突会覆盖,碰到变量与其他有冲突会忽略</p>
<script>
alert(a);
var a=1;//此处处理变量和函数冲突与前后顺序无关,均为函数优先
function a(){
console.log('fff');
}
function a(){//处理两函数冲突则后者函数会覆盖函数
console.log('ggg');
}
</script>
</body>
</html>

五.作用域

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>js不是块作用域,也无动态作用域,js是词法作用域也可称为静态作用域或者闭包</p>
<p>创建函数时给函数添加一个成员scope</p>
<script>
var x=10;
function ff(){//(js解析器从上到下解析时)给函数添加一个scope==创建函数时的词法环境==window
alert(x);//此处解析出要弹出一个变量x,而ff函数未定义x,所以去其scope找也未找到再去window找,
// window全局也没有,所以此时报错,改进方法为添加全局变量var x=10;即可
        }
function ff1(){
var x=9;
ff();//在此处掉用函数执行时创建一个自己的词法环境  与  scope关联起来(而scope==window)
        }
function ff2(){
var x=8;
ff();
}
ff1();//改进后弹出10
</script>
</body>
</html>

六.作用域链

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function f(){//f在js解析器从上到下解析时创建的scope(作用域) == window
//f被调用时创建自己的词法环境(Lexical Environment)  与  f的scope(作用域)关联起来
var x=10;//把x=10加入f的Lx中
function g(){//创建函数g时的scope(作用域) == f的词法环境(Lx),即创建时预处理会把变量和函数都加入f的此法环境中
//g运行时g会创建自己的词法环境(Lx)== g的scope(作用域)
            }
g();//调用g函数
        }
//作用域链为 :g(Lx)-->g[scope]-->f(Lx)-->f[scope]-->window
</script>
</body>
</html>

七.有关new Function

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>创建函数的方式</p>
<p>第一:function f(){代码段}。常用</p>
<p>第二:var g = function (){代码段}。常用</p>
<p>另第二:var g = function f(argument){代码段}。此处f访问不到不常用</p>
<p>第三:var g = new Function ("参数","函数体")</p>
<p>像之前所说的作用域链,用new Function创建的函数作用域永远指向全局,而不是父函数</p>
<script>
//第一种情况
function f(){
var x=10;
var g=function (){
alert(x);
}
g();
}
f();//由于作用域链原因最终结果弹出10
//第二种情况
//        var x=100;
//        function f (){
//            var x=10;
//            var g = new Function ("","alert(x)");
//            g();
//        }
//        f();//由于用new Function创建的函数作用域永远指向全局,而不是父函数,故只有在全局声明x才能弹出值
</script>
</body>
</html>

 八.作用域用途

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>作用域用途:信息隐藏,减少全局变量及其命名冲突的发生</p>
<p>为了减少全局变量,将全局变量放入一个匿名立即调用函数</p>
<script>
(function(){//(function(){})()为自调用函数
var a=10;
var b=20;//将ab设为局部变量
function f(){
alert(a);
}
window.f=f;
})();
f();//可以在外部调用f函数,但是不能在外部访问ab变量,而且局部变量ab不会被垃圾回收机制回收
</script>
</body>
</html>

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/363115.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2090. 「ZJOI2016」旅行者 分治,最短路

2090. 「ZJOI2016」旅行者 链接 loj 思路 \((l,mid)(mid1,r)\).考虑跨过mid的贡献。 假设选的中间那条线的点为gzy,贡献为\(dis(x,gzy)dis(gzy,y)\) 那就计算n遍最短路,一次分治为\(n^2mlog{nm}\) 设Sn*m.矩阵的长度是不定的&#xff0c;每次取最长的边进行分治是最好的&#x…

Xshell连接Linux慢问题解决办法

由于各种原因&#xff0c;经常更换网络环境&#xff0c;然后发现&#xff0c;每次更换网络环境后&#xff0c;xshell连接虚拟机的rhel或者CentOS都几乎是龟速.... 今天专门查了一下解决方案&#xff1a; 原来是ssh的服务端在连接时会自动检测dns环境是否一致导致的&#xff0c;…

Gradle入门:依赖管理

即使不是没有可能&#xff0c;创建没有任何外部依赖关系的现实应用程序也是一项挑战。 这就是为什么依赖性管理是每个软件项目中至关重要的部分的原因。 这篇博客文章描述了我们如何使用Gradle管理项目的依赖关系。 我们将学习配置已使用的存储库和所需的依赖项。 我们还将通过…

牛客NOIP暑期七天营-提高组1

牛客NOIP暑期七天营-提高组1 链接 A 边权可为0就排序建一条链子。 但是边权不为0 除了第一个有0的不行。 x连向上一个比他小的数。 期间判断有无解。 #include <bits/stdc.h> #define ll long long using namespace std; const int _2e57; int read() {int x0,f1;char sg…

BZOJ.4009.[HNOI2015]接水果(整体二分 扫描线)

LOJBZOJ洛谷 又是一个三OJ rank1&#xff01;w \(Description\) &#xff08;还是感觉&#xff0c;为啥非要出那种题目背景啊-直接说不好么&#xff09; 给定一棵树和一个路径集合&#xff08;每条路径有一个权值&#xff09;。\(Q\)次询问&#xff0c;每次询问给定一条路径&am…

HTML5常用标签及特殊字符表

*http://html5doctor.com/nav*http://html5doctor.com/article*http://html5doctor.com/section*http://html5doctor.com/asidehttp://html5doctor.com/divhttp://html5doctor.com/figurehttp://html5doctor.com/outlinehttp://html5doctor.com/semantics p 和 span 的理解 p标…

【转载】使用Imaging组件加载GIF动画

Mobil手机加载GIF动态图像的方法有两种&#xff0c;一个就是使用GIF89a标准算法&#xff0c;另一个就是使用SDK自带的Imaging组件&#xff0c;这两种方法是很典型的手机图像处理技术的实践。使用Imaging组件加载GIF比使用标准算法处理高效的多&#xff0c;特别是在处理真彩GIF动…

在Java中获取素数的无限列表

一个常见的问题是确定数字的素因式分解。 蛮力方法是审判部门&#xff08; 维基百科 &#xff0c; 可汗学院 &#xff09;&#xff0c;但是如果必须考虑多个数字&#xff0c;这需要大量的浪费工作。 一种广泛使用的解决方案是Eratosthenes筛&#xff08; 维基百科 &#xff0c…

CF888G XOR-MST trie,贪心

CF888G XOR-MST 链接 CF888G 思路 trie上贪心&#xff0c;先左右两边连边&#xff0c;再用一条边的代价连起左右两颗树。因为内部的边一定比跨两棵树的边权笑&#xff0c;显然是对的。 代码自己瞎yy的。启发式合并 代码 #include <bits/stdc.h> #define ll long long usi…

【处理手记】Configuration system failed to initialize异常的另类原因

有个c#程序在某台电脑上&#xff0c;执行某个操作时&#xff0c;总是会报如图错误&#xff1a; 度娘一番&#xff0c;发现市面上常见的原因是配置文件中的特定节点的位置不对&#xff0c;或者配置文件损坏等等&#xff0c;而这个程序根本没有使用内置的配置文件方案&#xff0c…

学习《Building Applications with FME Objects》 之四 从数据集读取要素

FMEOReader可以访问任何支持格式的数据。 FMEOReader返回两类要素&#xff1a;schema&#xff08;模式&#xff09;要素和数据要素&#xff0c;模式要素用于描述数据集模型。每种支持的格式都有一个模式&#xff0c;一个模式要素是一类要素的数据模型&#xff0c;模式要素描述属…

使用Zapier将应用程序与Neo4j集成

最近&#xff0c;我被带往Zapier &#xff0c;以便在系统之间完成一些轻量级的集成&#xff0c;以快速地进行概念验证。 最初是持怀疑态度的&#xff0c;我发现它确实可以节省时间&#xff0c;并将您从未集成过的系统所有部分捆绑在一起。 而且&#xff0c;这是人们集成他们使…

手机闪屏

表示&#xff0c;本人买了一个华为手机&#xff0c;采用三四个月&#xff0c;就开始闪屏了&#xff0c;手机一划屏就闪&#xff0c;开始的时候表示不能理解&#xff0c;不是手机一般是1年才换吗&#xff1f;突然遇到我也是纠结。 于是乎&#xff0c;浏览了些百度上面的解决方式…

工程能力之C4模型

概述 刚在InfoQ上看到一篇介绍C4Model的文章,觉得这个模型设计的很赞,很有指导意义,做个简单的记录. Why,为什么需要架构图? ThoughtWorks中国 文章中有几句话我觉得很有道理,这里直接摘抄. “纸上的不是架构&#xff0c;每个人脑子里的才是” ; “那些精妙的方案之所以落不了…

[silverlight基础]仿文字连接跑马灯效果-高手绕道

运行效果如下:分析示意图&#xff1a;代码:1<Canvas x:Name"a"Background"AliceBlue"MouseEnter"a_MouseEnter"MouseLeave"a_MouseLeave"Cursor"Hand">2<Canvas.Clip>3<RectangleGeometry RadiusX"0&qu…

Hibernate脏检查的剖析

介绍 持久性上下文使实体状态转换进入队列&#xff0c;该实体状态转换在刷新后转换为数据库语句。 对于托管实体&#xff0c;Hibernate可以代表我们自动检测传入的更改并安排SQL UPDATE。 这种机制称为自动脏检查 。 默认的脏检查策略 默认情况下&#xff0c;Hibernate检查所有…

http GET 和 POST 请求的优缺点、区别以及误区

原文章&#xff1a;https://blog.csdn.net/qq_28483283/article/details/80207674 请优先参考原文章 Get和Post在面试中一般都会问到&#xff0c;一般的区别&#xff1a; &#xff08;1&#xff09;post更安全&#xff08;不会作为url的一部分&#xff0c;不会被缓存、保存在服…

软件工程第二次作业-VSTS单元测试

一、选择开发工具 开发工具选择 Visual studio 2017 社区版&#xff0c;开发语言为C 由于之前已经安装完毕&#xff0c;所以不上传安装过程&#xff0c;主界面如下&#xff1a; 二、练习自动单元测试 使用的测试工具是VSTS&#xff0c;具体步骤如下&#xff1a; 1.编写一个判断…

随便写写(8)

凌晨两点了&#xff0c;还在捣鼓虚拟机&#xff0c;教师节老师们吃不上饭&#xff0c;罪过可就大了。远程有点慢&#xff0c;还遇到个小问题&#xff0c;.netfx 3.5几次都没装上&#xff0c;看了下日志&#xff0c;好像是ghost里的.netfx 2.0有问题&#xff0c;想卸载之&#x…

React后台管理系统-登录页面

登录页面 <div className"col-md-4 col-md-offset-4"> <div className"panel panel-default login-panel"> <div className"panel-heading">欢迎登录 - MMALL管理系统</div> <div className"panel-body"&g…