脚本宝典收集整理的这篇文章主要介绍了Javascript的高级函数之闭包,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
fun2()
就是一个闭包 function fun1(){
var a = '我是父元素定义的变量a';
var b = '变量b'
function fun2 (){//fun2()是内部函数,一个闭包
console.log(a);//使用了父函数中声明的变量a
}
fun2();
}
fun1()//调用函数fun1()
理解二:通过debug调试可以查看到,闭包是包含被内部函数引用外部函数的变量(函数)的对象。
通过调式可以看到一个Closure (闭包)
里面只显示变量a
,没有变量b
,故此也可以理解为闭包是被内部函数引用外部函数的变量(函数)的对象。
执行内部函数定义就会产生闭包(不用调用函数)
function fun1() {
var a = 0;
function fun2() {
a++;
console.log(a);
}
return fun2;
}
var f = fun1();
f();//1
f();//2
f();//3
注意:
f()
相当于执行了一次fun2()
function show(msg, time) {
setTimeout(function () {
console.log(msg);
}, time)
}
show("新奇时间", 1000);
</script>
例如上面的例子中
function fun1() {
var a = 0;
function fun2() {
a++;
console.log(a);
}
return fun2;
}
var f = fun1();
f();//1
f();//2
f();//3
变量a
仍然存活在内存中fun1()中变量a
。 function fun1() {
//此时闭包就已经产生(函数提升,内部函数对象已经建立)
var a = 0;
function fun2() {
a++;
console.log(a);
}
return fun2;
}
var f = fun1();
f();//1
f();//2
f();//3
f = null;//闭包死亡(包含闭包的函数对象成为垃圾对象)
js文件
,命名为myModule.js
代码如下function myModule() {
//私有数据
var str = "Hello World!!!";
//操作数据的函数
function showBig() {
console.log("showBig():" + str.toUpperCase());
}
function showSmall() {
console.log("showSmall():" + str.toLowerCase());
}
//向外暴露的对象(给外部使用的方法)
return {
showBig: showBig,
showSmall: showSmall
}
}
myModule.js文件
通过<script>
标签在html文件
中进行引用 <script src="./myModule.js"></script>
<script>
var fn = myModule();
fn.showBig();
fn.showSmall();
</script>
效果:
另一种写法: 利用立即执行函数往window里面直接添加方法(function() {
//私有数据
var str = "Hello World!!!";
//操作数据的函数
function showBig() {
console.log("showBig():" + str.toUpperCase());
}
function showSmall() {
console.log("showSmall():" + str.toLowerCase());
}
//向外暴露的对象(给外部使用的方法)
window.myModule = {
showBig: showBig,
showSmall: showSmall
}
})()
myModule.js文件
通过<script>
标签在html文件
中进行引用 <script src="./myModule.js"></script>
<script>
myModule.showBig();
myModule.showSmall();
</script>
内存溢出
内存泄漏
常见内存泄漏
var、let、const
申明,直接使用的变量function fn(){
a = new.Array(10000);
}
fn();
var time = setInterval(function(){//循环定时器后不清理
console.log("还有谁?");
},1000);
//clearInterval(time);
function fun1() {
var a = 0;
function fun2() {
a++;
console.log(a);
}
return fun2;
}
var f = fun1();
f();//1
f();//2
f();//3//闭包会产生内存泄漏
f = null;//回收闭包-->让内部函数成为垃圾对象
面试题一
//代码片段一
var name = "The Window";
var Object = {
name: "The Object",
getNameFunc: function () {
return function () {
return this.name;
};
}
};
console.log(Object.getNameFunc()());// ? "The Window"
//代码片段二
var name2 = "The Window";
var Object = {
name2: "The Object",
getNameFunc: function () {
var that = this;
return function () {
return that.name2;
};
}
};
console.log(Object.getNameFunc()());// ? "The Object"
解析:
this指向window
,打印"The Window"
此时的this
此时this指向Object
,然后内部函数使用了外部函数变量that
,产生了闭包,that
中值保存的是this指向的Object
,故此打印"The Object"
面试题二
function fun(n, o){
console.log(o);
return{
fun: function(m){
return fun(m, n);
}
}
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined, ?, ?, ?
console.log("--------------------");
var b = fun(0).fun(1).fun(2).fun(3);//undefined, ?, ?, ?
console.log("--------------------");
var c = fun(0).fun(1); c.fun(2); c.fun(3);//undefined, ?, ?, ?
思路
n
,每次打印的是上一次产生的闭包n
,没有产生闭包打印就是undefined
var a = fun(0); //undefined 这里会产生闭包n = 0;故此下面都会打印0
a.fun(1); a.fun(2); a.fun(3);//0, 0, 0
console.log("--------------------");
var b = fun(0).fun(1).fun(2).fun(3);//undefined, 0, 1, 2
console.log("--------------------");
var c = fun(0).fun(1);//undefined, 0 这里会产生闭包n = 1;
c.fun(2);//1 这里会产生闭包n = 2,但是会被垃圾回收
c.fun(3);//1 这里会产生闭包n = 3 但是会被垃圾回收
以上是脚本宝典为你收集整理的Javascript的高级函数之闭包全部内容,希望文章能够帮你解决Javascript的高级函数之闭包所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。