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 我們可以下面直接打點調用。 13 // xiaoming.bianxing()
   //也可以用call或者apply改變this指向。 14 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指向的內容介紹，希望對大家的學習有所幫助。