JS 作用域与作用域链详解
（1）作用域
一个变量的作用域（scope）是程序源代码中定义的这个变量的区域。
1. 在JS中使用的是词法作用域（lexical scope)
不在任何函数内声明的变量（函数内省略var的也算全局）称作全局变量（global scope）
在函数内声明的变量具有函数作用域（function scope），属于局部变量
局部变量优先级高于全局变量
var name="one";
function test(){
var name="two";
console.log(name); //two
}
test();
函数内省略var的，会影响全局变量，因为它实际上已经被重写成了全局变量
var name="one";
function test(){
name="two";
}
test();
console.log(name); //two
函数作用域，就是说函数是一个作用域的基本单位，js不像c/c++那样具有块级作用域 比如 if for 等
function test(){
for(var i=0;i<10;i++){
if(i==5){
var name = "one";
}
}
console.log(name); //one
}
test(); //因为是函数级作用域，所以可以访问到name="one"
当然了，js里边还使用到了高阶函数，其实可以理解成嵌套函数
function test1(){
var name = "one";
return function (){
console.log(name);
}
}
test1()();
test1()之后将调用外层函数，返回了一个内层函数，再继续()，就相应调用执行了内层函数，所以就输出 ”one"
嵌套函数涉及到了闭包，后面再谈..这里内层函数可以访问到外层函数中声明的变量name，这就涉及到了作用域链机制
2. JS中的声明提前
js中的函数作用域是指在函数内声明的所有变量在函数体内始终是可见的。并且，变量在声明之前就可以使用了，这种情况就叫做声明提前（hoisting)
tip:声明提前是在js引擎预编译时就进行了，在代码被执行之前已经有声明提前的现象产生了
比如
var name="one";
function test(){
console.log(name); //undefined
var name="two";
console.log(name); //two
}
test();
上边就达到了下面的效果
var name="one";
function test(){
var name;
console.log(name); //undefined
name="two";
console.log(name); //two
}
test();
再试试把var去掉？这是函数内的name已经变成了全局变量，所以不再是undefined
var name="one";
function test(){
console.log(name); //one
name="two";
console.log(name); //two
}
test();
3. 值得注意的是，上面提到的都没有传参数，如果test有参数，又如何呢？
function test(name){
console.log(name); //one
name="two";
console.log(name); //two
}
var name = "one";
test(name);
console.log(name); // one
之前说过，基本类型是按值传递的，所以传进test里面的name实际上只是一个副本，函数返回之后这个副本就被清除了。
千万不要以为函数里边的name="two"把全局name修改了，因为它们是两个独立的name
（2）作用域链
上面提到的高级函数就涉及到了作用域链
function test1(){
var name = "one";
return function (){
console.log(name);
}
}
test1()();
1. 引入一大段话来解释：
每一段js代码（全局代码或函数）都有一个与之关联的作用域链（scope chain）。
这个作用域链是一个对象列表或者链表，这组对象定义了这段代码中“作用域中”的变量。
当js需要查找变量x的值的时候（这个过程称为变量解析（variable resolution）），它会从链的第一个对象开始查找，如果这个对象有一个名为x的属性，则会直接使用这个属性的值，如果第一个对象中没有名为x的属性，js会继续查找链上的下一个对象。如果第二个对象依然没有名为x的属性，则会继续查找下一个，以此类推。如果作用域链上没有任何一个对象含有属性x，那么就认为这段代码的作用域链上不存在x，并最终抛出一个引用错误（ReferenceError）异常。
2. 作用域链举例：
在js最顶层代码中（也就是不包括任何函数定义内的代码），作用域链由一个全局对象组成。
在不包含嵌套的函数体内，作用域链上有两个对象，第一个是定义函数参数和局部变量的对象，第二个是全局对象。
在一个嵌套的函数体内，作用域上至少有三个对象。
3. 作用域链创建规则：
当定义一个函数时（注意，是定义的时候就开始了），它实际上保存一个作用域链。
当调用这个函数时，它创建一个新的对象来储存它的参数或局部变量，并将这个对象添加保存至那个作用域链上，同时创建一个新的更长的表示函数调用作用域的“链”。
对于嵌套函数来说，情况又有所变化：每次调用外部函数的时候，内部函数又会重新定义一遍。因为每次调用外部函数的时候，作用域链都是不同的。内部函数在每次定义的时候都要微妙的差别---在每次调用外部函数时，内部函数的代码都是相同的，而且关联这段代码的作用域链也不相同。
（tip: 把上面三点理解好，记住了，最好还要能用自己的话说出来，不然就背下来，因为面试官就直接问你：请描述一下作用域链...)
举个作用域链的实用例子：
var name="one";
function test(){
var name="two";
function test1(){
var name="three";
console.log(name); //three
}
function test2(){
console.log(name); // two
}
test1();
test2();
}
test();
上边是个嵌套函数，相应的应该是作用域链上有三个对象
那么在调用的时候，需要查找name的值，就在作用域链上查找
当成功调用test1()的时候，顺序为 test1()->test()->全局对象window 因为在test1()上就找到了name的值three，所以完成搜索返回
当成功调用test1()的时候，顺序为 test2()->test()->全局对象window 因为在test2()上没找到name的值，所以找test()中的，找到了name的值two,就完成搜索返回
还有一个例子有时候我们会犯错的，面试的时候也经常被骗到。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function buttonInit(){
for(var i=1;i<4;i++){
var b=document.getElementById("button"+i);
b.addEventListener("click",function(){
alert("Button"+i); //都是 Button4
},false);
}
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>
为什么？
根据作用域链中变量的寻找规则：
b.addEventListener("click",function(){
alert("Button"+i);
},false);
这里有一个函数，它是匿名函数，既然是函数，那就在作用域链上具有一个对象，这个函数里边使用到了变量i，它自然会在作用域上寻找它。
查找顺序是 这个匿名函数 -->外部的函数buttonInit() -->全局对象window
匿名函数中找不到i,自然跑到了buttonInit(), ok,在for中找到了，
这时注册事件已经结束了，不要以为它会一个一个把i放下来，因为函数作用域之内的变量对作用域内是一直可见的，就是说会保持到最后的状态
当匿名函数要使用i的时候，注册事件完了，i已经变成了4，所以都是Button4
那怎么解决呢？
给它传值进去吧，每次循环时，再使用一个匿名函数，把for里边的i传进去，匿名函数的规则如代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function buttonInit(){
for(var i=1;i<4;i++){
(function(data_i){
var b=document.getElementById("button"+data_i);
b.addEventListener("click",function(){
alert("Button"+data_i);
},false);
})(i);
}
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>
这样就可以 Button1..2..3了
4.上述就是作用域链的基本描述，另外，with语句可用于临时拓展作用域链（不推荐使用with）
语法形如：
with(object)
statement
这个with语句，将object添加到作用域链的头部，然后执行statement,最后把作用域链恢复到原始状态
简单用法：
比如给表单中各个项的值value赋值
一般可以我们直接这样
var f = document.forms[0];
f.name.value = "";
f.age.value = "";
f.email.value = "";
引入with后(因为使用with会产生一系列问题，所以还是使用上面那张形式吧）
with(document.forms[0]){
f.name.value = "";
f.age.value = "";
f.email.value = "";
}
另外，假如 一个对象o具有x属性，o.x = 1;
那么使用
with(o){
x = 2;
}
就可以转换成 o.x = 2;
假如o没有定义属性x，它的功能就只是相当于 x = 2; 一个全局变量罢了。
因为with提供了一种读取o的属性的快捷方式，但他并不能创建o本身没有的属性。
以上所述就是本文的全部内容了，希望能够对大家学习javascript有所帮助。
相关推荐
-
深入理解JavaScript高级之词法作用域和作用域链
主要内容:1.分析JavaScript的词法作用域的含义 2.解析变量的作用域链 3.变量名提升时什么 最近在传智播客讲解JavaScript的课程,有不少朋友觉得JavaScript是如此的简单,但是又如此的不知如何使用,因此我准备了一些内容给大家分享一下. 这个系列主要讲解JavaScript的高级部分的内容,包括作用域链.闭包.函数调用模式.原型以及面向对象的一些东西. 在这里不包含JavaScript的基本语法,如果需要了解基础的同学可以到http://net.itcast.cn里面去下
-
js 函数的执行环境和作用域链的深入解析
第一步. 定义后:每个已定义函数,都有一个内在属性[scope],其对应一个对象的列表,列表中的对象仅能内部访问. 例如:建立一个全局函数A,那么A的[Scope]内部属性中只包含一个全局对象(Global Object),而如果我们在A中创建一个新的函数B,那么B的[Scope]属性中就包含两个对象,函数A的Activation Object对象在前面,全局对象(Global Object)排在后面. 简而言之,一个函数的[Scope]属性中对象列表的顺序是上一层函数的Activation O
-
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
函数表达式 1.JavaScript中定义函数有2钟方法: 1-1.函数声明: 复制代码 代码如下: function funcName(arg1,arg2,arg3){ //函数体} ①name属性:可读取函数名.非标准,浏览器支持:FF.Chrome.safari.Opera. ②函数声明提升:指执行代码之前会先读取函数声明.即函数调用可置于函数声明之前. 1-2.函数表达式: 复制代码 代码如下: var funcName = function(arg1,arg2,arg3){ //函
-
JavaScript中的作用域链和闭包
作用域 全局作用域 局部作用域 作用域链 执行上下文 活动对象 闭包 闭包优化 JavaScript中出现了一个以前没学过的概念--闭包.何为闭包?从表面理解即封闭的包,与作用域有关.所以,说闭包以前先说说作用域. 作用域(scope) 通常来说一段程序代码中使用的变量和函数并不总是可用的,限定其可用性的范围即作用域,作用域的使用提高了程序逻辑的局部性,增强程序的可靠性,减少名字冲突. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥有全局作用域,以下几种情形拥有全局作
-
javascript 作用于作用域链的详解
javascript 作用于作用域链的详解 一.JavaScript作用域 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域: (1)最外层函数和在最外层函数外面定义的变量拥有全局作用域, 例如: var authorName="Bu
-
js作用域及作用域链概念理解及使用
(1)作用域 一个变量的作用域(scope)是程序源代码中定义的这个变量的区域. 1. 在JS中使用的是词法作用域(lexical scope) 不在任何函数内声明的变量(函数内省略var的也算全局)称作全局变量(global scope) 在函数内声明的变量具有函数作用域(function scope),属于局部变量 局部变量优先级高于全局变量 var name="one"; function test(){ var name="two"; console.log
-
javascript从作用域链谈闭包
神马是闭包 关于闭包的概念,是婆说婆有理. 闭包是指有权访问另外一个函数作用域中的变量的函数 这概念有点绕,拆分一下.从概念上说,闭包有两个特点: 1.函数 2.能访问另外一个函数作用域中的变量 在ES 6之前,Javascript只有函数作用域的概念,没有块级作用域(但catch捕获的异常 只能在catch块中访问)的概念(IIFE可以创建局部作用域).每个函数作用域都是封闭的,即外部是访问不到函数作用域中的变量. function getName() { var name = "美女的名字&
-
JS难点同步异步和作用域与闭包及原型和原型链详解
目录 JS三座大山 同步异步 同步异步区别 作用域.闭包 函数作用域链 块作用域 闭包 闭包解决用var导致下标错误的问题 投票机 闭包两个面试题 原型.原型链 原型对象 原型链 完整原型链图 JS三座大山 同步异步 前端中只有两个操作是异步的: 定时器异步执行; ajax异步请求 编译器解析+执行代码原理: 1.编译器从上往下逐一解析代码 2.判断代码是同步还是异步 同步:立即执行 异步:不执行.放入事件队列池 3.等所有同步执行完毕开始执行异步 同步异步区别 api : 异步有回调,同步没有
-
JavaScript三大重点同步异步与作用域和闭包及原型和原型链详解
目录 1. 同步.异步 2. 作用域.闭包 闭包 作用域 3. 原型.原型链 原型(prototype) 原型链 如图所示,JS的三座大山: 同步.异步 作用域.闭包 原型.原型链 1. 同步.异步 JavaScript执行机制,重点有两点: JavaScript是一门单线程语言 Event Loop(事件循环)是JavaScript的执行机制 JS为什么是单线程 最初设计JS是用来在浏览器验证表单操控DOM元素的是一门脚本语言,如果js是多线程的,那么两个线程同时对一个DOM元素进行了相互冲突
-
基于ES6作用域和解构赋值详解
ES6 强制开启严格模式 作用域 •var 声明局部变量,for/if花括号中定义的变量在花括号外也可访问 •let 声明的变量为块作用域,变量不可重复定义 •const 声明常量,块作用域,声明时必须赋值,不可修改 // const声明的k指向一个对象,k本身不可变,但对象可变 function test() { const k={ a:1 } k.b=3; console.log(k); } test()解构赋值 { let a, b, 3, rest; [a, b, c=3]=[1, 2]
-
基于Python函数的作用域规则和闭包(详解)
作用域规则 命名空间是从名称到对象的映射,Python中主要是通过字典实现的,主要有以下几个命名空间: 内置命名空间,包含一些内置函数和内置异常的名称,在Python解释器启动时创建,一直保存到解释器退出.内置命名实际上存在于一个叫__builtins__的模块中,可以通过globals()['__builtins__'].__dict__查看其中的内置函数和内置异常. 全局命名空间,在读入函数所在的模块时创建,通常情况下,模块命名空间也会一直保存到解释器退出.可以通过内置函数globals()
-
Java开发学习之Bean的作用域和生命周期详解
目录 一.Bean 的作用域 二.Spring 的执行流程 三.Bean 的生命周期 一.Bean 的作用域 在之前学习Java基础的时候,有接触到作用域这样的概念.一个变量并不一定在任何区域都是有效的,限定这个变量的可用性的代码范围就是该变量的作用域. 但是在这里 Bean 的作用域的概念和以前所认为的作用域有所不同. Bean 的作用域是指 Bean 在 Spring 整个框架中的某种行为模式. 接下来,将会举一个案例来讲讲什么是作用域,什么是行为模式 案例概要: 创建一个共有的 Bean
-
vue.js+boostrap项目实践(案例详解)
一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3
-
JavaScript知识点总结(十一)之js中的Object类详解
JavaScript中的Object对象,是JS中所有对象的基类,也就是说JS中的所有对象都是由Object对象衍生的.Object对象主要用于将任意数据封装成对象形式. 一.Object类介绍 Object类是所有JavaScript类的基类(父类),提供了一种创建自定义对象的简单方式,不再需要程序员定义构造函数. 二.Object类主要属性 1.constructor:对象的构造函数. 2.prototype:获得类的prototype对象,static性质. 三.Object类主要方法 1
-
JavaScript原型链详解
目录 1.构造函数和实例 2.属性Prototype 3.属性__proto__ 4.访问原型上的方法 5.构造函数也有__proto__ 6.构造函数的原型也有__proto__ 7.Object.prototype这个原型对象很特殊 8.总结 1.构造函数和实例 假设你声明一个方法叫做Foo() ,那么我们可以通过new Foo()来声明实例. function Foo() { console.log("我是一个构造方法"); } const f1 = new Foo(); 现在你
-
JS中多种方式创建对象详解
1.内置对象创建 var girl=new Object(); girl.name='hxl'; console.log(typeof girl); 2.工厂模式,寄生构造函数模式 function Person(name){ var p=new Object();//内部进行实例化 p.name=name; p.say=function(){ console.log('my name is '+ p.name); } return p;//注:一定要返回 } var girl=Person('
-
Node.js+Express配置入门教程详解
Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V8引 擎执行Javascript的速度非常快,性能非常好.Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好.Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型