[].indexOf.call()学习

今天看到闭包一道题，就是一个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);
  }
});

经过验证，是可以的。