js闭包的理解与应用

最新推荐文章于 2024-09-14 10:25:49 发布

原创最新推荐文章于 2024-09-14 10:25:49 发布 · 490 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

33 篇文章

订阅专栏

本文深入浅出地介绍了JavaScript中的闭包概念，包括闭包的基本原理、如何利用闭包模拟块级作用域、实现数据封装以及构造面向对象实例的方法。通过具体示例帮助读者更好地理解和运用闭包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.闭包的简单理解

function f1(){

var i=0;



function f2(){

alert(i);

}



return f2;

}



var f3 = f1();

f3();

全局变量f3指定对函数f1的内部函数f2的引用；内部函数f2的执行需要依赖函数f1的资源；

这里就产生一个闭包，使得f1在执行完毕并返回后，不会被javascript垃圾回收机制GC回收。

因为这里f3还在引用着f2，而f2依赖着f1，故f1在使用后，仍然存在于内存中。

简而言之：当函数f1的内部函数f2被函数f1外的一个变量引用的时候，就创建了一个闭包。

2.闭包的应用

《1》使用闭包可以在JavaScript中模拟块级作用域

function outputNumbers(count){

(function(){

for(var i = 0; i < count; i++){

alert(i);

}

})();

alert(i); //导致一个错误！

}

《2》实现封装

var person = function(){
//变量作用域为函数内部，外部无法访问
var name = "default";
return {
getName : function(){
return name;
},
setName : function(newName){
name = newName;
}
}
}();
console.log(person.name);//直接访问，结果为undefined
console.log(person.getName()); //default
person.setName("abruzzi");
console.log(person.getName()); //abruzzi

《3》实现面向对象中的对象

function Animate(){
var name = "animate";
return {
getName : function(){
return name;
},
setName : function(newName){
name = newName;
}
}
};
var dog = Animate();
console.log(dog.getName()); //animate
dog.setName("setDog");
console.log(dog.getName()); //setDog

var pig = Animate();
console.log(pig.getName()); //animate
pig.setName("setPig");
console.log(pig.getName()); //setPig

//pig dog 两个实例对name这个成员的访问是独立的，互不影响的
//在vue组件数据data中 https://cn.vuejs.org/v2/guide/components.html
//同样通过内部封装闭包来实现实例对象是独立互不影响的