js中for循环this的使用

随着对js的深入学习和使用，你会发现它里面包含了很多令人困惑的机制，比如对象、闭包、原型链继承等等

　　1、this是啥？

　　简言之，this是JavaScript语言中定义的众多关键字之一，它的特殊在于它自动定义于每一个函数域内，但是this倒地指引啥东西却让很多人张二摸不着头脑。这里我们留个小悬念，希望看完这篇文章了你能回答出来this到底指引个甚。

　　2、this有啥用？

　　那边观众又该为了，既然this这么难以理解，那么为个甚还要用它呢？在for循环中，什么时候使用This.指向和不使用this呢？

　　通俗来讲：this就是谁调用，this的指向就是谁。  在JS中万物皆对象。

　　举个例子：踢足球的时候，球进对方的门，看谁最后碰到球，我方球员射门的那一脚踢到了门柱，反弹给对方球员进门，就是乌龙球。

- 在obj对象中定义一个函数，叫fun，这个是obj的属性：

        var a = 888;
        var obj = {
            a: 100,
            fun: function() {
                //如直接对象打点调用函数：此时弹出100，说明函数上下文是obj对象本身。
                alert(this.a); //100
            }
        }
        obj.fun();
        但如果这个函数被一个变量接收（ 让变量直接指向这个对象的方法）
        var fn = obj.fun;
        fn(); //这个叫()直接运行（他的this指向就是window了）

- 在IIFE中直接调用，里面的this指向都是window。

IIFE模式 (function(){})() 就是所谓的自执行体。

1 var a = 888;
var obj = {
   a : 100,
   b : (function(){
       alert(this.a);
   })()
}
obj.b; //888
//这里的this指向都是window 因为var 申明变量是挂靠在window对象下的。

- 在定时器中直接调用，里面的this指向也是window。

    var a = 100;
    function fn(){
    console.log(this.a++);
　　 }
　　setInterval(fn,1000) //这里的this指向都是window 因为定时器是挂靠在window对象下的。

- 注意临门一脚谁踢的，是谁最终调用那个函数，比如：

var a = 100;
var obj = {
   a : 200,
   fn : function(){
       console.log(this.a++);
   }
}
setInterval(obj.fn, 1000); //obj.fn没有()执行，是定时器调用的


var a = 100;
var obj = {
   a : 200,
   fn : function(){
       console.log(this.a++);
   }
}
setInterval(function(){
   obj.fn();  //obj.fn()直接调用，上下文的this是obj
}, 1000);

- call()和apply()设置函数的上下文并确定this指向。

call和apply作用都一样，有两个作用：

相同：
1、执行fun函数
2、改变fun函数的this指向

区别：

1、区别在于函数传递参数的语法不同

     call需要用逗号隔开罗列所有参数。

　  apply是把所有参数写在数组里面，即使只有一个参数，也必须写在数组中。

举例：

比如有一个函数叫变性函数（bianxing），它能够将自己上下文的sex属性改变。
此时小明对象（xiaoming），迫切要变性，xiaoming就成为bianxing的上下文：

function bianxing(){
   if(this.sex == '男'){
       this.sex  = '女'
   }else{
       this.sex  = '男'
   }
 }
 8    var xiaoming = {
   name : "小明",
   sex  : "男",
   // bianxing : bianxing
}
　　//对象内加上属性变性//bianxing:bianxing 我们可以下面直接打点调用。
// xiaoming.bianxing()
   //也可以用call或者apply改变this指向。
bianxing.call(xiaoming);
bianxing.apply(xiaoming);
console.log(xiaoming)

//call和apply方法帮我们做了两件事：
// 调用bianxing函数
//改变bianxing函数的this指向为xiaoming

//图片

<ul>
<li class="active"><img src="img/1.jpeg"/></li>
<li><img src="img/2.jpeg"/></li>
<li><img src="img/3.jpeg"/></li>
<li><img src="img/4.jpeg"/></li>
<li><img src="img/5.jpeg"/></li>
</ul>

//获取按钮 图片

var ul_lis = document.getElementsByTagName("ul")[0].getElementsByTagName("li");
for(var i=0;i<ol_lis.length;i++){
//给每一个li定义一个自定义属性名为index
ul_lis[i].index = i;

//点击事件
ol_lis[i].onclick = function(){
for(var j=0;j<ol_lis.length;j++){

//清空原来的图片
ul_lis[j].className = "";
}
//点击哪个获得哪张图片
this.className = "active";
}

因为i的值在每次循环的时候并不会被锁定，而当我们点击的时候(这动作是在循环完成后进行的，此时的i代表的是元素的总个数的值）。

我们还可以使用IIFE来执行。

 

 

总结：

综上所述：
1.var、 setInterval、IIFE等都是挂靠在window对象下的 所以 this指向都是window(包括Math)。

2. 要明确this指向，执行时必须要打点 调用 （obj.fn()）。

3.要直接在对象外使用this，必须要在对象里面添加对应的属性与属性值（键值对）。

4.改变this指向可以使用call和 apply。

以上就是关于JS this指向的内容介绍，希望对大家的学习有所帮助。