JavaScript闭包
2019-02-16 本文已影响0人
追逐_e6cf
一、获取局部作用域的变量
- 通过变量向外传递。
- 通过函数向外传递。
- 条件和循环体：{}不代表作用域，在es6语法中，{}会被看做代码块，此时在{}当中声明一个函数，相当于
var声明，尽量不要在{}当中声明函数，否则调用的时候会有问题。
// 通过变量 向外传递
var b = '';
function fn1(){
var a = "月薪10w";
b = a;
}
fn1();
alert(b); //取到函数内局部作用域的变量a的值
// 通过函数传参获取
function fn1(){
var a = "月薪10w";
fn2(a);
}
function fn2(str){
alert(str);
}
fn1();
alert(fn1); //undefined
{
function fn1(){
alert(1);
}
}
二、闭包
- js垃圾回收机制：js 中的变量和函数不再使用后，会被自动js垃圾回收机制回收。
- 形成闭包的条件：有函数/作用域的嵌套；内部函数引用外部函数的变量/参数。
- 闭包的结果：内部函数的使用外部函数的那些变量和参数仍然会保存，使用
return返回了此内部函数，上面的变量和参数不会被回收。 - 闭包的原因：返回的函数并非孤立的函数，而是连同周围的环境（AO）打了一个包，成了一个封闭的环境包，共同返回出来 ---->闭包。
- 我们在返回函数的时候，并不是单纯的返回了一个函数，我们把该函数连同他的AO链一起返回了。
- 函数的作用域，取决于声明时而不取决于调用时。
- 变量存储
function(){}、{}、[]存储的是一个地址。
function t1(){
var age = 20;
function t2(){
alert(age);
}
return t2;
}
var tmp = t1();
var age = 1000;
tmp(); //20
// win 1. AO{t1:function(){},tmp:un,age:un}
// 2. t1 1. AO{age:un,t2:fun}
// 2. AO{age:20,t2:fn}
// AO{t1:function(){},tmp:t2,age:1000}
//
// tmp t2 1.AO{}
var age = 10;
function t1(){
var age = 20;
return function t2(){
alert(++age);
}
}
var t3 = t1();
t3(); // 21
t3(); // 22
t3(); // 23
alert(age); //10
var age = 10;
function t1(){
var age = 20;
return function t2(){
alert(++age);
}
}
var t3 = t1();
var t4 = t1();
t3(); //21
t4(); //21
function foo(){
var a = 2;
function baz(){
console.log(a);
}
bar(baz);
}
function bar(fn){
var a = 3;
fn();
}
foo();
//2
三、闭包计数器
使用js的命名空间，优点：变量不受污染。
<script>
var chengming = {};//js的命名空间 一般就是这么写
chengming.inc = (function(){
var cnt = 0;
return function(){
return ++cnt;
}
})();
console.log(chengming.inc());
</script>
<script>
var cnt = 100;
console.log(inc()); //报错，window下访问不到inc
</script>
四、循环中的闭包
<body>
<input type="button" name="" value="按钮1">
<input type="button" name="" value="按钮2">
<input type="button" name="" value="按钮3">
</body>
<script>
var inp = document.getElementsByTagName('input');
for(var i=0; i<inp.length; i++){
inp[i].onclick = function(){
inp[i].style.background = "yellow";
}
}
//点击按钮会报错，因为i在window全局上，for结束之后，本身的值就是3
</script>
// 方法一 用自定义属性
for(var i=0;i<inp.length;i++){
inp[i].i = i;
inp[i].onclick = function(){
inp[this.i].style.background = 'yellow';
}
}
// 方法一 用let关键字
for(let i=0; i<inp.length; i++){
inp[i].onclick = function(){
inp[i].style.background = "yellow";
}
}
// 方法三 使用this
for(var i=0; i<inp.length; i++){
inp[i].onclick = function(){
this.style.background = "yellow";
}
}
// 方法四 for循环每次执行，都会立即执行一个匿名函数，并且匿名函数的作用域中传入了当时的i作为参数传递
for(var i=0; i<inp.length; i++){
(function(i){
// AO{i:1}
inp[i].onclick = function(){
// AO:{}
inp[i].style.background = 'yellow';
}
})(i)
}
// 方法五
for(var i=0; i<inp.length; i++){
(function(){
// AO{}
var arg = i;
inp[arg].onclick = function(){
// AO:{}
inp[arg].style.background = 'yellow';
}
})()
}
// 方法六
for(var i=0; i<inp.length; i++){
inp[i].onclick = function(i){
// AO:{i:0}
return function(){
inp[i].style.background = 'yellow';
}
}(i)
}
// 方法七
for(var i=0; i<inp.length; i++){
(inp[i].onclick = function(){
inp[arguments.callee.i].style.background = 'yellow';
}).i = i;
}
// 方法八九 基本包装类型
for(var i=0; i<inp.length; i++){
inp[i].onclick = new Function(`inp[${i}].style.background = 'yellow';`);
}
for(var i=0; i<inp.length; i++){
inp[i].onclick = Function(`inp[${i}].style.background = 'yellow';`);
}
