溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、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只是對象的一個屬性，它既不是全局變量，也不是局部變量哦。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
