简易for循环i指向问题解决方法

所考察的核心知识点——关于this的指向问题

类型:
(1) 函数名()调用的形式,this指向window对象
(2)对象.方法调用的形式,this指向该对象(即谁调用,this指谁)
(3)test.call() / test.apply() / test.bind()形式,this显式指向参数

拓展:
call、apply、bind的区别
(1)三者的第一个参数都是this的指向,当参数为null或undefined的时候默认指向为window;call和bind的第二个参数是参数列表,apply的第二个参数是参数数组
(2)call和apply是立即调用,而bind返回值是一个新的函数,是延迟调用
(3)call和apply会将第二个参数作为方法的实参传入,而apply会在方法原参数的基础上再累加参数
在这里插入图片描述

(4)new test() 形式,this为被new出来的新对象
(5)箭头函数,this在函数定义的时候就已经确定,this指向外层作用域的this的指向

注意:setTimeout的本质属于函数名()调用的方式


题目:

for(var i = 0; i < 5; i++) {
	setTimeout(function() {
		console.log(i);
	}, 300);
}

得到的结果是5个5
若想正确出现下标0,1,2,3,4
则需要修改上面的代码
目前想到的有下面几种方法

1. 方法一:立即执行函数传参
for(var i = 0; i < 5; i++) {
	(function(i) {
		setTimeout(function() {
			console.log(i);
		}, 300);
	})(i);
}
2. 方法二:立即执行函数,换变量
for(var i = 0; i < 5; i++) {
	(function() {
		var temp = i;
		setTimeout(function() {
			console.log(temp);
		}, 300);
	})();
}
3. 方法三:将var换成let关键字
for (let i = 0; i < 5; i++) {
	setTimeout(function() {
		console.log(i);
	}, 300);
}
4. 方法四:使用let换变量
for (var i = 0; i < 5; i++) {
	let temp = i;
	setTimeout(function() {
		console.log(temp);
	}, 300);
}
5. 方法五: new function
for (var i = 0; i < 5; i++) {
	setTimeout(new function() {
		console.log(i);
	}, 300);
}
6. 方法六:利用call/apply/bind函数
for (var i = 0; i < 5; i++) {
	setTimeout(function() {
		console.log(i);
	}.call(i), 300);
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值