一、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);
    }
  })(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只是物件的一個屬性，它既不是全域性變數，也不是區域性變數哦。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援碼農教程。