【JavaScript】徹底明白this在函式中的指向

彭勝光發表於2019-06-28

一、this,其實可以類比成人

  說到this的話,我們在js中主要研究的都是函式中的this,在javascript中,this代表當前行為的執行主體,而context代表的是當前行為執行的的環境(區域)。

  例如男神在北理珠吃飯,這句話分別代表的含義如下

  男神    -->> 主體(this)

  吃飯    -->> 函式(function)

  北理珠 -->> 環境(context)

   -->>說明:吃飯是函式,男神是函式的主體,北理珠就是當前行為的執行環境(context),主體跟上下文沒有必然的聯絡,主體只與函式有關係;就好像男神吃飯,其實哪裡都可以吃飯,吃飯這個動作的主體永遠都是男神,環境是可以變化的。

  -->>結論:上面,其實也可以說明,this指的是誰,和函式在哪裡定義和執行是沒有任何關係的。

 

二、在函式中,如何區分this

  1、函式執行,首先看函式名前面是否有“.” ,有的話, “.”前面是誰,this就是誰;沒有的話this就是window

//例子一
console.log(this);
function eat() {
    console.log(this); //this->window
}
~function() {
    eat(); //this->window
}();

//例子二
function fn() {
    console.log(this);  
}
var obj = {fn: fn};
fn(); //this->window
obj.fn() //this->obj

//例子三
function sum() {
    fn();  
}
sum(); //this->window

//例子四
var oo = {
    sum: function() {
        console.log(this);
        fn();
    }
}
oo.sum(); //首先sum函式裡面,第一個輸出this為oo;之後執行fn(),this為window

  

  2、立即執行函式中的this永遠都是window

(function() {
    console.log(this); // this->window
})()

 

  3、給元素的某一事件繫結方法,當事件觸發的時候,執行對應的方法,方法中的this是當前元素

function fn() {
    console.log(this);
}
//例子一
document.getElementById("div1").onclick = fn; //this -> dom元素
//例子二
document.getElementById("div1").onclick = function() {
    console.log(this); // this->#div
    fn(); // this->window
}

  

  結論: 找到函式在哪裡執行的,有點,this就是點前面東西;沒點,this就是window

 

三、使用this分析一道面試題

var  num = 20;
var obj = {
    num: 30,
    fn: (function(num) {
        this.num *= 3;
        num += 15;
        var num  = 45;
        return function() {
            this.num *= 4;
            num + =20;
            console.log(num);
        }
    })
};
var fn = obj.fn;
fn(); // ->65
obj.fn(); // ->85
console.log(window.num, obj.num) // ->240, 120

  

   上面程式碼使用堆疊圖來描述,如下,首先正方形代表棧記憶體(函式執行環境,context),圓邊方形代表堆記憶體(用來存放字串)。

  第一步,形成一個js執行環境,window作用域,首先預解釋(宣告var,宣告+定義function);

  第二步,程式碼由上往下執行,num = 20, obj = 引用資料型別(資料存在堆記憶體裡面)

  第三步,因為obj.fn是立即執行函式,所以形成一個私有作用域A,執行fn裡面的函式,因為fn裡面的函式返回值為function,return值被外面的obj.fn引用了,這個立即執行函式A作用域不銷燬。

  第四步,window作用域下面的程式碼繼續往下執行。

 

四、this實踐運用

  現在有這樣一個需求,要求做一個累加器,每點選一次,就累加1。

var oBtn = document.getElementById("btn");
var spanNum = document.getElementById("spanNum");
// 方法一
// 利用全域性作用域不銷燬的原理,把需要累加的數字定義為全域性變數
var count = 0;
oBtn.onclikc = function() {
    count++;
    spanNuM.innerText = count;  
}
// 弊端:在專案中為了防止全域性變數之間的衝突,我們一般是禁止或者減少使用全域性變數的

// 方法二
// 形成一個不銷燬的私有作用域儲存我們需要累積的資料
// 1)
(function() {
    var count = 0;
    oBtn.onclick = function() {
        ++count;
        spanNum.innerText = count;
    } 
})
// 2)
oBtn.onclick = (function() {
    var count = 0;
    return function() {
        ++count;
        spanNum.innerText = count;
    }
})
// 上面的兩種寫法都是表達同一個意思
// 弊端:有一個不銷燬的私有作用域,佔那麼一點點記憶體

// 方法三
// 利用innerHTML的方式處理,每點選一次都需要到頁面獲取最新的值,然後累加,最後把結果放進去
oBtn.onclick = function() {
    ++spanNum.innerHTML;  
}
// 弊端:innerHTML獲取的時候本來就需要瀏覽器去處理,每一次都需要把頁面的記憶體先轉化為字串,然後累加,累加完重新新增回去,當重新新增的時候瀏覽器需要重現渲染一遍頁面。

// 方法四
// 利用自定義屬性儲存(推薦!)
oBtn.count = 0;
oBtn.onclick = function() {
    spanNum.innerTxt = ++this.count;    
}
//注意,這裡的count只是物件的一個屬性,它既不是全域性變數,也不是區域性變數哦。

  

  END

相關文章