1、闭包的结构+例题
<script type="text/javascript">
可以通过闭包 能够在外部访问到局部变量
凡是放在返回函数中的变量被提升为全局变量,驻留在内存中不释放;
function fn1(){
var a = 12;
function fn2(){
a+=12;
alert(a);
}
return fn2;
}
var result = fn1();
result();
自己熟悉并练习其结构的写法
function f1(){
var a = 12;
function f2(){
a+=12;
alert(a);
}
return f2;
}
var result = f1();
result();
实例面试题 (相关作用域考核点)
function f1() {
var n = 999;
nAdd = function() {
n += 1
}
function f2() {
alert(n);
}
return f2;
}
var result = f1();
result(); // 999
nAdd(); // 1000
result(); // 1000;
</script>
2、作用域的概念
<script type="text/javascript">
demoFn();
// 定义一个函数
function demoFn() {
alert("haha");
}
var fun = function demoFn1() {
alert("一只乌鸦口渴了,到处找水喝");
}
demoFn1();
作用域:变量的生效范围,如果变量在整个页面中都可以访问到,则该变量就是一个全局变量;如果变量的有效范围只是在某一个范围内,该变量就是一个局部变量。
在函数内部,使用var定义的变量是局部变量,除此以外,都是全局变量。没用用var定义的变量,则是一个全局变量
// var a = 12;
// function useA () {
因为在内部作用域中使用到了和外部作用域同名的变量,所以需要先判断内部有没有重新定义这个变量
(1):如果重新定义了,那么就是用新定义的这个变量
(2):如果没有,则该变量就是外部作用域中的变量
alert(a); // undefine
var a = 24;
return a;
}
alert(a); // 12
alert( useA() ); // 24
alert(a); // 12
function demoFun() {
alert(e);
}
demoFun();
var e = 23;
function demoFun1() {
alert(e);
}
demoFun1();
</script>
3、匿名函数
<script type="text/javascript">
具名函数:有函数名,可以通过函数名来调用的一种函数;
匿名函数:没有函数名,可以通过事件调用 通过变量调用 通过自己调用;
//通过变量调用
var a = function() {
alert("hello world");
};
a();
函数的自执行/自调用
var c = "张三"
(function(a) {
alert("goodBye world" + a)
})
(c);
//这个括号————调用前面括号里面的函数
function demo() {
};
demo();
①给事件添加匿名函数
匿名函数可以当做参数来传递
例如下定时器
setInterval(function() {
alert("你好世界");
}, 30);
匿名函数可以当做返回值返回出去
</script>
复制代码
#### 4 使用闭包的思想解决循环添加事件(方法一)
<script type="text/javascript">
window.onload = function () {
for (var i = 1; i < 4; i++) {
获取到某一个按钮
var btn = document.getElementById("button"+i);
解决方法二:使用匿名函数传参、并调用该匿名函数执行,每次执行匿名函数,num变量都会用一个当前i的值
以下代码的闭包结构原理
1、先执行外层匿名函数,并给这个匿名函数传参(num这个参数相当在外层函数中定义于局部变量),调用外层函数时,内层函数的函数体并未执行,而是等到事件被触发时才执行(就相当于调用外部函数时,返回了内层函数,调用内层函数时才触发这个函数)
2、通过点击执行内层匿名函数时,就相当于在执行:通过外层函数返回的函数。
(function (num) {
给onclick添加的函数就相当于被外部函数返回出来的那个函数,在内部函数中使用了外部函数定义的num变量,因为要等出了外部函数作用域时才调用,所以num的变量空间会被长久持有,并不会被系统释放,因为btn是一个指针,指向了不同的按钮对象,所以就相当于给每个按钮都添加了num变量。
btn.onclick = function () {
alert("button"+num);
}
})(i);
}
}</script>
</head>
<body>
<button id="button1" value="button1">button1</button>
<button id="button2" value="button2">button2</button>
<button id="button3" value="button3">button3</button>
</body>
</html>
复制代码
使用闭包的思想解决循环添加事件(方法二)
<script type="text/javascript">
//防止找不到bntton对象
window.onload = function() {
for(var i = 1; i < 4; i++) {
var btn = document.getElementById("button" + i);
//alert(btn);
//把btn当成对象添加新属性,对应i的值;循环一次获取相应的i的值
btn.tempNumber = i;
//点击的对象 即 对应的i的值
btn.onclick = function() {
alert("button" + this.tempNumber)
}
}
}
</script>
</head>
<body>
<input type="button" name="button1" id="button1" value="按钮1" />
<input type="button" name="button2" id="button2" value="按钮2" />
<input type="button" name="button3" id="button3" value="按钮3" />
</body>
复制代码