js中for循环this的使用

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

　　1、this是啥？

　　简言之，this是JavaScript语言中定义的众多关键字之一，它的特殊在于它自动定义于每一个函数域内，但是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 = document.getElementsByTagName("ul")[0].getElementsByTagName("li");
12 for(var i=0;i<ol_lis.length;i++){
13 //给每一个li定义一个自定义属性名为index
14 ul_lis[i].index = i;
15 
16 //点击事件
17 ol_lis[i].onclick = function(){
18 for(var j=0;j<ol_lis.length;j++){
19 
20 //清空原来的图片
21 ul_lis[j].className = "";
22 }
23 //点击哪个获得哪张图片
24 this.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指向的内容介绍，希望对大家的学习有所帮助。

 

转载于:https://www.cnblogs.com/xuyx/p/10615120.html