今天看到闭包一道题,就是一个li列表,点击列表控制台输出对应的索引。这里考察了var的作用域问题和闭包对外部变量的引用问题,有几种解决方法。
html:
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
<li>test6</li>
<li>test7</li>
<li>test8</li>
<li>test9</li>
<li>test10</li>
</ul>
js:
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('ul li');
// 法一:使用es6的let代替var
for (let k = 0; k < lis.length; k++) {
lis[k].addEventListener('click',function(){
console.log('法一:',k)
})
}
// 法二:使用闭包解决
for (var m = 0; m < lis.length; m++) {
(function(m){
lis[m].addEventListener('click',function(){
console.log('法二:',m)
},false)
})(m)
}
// 法三:事件委托
ul.addEventListener('click', function(e){
var target = e.target;
if (target.nodeName.toLowerCase() === 'li') {
console.log('法三:',[].indexOf.call(lis,target))
}
},false)
其中法三是我借鉴别人的。它里面的[].indexOf.call()引起我的注意,因为我一开始没看到这是什么意思,感觉好高级啊(捂脸)。于是查了call的用法。
call()
语法:call([thisObject[,arg1 [,arg2 [,...,argn]]]]);,应用某一对象的一个方法,用另一个对象替换当前对象。
可以指定上下文this;可以使用call()来实现继承:写一个方法,然后让另外一个新的对象来继承它(而不是在新对象中再写一次这个方法)。
示例:
指定上下文:
function say(){
console.log('my name is : ' + this.name);
}
var obj = {
name: 'cat'
}
say.call(obj) // "my name is : cat"
实现继承
function Animal(name,color){
this.name = name;
this.color = color;
this.say = function(){
console.log('My name is '+this.name+', and my color '+ this.color)
}
}
function Cat(name,color){
Animal.call(this,name,color)
}
var cat = new Cat('cat','black')
cat.color // "black"
cat.say() // My name iscat, and my color:black
注意:
另外apply()的功能和call一样,只是传参的方式不同。apply的第二个参数是一个数组.
回到开头的[].indexOf.call(),根据上面call用法的分析,这里是想指定上下文。数组的indexOf(string)是返回字符串string在父串中首次出现的位置,从0开始,-1表示没有。
类似拓展:
[].join.call([1,2,3],',') // "1,2,3"
[].sort.call([5,7,1,3,4]); // [1, 3, 4, 5, 7]
那根据这个拓展,开头闭包的题目是不是可以直接使用这个call呢?
[].forEach.call(lis, function (item, index) {
item.onclick = function () {
console.log('法四:',index);
}
});
经过验证,是可以的。