作用域/闭包

Posted on Posted in js
Tips: 本文创建于2014年5月21日,已超过 2 年,内容或图片可能已经失效!
文章目录[隐藏]

作用域链

在js里函数就是对象
解释:一个变量在本身环境、内部环境、内部深层环境都可以使用,这个变量的作用域决定的,宏观上看这个作用域形成了各个环境链接的一个链条

[code lang="js"]
// 例子一
<script type="text/javascript">
/*var age = 23;
function f1(){
console.log(age);
}
f1();*/

var addr = 'bj';
function f2(){
var height = 170;
var nm ='tom';
function f3(){
var country = 'USA';
console.log(addr);
console.log(nm);
}
f3();
}
f2();
</script>

// 例子二
<script type="text/javascript">
var addr = 'bj';
function f2(){
var height = 170;
var nm ='tom';
function f3(){
var country = 'USA';
}
f3();
}
f2();
</script>
[/code]

作用域链作用
可以保证按照一定的顺序对变量进行访问

[code lang="js"]
<script type="text/javascript">
// 变量的作用域是声明时决定的,而不是运行时
var age = 25;
function f1(){
console.log(age);
}
function f2(){
var age = 29;
f1(); // 25
}
f2();
</script>
[/code]

闭包

[code lang="js"]
<script type="text/javascript">
// 闭包:函数
// 形成闭包:一个函数嵌套另一个函数,内部函数就是闭包
// 特点:有权访问上级执行环境的变量信息
function f1(){
var addr = 'bj';
var area = 2000;
function f2(){
console.log(addr+'----'+area);
}
return f2;
}
var ff = f1(); // ff是个函数,主题和f2一致
ff();
// ff和f2一致,都是函数的引用
/*
* addr 和 area由于f1函数执行完毕,本身作用域销毁
* f2内部的活动对象AO存在
*/
</script>
[/code]

[code lang="js"]
<script type="text/javascript">
/*
//利用闭包生成数组
var arr = new Array();
for(var i=0;i<5;++i){
arr[i] = function(){
console.log(i);
}
}
arr[1](); // 5
arr[3](); // 5
//数组有5个元素
//每个数组当函数调用结果都是5
//以上代码一共有2个环境(原因在此!i在变化)
*/

// 利用闭包生成数组
var arr = new Array();
function f1(n){
function f2(){
console.log(n);
}
return f2;
}
for(var i=0;i<5;++i){
arr[i] = f1(i);
}
arr[2]();
</script>
[/code]

闭包案例

[code lang="js"]
// 案例一
<script type="text/javascript">
function f1(){
var num = 0;
function f2(){
return ++num;
}
return f2;
}
var add = f1();
console.log(add());
console.log(add());
</script>
// 案例二
<script type="text/javascript">
// 无序列表当前行 -- 高亮显示
/*
var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
lis[i].onmouseover = function(){
this.style.backgroundColor = "lightblue";
}
lis[i].onmouseout = function(){
this.style.backgroundColor = "";
}
}
*/

/*
var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
lis[i].onmouseover = over(i);
lis[i].onmouseout = out(i);
}
function over(m){
function inover(){
lis[m].style.backgroundColor = "pink";
}
return inover;
}
function out(n){
function inout(){
lis[n].style.backgroundColor = "";
}
return inout;
}
*/

var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
// 设计匿名函数自调用实现闭包
lis[i].onmouseover = (function(m){
function over(){
lis[m].style.backgroundColor = "red";
}
return over;
})(i);
lis[i].onmouseout = (function(n){
function out(){
lis[n].style.backgroundColor = "";
}
return out;
})(i);
}
</script>
[/code]

» 转载请注明来源:若我若鱼 » 作用域/闭包

Leave a Reply

Your email address will not be published. Required fields are marked *

20 − 4 =