js中for循环this的使⽤
随着对的深⼊学习和使⽤，你会发现它⾥⾯包含了很多令⼈困惑的机制，⽐如对象、闭包、原型链继承等等
  1、this是啥？js原型和原型链的理解
  简⾔之，this是中定义的众多关键字之⼀，它的特殊在于它⾃动定义于每⼀个函数域内，但是this倒地指引啥东西却让很多⼈张⼆摸不着头脑。这⾥我们留个⼩悬念，希望看完这篇⽂章了你能回答出来this到底指引个甚。
  2、this有啥⽤？
  那边观众⼜该为了，既然this这么难以理解，那么为个甚还要⽤它呢？在for循环中，什么时候使⽤This.指向和不使⽤this呢？
  通俗来讲：this就是谁调⽤，this的指向就是谁。在JS中万物皆对象。
  举个例⼦：踢⾜球的时候，球进对⽅的门，看谁最后碰到球，我⽅球员射门的那⼀脚踢到了门柱，反弹给对⽅球员进门，就是乌龙球。
- 在obj对象中定义⼀个函数，叫fun，这个是obj的属性：
1        var a = 888;
2        var obj = {
3            a: 100,
4            fun: function() {
5                //如直接对象打点调⽤函数：此时弹出100，说明函数上下⽂是obj对象本⾝。
6                alert(this.a); //100
7            }
8        }
9        obj.fun();
10但如果这个函数被⼀个变量接收（让变量直接指向这个对象的⽅法）
11        var fn = obj.fun;
12        fn(); //这个叫()直接运⾏（他的this指向就是window了）
- 在IIFE中直接调⽤，⾥⾯的this指向都是window。
IIFE模式 (function(){})() 就是所谓的⾃执⾏体。
1 var a = 888;
2 var obj = {
3    a : 100,
4    b : (function(){
5        alert(this.a);
6    })()
7 }
8 obj.b; //888
//这⾥的this指向都是window 因为var 申明变量是挂靠在window对象下的。
- 在定时器中直接调⽤，⾥⾯的this指向也是window。
1    var a = 100;
2    function fn(){
3    console.log(this.a++);
4  }
5  setInterval(fn,1000) //这⾥的this指向都是window 因为定时器是挂靠在window对象下的。
- 注意临门⼀脚谁踢的，是谁最终调⽤那个函数，⽐如：
1 var a = 100;
2 var obj = {
3    a : 200,
4    fn : function(){
5        console.log(this.a++);
6    }
7 }
8 setInterval(obj.fn, 1000); //obj.fn没有()执⾏，是定时器调⽤的
9
10 var a = 100;
11 var obj = {
12    a : 200,
13    fn : function(){
14        console.log(this.a++);
15    }
16 }
17 setInterval(function(){
18    obj.fn();  //obj.fn()直接调⽤，上下⽂的this是obj
19 }, 1000);
- call()和apply()设置函数的上下⽂并确定this指向。
call和apply作⽤都⼀样，有两个作⽤：
相同：
1、执⾏fun函数
2、改变fun函数的this指向
区别：
1、区别在于函数传递参数的语法不同
call需要⽤逗号隔开罗列所有参数。
  apply是把所有参数写在数组⾥⾯，即使只有⼀个参数，也必须写在数组中。
举例：
⽐如有⼀个函数叫变性函数（bianxing），它能够将⾃⼰上下⽂的sex属性改变。此时⼩明对象（xiaoming），迫切要变性，xiaoming就成为bianxing的上下⽂：
1 function bianxing(){
2    if(this.sex == '男'){
3        this.sex  = '⼥'
4    }else{
5        this.sex  = '男'
6    }
7  }
8    var xiaoming = {
9    name : "⼩明",
10    sex  : "男",
11    // bianxing : bianxing
12 }
  //对象内加上属性变性//bianxing:bianxing 我们可以下⾯直接打点调⽤。
13 // xiaoming.bianxing()
//也可以⽤call或者apply改变this指向。
14 bianxing.call(xiaoming);
15 bianxing.apply(xiaoming);
16 console.log(xiaoming)
17
18 //call和apply⽅法帮我们做了两件事：
20 // 调⽤bianxing函数
21 //改变bianxing函数的this指向为xiaoming
//图⽚
1<ul>
2<li class="active"><img src="img/1.jpeg"/></li>
3<li><img src="img/2.jpeg"/></li>
4<li><img src="img/3.jpeg"/></li>
5<li><img src="img/4.jpeg"/></li>
6<li><img src="img/5.jpeg"/></li>
7</ul>
8
9 //获取按钮图⽚
10
11 var ul_lis = ElementsByTagName("ul")[0].getElementsByTagName("li");
12 for(var i=0;i<ol_lis.length;i++){
13//给每⼀个li定义⼀个⾃定义属性名为index
14ul_lis[i].index = i;
15
16//点击事件
17ol_lis[i].onclick = function(){
18for(var j=0;j<ol_lis.length;j++){
19
20//清空原来的图⽚
21ul_lis[j].className = "";
22}
23//点击哪个获得哪张图⽚
24this.className = "active";
25}
因为i的值在每次循环的时候并不会被锁定，⽽当我们点击的时候(这动作是在循环完成后进⾏的，此时的i代表的是元素的总个数的值）。我们还可以使⽤IIFE来执⾏。
总结：
综上所述：
1.var、 setInterval、IIFE等都是挂靠在window对象下的所以 this指向都是window(包括Math)。
2. 要明确this指向，执⾏时必须要打点调⽤（obj.fn()）。
3.要直接在对象外使⽤this，必须要在对象⾥⾯添加对应的属性与属性值（键值对）。
4.改变this指向可以使⽤call和 apply。
以上就是关于JS this指向的内容介绍，希望对⼤家的学习有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。