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

彭勝光發表於2019-06-28
JavaScript函式

一、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

相關文章