JavaScript 闭包(Closure) 下集

看这个程序码,结果会是如何?

function ArrFunction(){
var arr=[];
for(var i=0;i<3;i++){
 arr.push(function(){
console.log(i);
});
}
return arr;
}
var fs=ArrFunction();

fs[0]();//3
fs[1]();//3
fs[2]();//3


也许你会惊讶,为甚麽不是0, 1, 2 呢?

这是因为ArrFunction在呼叫的时候,里面的函数还没有被呼叫,所以还不会console.log,
但是在执行ArrFunction时for loop 还是有在跑,等到 i 不小於3就跳出回圈并return arr。
因此最後在记忆体的i是3。

而ArrFunction结束後,还记得昨天说的吗?虽然它的执行环境已经结束了但是它的变数还是可以被内部的函数参考到,所以fs[0], fs[1], fs[2]参考到的i都是 3,彷佛是同一个父母的孩子们,要他们回答爸爸几岁并不会因为生它们时的年龄不同而得到不同答案,因为它们都指向同一个记忆体位置。

如果想要得出 0, 1, 2 的结果呢?

function ArrFunction(){
var arr=[];
for(var i=0;i<3;i++){
let j=i;
 arr.push(function(){
console.log(j);
});
}
return arr;
}
var fs=ArrFunction();

fs[0]();//0
fs[1]();//1
fs[2]();//2


使用let 变数,如此里面三个函数会指向不同的记忆体位置罗!!

另一个方法<使用立即函数>

function ArrFunction(){
var arr=[];
for(var i=0;i<3;i++){
arr.push(
(function(j){
console.log(j);
}(i))
);

}
return arr;
}

var fs=ArrFunction();
//0
//1
//2



<<:  【後转前要多久】# Day21 BootStrap - 甜点电商

>>:  Day 21 - 网际网路的运行

Golang 转生到web世界 - 档案操作

Golang 档案操作 写web多少还是会遇到除了表单外,就是跟档案有关的行为了,这部分我自己都是习...

Day12 用 TailwindCSS 切版部落格首页,显示 WordPress 文章列表

上一篇我们成功在 Next.js 安装 TailwindCSS,今天我们要实际来切版首页,显示文章列...

Day3:如何加速将同步到Azure Active Directory的使用者移除

在执行大大小小的Exchange Hybrid及Microsoft 365的专案过程中 若不小心把不...

协作图

UML 有四种表达 Entity 之间互动的图,分别是: 状态图、时序图、协作图、活动图,这次要介绍...

Day29 深入解析Elasticsearch Query DSL Match query Part2

Hello大家, 今天没下雨了~ 觉得棒!! 昨天大致介绍了Match query的用法, 今天来说...