javascript中的作用域和闭包详解
一、JavaScript作用域
JavaScript变量实际上只有两种作用域，全局变量和函数的内部变量。在函数内部任何一个地方定义的变量(var scope)其作用域都是整个函数体。
全局变量：指的是window对象下的对象属性。
作用域划分：基于上下文，以函数进行划分的，而不是由块划分的。
强调两点：
1. 在同一作用域中，JavaScript是允许变量的重复定义，并且后一个定义将覆盖前一个定义。
2. 函数内部如果不加关键字var而定义的变量，默认为全局变量。
var scope="global";
function t(){
console.log(scope); //"global"
scope="local"
console.log(scope); //"local"
}
t();
console.log(scope); //"local"
var scope="global";
function t(){
console.log(scope); //"undefined"
var scope="local"
console.log(scope); //"local"
}
t();
console.log(scope); //"global"
在变量解析过程中首先查找局部的作用域，然后查找上层作用域。在第一段代码的函数当中没有定义变量scope，于是查找上层作用域（全局作用域），进而进行输出其值。但是在第二段代码的函数内定义了变量scope（无论是在console之后还是之前定义变量，都认为在此作用域拥有变量scope），于是不再向上层的作用域进行查找，直接输出scope。但是不幸的是此时的局部变量i并没有赋值，所以输出的是undefined。
//所以根据函数作用域的意思，可以将上述第二段代码重写如下：
var scope="global";
function t(){
var scope;
console.log(scope);
scope="local"
console.log(scope);
}
t();
由于函数作用域的特性，局部变量在整个函数体始终是由定义的，我们可以将变量声明”提前“到函数体顶部。
var b; //第1步
function fun(){
b = "change";
}
alert(b);//输出undefined，由于第1步只定义未赋值
var b; //第1步
function fun(){
b = "change";
}
fun(); //调用上述函数
alert(b); //输出change
当使用var声明一个变量时，创建的这个属性是不可配置的，也就是说无法通过delete运算符删除。
二、作用域实例
<html>
<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);}，false);
}
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>
当注册事件结束后，i的值为4，当点击按钮时，事件函数即function(){ alert("Button"+i);}这个匿名函数中没有i，根据作用域链，所以到buttonInit函数中找，此时i的值为4，所以弹出”button4“。
三、javaScript闭包
在js中，闭包主要涉及到js的几个其他的特性：作用域链，垃圾(内存)回收机制，函数嵌套，等等。
1. 作用域链：简单来说，作用域链就是函数在定义的时候创建的，用于寻找使用到的变量的值的一个索引，而他内部的规则是，把函数自身的本地变量放在最前面，把自身的父级函数中的变量放在其次，把再高一级函数中的变量放在更后面，以此类推直至全局对象为止。当函数中需要查询一个变量的值的时候，js解释器会去作用域链去查找，从最前面的本地变量中先找，如果没有找到对应的变量，则到下一级的链上找，一旦找到了变量，则不再继续。如果找到最后也没找到需要的变量，则解释器返回undefined。
2. Javascript的垃圾回收机制：在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因。构建一个闭包，这些变量将不会被内存回收器所回收，只有当内部的函数不被调用以后，才会销毁这个闭包，而没有任何一个闭包引用的变量才会被下一次内存回收启动时所回收。
3. 有了闭包,嵌套的函数结构才可以运作
四、利用js闭包实现循环绑定事件
<html>
<head>
<title>闭包</title>
</head>
<body>
<ul id="list">
<li>第1条记录</li>
<li>第2条记录</li>
<li>第3条记录</li>
<li>第4条记录</li>
<li>第5条记录</li>
<li>第6条记录</li>
</ul>
<script type="text/javascript">
function tt(nob) {
this.clickFunc = function() {
alert("这是第" + (nob + 1) + "记录");
}
}
var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组
for (var i = 0; i<= list_obj.length; i++){
console.log(list_obj[i])
list_obj[i].onmousemove = function(){
this.style.backgroundColor = "#cdcdcd";
}
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#FFFFFF";
}
//list_obj[i].onclick = function() {
// alert("这是第" + i + "记录"); //不能正常获取 alert出来的都是：“这是第6记录”
//}
var col = new tt(i); //调用tt函数
list_obj[i].onclick = col.clickFunc; //执行clickFunc函数
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
相关推荐
-
浅谈JavaScript中的作用域和闭包问题
JavaScript的作用域以函数为界,不同的函数拥有相对独立的作用域.函数内部可以声明和访问全局变量,也可以声明局部变量(使用var关键字,函数的参数也是局部变量),但函数外部无法访问内部的局部变量: function test() { var a = 0; // 局部变量 b = 1; // 全局变量 } a = ?, b = ? // a为undefined,b为1 同名的局部变量会覆盖全局变量,但本质上它们是两个独立的变量,一方发生变化不会影响另一方: a = 5; // 函数外a的值为
-
JavaScript中的作用域链和闭包
作用域 全局作用域 局部作用域 作用域链 执行上下文 活动对象 闭包 闭包优化 JavaScript中出现了一个以前没学过的概念--闭包.何为闭包?从表面理解即封闭的包,与作用域有关.所以,说闭包以前先说说作用域. 作用域(scope) 通常来说一段程序代码中使用的变量和函数并不总是可用的,限定其可用性的范围即作用域,作用域的使用提高了程序逻辑的局部性,增强程序的可靠性,减少名字冲突. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥有全局作用域,以下几种情形拥有全局作
-
浅谈JavaScript作用域和闭包
作用域和闭包在JavaScript里非常重要.但是在我最初学习JavaScript的时候,却很难理解.这篇文章会用一些例子帮你理解它们. 我们先从作用域开始. 作用域 JavaScript的作用域限定了你可以访问哪些变量.有两种作用域:全局作用域,局部作用域. 全局作用域 在所有函数声明或者大括号之外定义的变量,都在全局作用域里. 不过这个规则只在浏览器中运行的JavaScript里有效.如果你在Node.js里,那么全局作用域里的变量就不一样了,不过这篇文章不讨论Node.js. `const
-
JavaScript 变量作用域及闭包第1/2页
实例一: 复制代码 代码如下: <script type="text/javascript"> var i = 1; // 弹出内容为 1 true 的提示框 alert(window.i + ' ' + (window.i == i)); </script> 分析: 在全局定义的变量其实就是 window 对象的属性. 上面的例子可以看到,我们定义全局变量的同时,window 对象会产生一个相应的属性,如何让我们的代码避免产生这个属性呢,看下面的例子. 实例二
-
javascript作用域和闭包使用详解
作用域的嵌套将形成作用域链,函数的嵌套将形成闭包.闭包与作用域链是 JavaScript 区别于其它语言的重要特性之一. 作用域JavaScript 中有两种作用域:函数作用域和全局作用域. 在一个函数中声明的变量以及该函数的参数享有同一个作用域,即函数作用域.一个简单的函数作用域的例子: 复制代码 代码如下: function foo() { var bar = 1; { var bar = 2; } return bar; // 2} 不同于C等其它有块
-
深入理解Javascript中的作用域链和闭包
首先我们回顾下之前一篇关于介绍数组遍历的文章: 请先看上一篇中提到的for循环代码: var array = []; array.length = 10000000;//(一千万) for(var i=0,length=array.length;i<length;i++){ array[i] = 'hi'; } var t1 = +new Date(); for(var i=0,length=array.length;i<length;i++){ } var t2 = +new Date();
-
深入理解javascript作用域和闭包
作用域 作用域是一个变量和函数的作用范围,javascript中函数内声明的所有变量在函数体内始终是可见的,在javascript中有全局作用域和局部作用域,但是没有块级作用域,局部变量的优先级高于全局变量,通过几个示例来了解下javascript中作用域的那些"潜规则"(这些也是在前端面试中经常问到的问题). 1. 变量声明提前 示例1: var scope="global"; function scopeTest(){ console.log(scope); v
-
javascript中的作用域和闭包详解
一.JavaScript作用域 JavaScript变量实际上只有两种作用域,全局变量和函数的内部变量.在函数内部任何一个地方定义的变量(var scope)其作用域都是整个函数体. 全局变量:指的是window对象下的对象属性. 作用域划分:基于上下文,以函数进行划分的,而不是由块划分的. 强调两点: 1. 在同一作用域中,JavaScript是允许变量的重复定义,并且后一个定义将覆盖前一个定义. 2. 函数内部如果不加关键字var而定义的变量,默认为全局变量. var scope="glob
-
javascript 作用于作用域链的详解
javascript 作用于作用域链的详解 一.JavaScript作用域 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域: (1)最外层函数和在最外层函数外面定义的变量拥有全局作用域, 例如: var authorName="Bu
-
JavaScript 中this指向问题案例详解
总结 全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例 箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call().apply().bind() ➡️ 第一个参数 全局环境 无论是否在严格模式下,this 均指向 window 对象. console.log(this === window) // true // 严格模式 'use strict' console.log(this === window
-
JavaScript中push(),join() 函数 实例详解
定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选
-
JavaScript中浅讲ajax图文详解
1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开
-
JavaScript 中调用 Kotlin 方法实例详解
JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =
-
JavaScript中的splice方法用法详解
JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等. 注意:这种方法会改变原始数组!. 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 示例:
-
JavaScript中window和document用法详解
一.验证表单 封装一个函数用于验证手机号 /** * @param {String}eleId * @param {Object}reg */ function checkInput(eleId,reg) { var ele = document.getElementById(eleId); ele.onblur = function (ev) { if(!reg.test(this.value)){ //不匹配 this.style.borderColor = "#ff0000" /
-
JavaScript 中的作用域与闭包
目录 一.JavaScript 是一门编译语言 1.1 传统编译语言的编译步骤 1.2 JavaScript 与传统编译语言的区别 二.作用域(Scope) 2.1 LHS查询 和 RHS查询 2.2 作用域嵌套 2.3 ReferenceError 和 TypeError (1)ReferenceError (2)TypeError (3)ReferenceError 和 TypeError 的区别 小结 三.词法作用域 3.1 词法阶段 3.2 词法作用域 查找规则 3.3 欺骗词法 ——
-
JavaScript中Array的filter函数详解
目录 描述 理解 示例 原生实现 描述 filter为数组中的每个元素调用一次callback函数,并利用所有使得callback返回 true 或等价于 true 的值的元素创建一个新数组.callback只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用.那些没有通过callback 测试的元素会被跳过,不会被包含在新数组中. 理解 filter不会改变原数组,它返回过滤后的新数组. filter遍历的元素范围在第一次调用callback之前就已经确定了.在调用f