深入理解Js中的this

JavaScript作用域為靜態(tài)作用域static scope，但是在Js中的this卻是一個例外，this的指向問題就類似于動態(tài)作用域，其并不關心函數(shù)和作用域是如何聲明以及在何處聲明的，只關心它們從何處調用，this的指向在函數(shù)定義的時候是確定不了的，只有函數(shù)執(zhí)行的時候才能確定this到底指向誰，當然實際上this的最終指向的是那個調用它的對象。

作用域

我們先來了解一下JavaScript的作用域，以便理解為什么說this更類似于動態(tài)作用域，通常來說，一段程序代碼中所用到的名字并不總是有效或可用的，而限定這個名字的可用性的代碼范圍就是這個名字的作用域scope，當一個方法或成員被聲明，他就擁有當前的執(zhí)行上下文context環(huán)境，在有具體值的context中，表達式是可見也都能夠被引用，如果一個變量或者其他表達式不在當前的作用域，則將無法使用。作用域也可以根據(jù)代碼層次分層，以便子作用域可以訪問父作用域，通常是指沿著鏈式的作用域鏈查找，而不能從父作用域引用子作用域中的變量和引用。
JavaScript作用域為靜態(tài)作用域static scope，也可以稱為詞法作用域lexical scope，其主要特征在于，函數(shù)作用域中遇到既不是參數(shù)也不是函數(shù)內部定義的局部變量時，去函數(shù)定義時上下文中查，而與之相對應的是動態(tài)作用域dynamic scope則不同，其函數(shù)作用域中遇到既不是參數(shù)也不是函數(shù)內部定義的局部變量時，到函數(shù)調用時的上下文中去查。

var a = 1;
var s = function(){
 console.log(a);
};
(function(){
 var a = 2;
 s(); // 1
})();

調用s()是打印的a為1，此為靜態(tài)作用域，也就是聲明時即規(guī)定作用域，而假如是動態(tài)作用域的話在此處會打印2?，F(xiàn)在大部分語言都采用靜態(tài)作用域，比如C、C++、Java、PHP、Python等等，具有動態(tài)作用域的語言有Emacs Lisp、Common Lisp、Perl等。

全局作用域

直接聲明在頂層的變量或方法就運行在全局作用域，借用函數(shù)的[[Scopes]]屬性來查看作用域，[[Scopes]]是保存函數(shù)作用域鏈的對象，是函數(shù)的內部屬性無法直接訪問但是可以打印來查看。

function s(){}
console.dir(s);
/*
 ...
 [[Scopes]]: Scopes[1]
 0: Global ...
*/
// 可以看見聲明的s函數(shù)運行的上下文環(huán)境是全局作用域

函數(shù)作用域

當聲明一個函數(shù)后，在函數(shù)內部聲明的方法或者成員的運行環(huán)境就是此函數(shù)的函數(shù)作用域

(function localContext(){
 var a = 1;
 function s(){ return a; }
 console.dir(s);
})();
/*
 ...
 [[Scopes]]: Scopes[2]
 0: Closure (localContext) {a: 1}
 1: Global ...
*/
// 可以看見聲明的s函數(shù)運行的上下文環(huán)境是函數(shù)localContext的作用域，也可以稱為局部作用域

塊級作用域

代碼塊內如果存在let或者const，代碼塊會對這些命令聲明的變量從塊的開始就形成一個封閉作用域。

{
 let a = 1;
 function s(){return a;}
 console.dir(s);
 /*
 ...
 [[Scopes]]: Scopes[2]
 0: Block {a: 1}
 1: Global ...
 */
}
// 可以看見聲明的s函數(shù)運行的上下文環(huán)境是Block塊級作用域，也是局部作用域

分析

我們在使用this之前有必要了解為什么在JavaScript中要有this這個設計，在這之前我們先舉個小例子，通常我們使用this時可能會遇到的典型問題就類似于下面這樣，雖然我們運行的都是同一個函數(shù)，但是執(zhí)行的結果可能會不同。

var obj = {
 name: 1,
 say: function() {
 return this.name;
 }
};
window.name = 2;
window.say = obj.say;

console.log(obj.say()); // 1
console.log(window.say()); // 2

產(chǎn)生這樣的結果的原因就是因為使用了this關鍵字，前文已經(jīng)提到了this必須要在運行時才能確定，在這里，對于obj.say()來說，say()運行的環(huán)境是obj對象，對于window.say()來說，say()運行的環(huán)境是window對象，所以兩者運行的結果不同。
此時我們就來了解一下，為什么JavaScript會有this這樣一個設計，我們首先來了解一下JavaScript的內存結構中的堆棧，堆heap是動態(tài)分配的內存，大小不定也不會自動釋放，棧stack為自動分配的內存空間，在代碼執(zhí)行過程中自動釋放。JavaScript在棧內存中提供一個供Js代碼執(zhí)行的環(huán)境，關于作用域以及函數(shù)的調用都是棧內存中執(zhí)行的。Js中基本數(shù)據(jù)類型String、Number、Boolean、Null、Undefined、Symbol，占用空間小且大小固定，值直接保存在棧內存中，是按值訪問，對于Object引用類型，其指針放置于棧內存中，指向堆內存的實際地址，是通過引用訪問。
那么此時我們來看一下上邊的示例，在內存中對于obj對象是存放在堆內存的，如果在對象中的屬性值是個基本數(shù)據(jù)類型，那么其會跟這個對象存儲在同一塊內存區(qū)域，但是這個屬性值同樣可能是一個引用類型，那么對于say這個函數(shù)也是存在于堆內存中的，實際上在此處我們可以將其理解為這個函數(shù)的實際定義在一個內存區(qū)域(以一個匿名函數(shù)的形式存在)，而obj這個對象同樣在其他的一個內存區(qū)域，obj通過say這個屬性指向了這個匿名函數(shù)的內存地址，obj --say--> funtion，那么此時問題來了，由于這種內存結構，我們可以使任何變量對象等指向這個函數(shù)，所以在JavaScript的函數(shù)中是需要允許我們取得運行環(huán)境的值以供使用的，我們必須要有一種機制，能夠在函數(shù)體內部獲得當前的運行環(huán)境context，所以this就出現(xiàn)了，它的設計目的就是在函數(shù)體內部，指代函數(shù)當前的運行環(huán)境。

使用

我們需要記住，this是在運行時進行綁定的，并不是在定義時綁定，它的context取決于函數(shù)調用時的各種條件，簡單來說this的綁定和函數(shù)聲明的位置沒有任何關系，只取決于函數(shù)的調用方式，再簡單來說this永遠指向調用者，但箭頭函數(shù)除外，接下來我們介紹一下五種this的使用情況。

默認綁定

最常用的函數(shù)調用類型即獨立函數(shù)調用，這個也是優(yōu)先級最低的一個，此時this指向全局對象，注意如果使用嚴格模式strict mode，那么全局對象將無法使用默認綁定，因此this會變?yōu)?code>undefined。

var a = 1; // 變量聲明到全局對象中
function f1() {
 return this.a;
}

function f2() {
 "use strict";
 return this;
}

console.log(f1()); // 1 // 實際上是調用window.f1()而this永遠指向調用者即window
console.log(f2()); // undefined // 實際上是調用 window.f2() 此時由于嚴格模式use strict所以在函數(shù)內部this為undefined

隱式綁定

對象屬性引用鏈中只有最頂層或者說最后一層會影響this，同樣也是this永遠指向調用者，具體點說應該是指向最近的調用者，當然箭頭函數(shù)除外，另外我們可能有意無意地創(chuàng)建間接引用地情況，這個情況下同樣也適用于this指向調用者，在上文分析那部分使用的示例就屬于間接引用的情況。

function f() {
 console.log(this.a);
}
var obj1 = {
 a: 1,
 f: f
};
var obj2 = {
 a: 11,
 obj1: obj1
};
obj2.obj1.f(); // 1 // 最后一層調用者即obj1

function f() {
 console.log(this.a);
}
var obj1 = {
 a: 1,
 f: f
};
var obj2 = {
 a: 11,
};
obj2.f = obj1.f; // 間接引用
obj2.f(); // 11 // 調用者即為obj2

顯示綁定

如果我們想把某個函數(shù)強制在某個環(huán)境即對象上，那么就可以使用apply、call、bind強制綁定this去執(zhí)行即可，每個Function對象都存在apply()、call()、bind()方法，其作用都是可以在特定的作用域中調用函數(shù)，等于設置函數(shù)體內this對象的值，以擴充函數(shù)賴以運行的作用域，此外需要注意使用bind綁定this的優(yōu)先級是大于apply和call的，即使用bind綁定this后的函數(shù)使用apply和call是無法改變this指向的。

window.name = "A"; // 掛載到window對象的name
document.name = "B"; // 掛載到document對象的name
var s = { // 自定義一個對象s
 name: "C"
}

var rollCall = {
 name: "Teacher",
 sayName: function(){
 console.log(this.name);
 }
}
rollCall.sayName(); // Teacher

// apply
rollCall.sayName.apply(); // A // 不傳參默認綁定window
rollCall.sayName.apply(window); // A // 綁定window對象
rollCall.sayName.apply(document); // B // 綁定document對象
rollCall.sayName.apply(s); // C // 綁定自定義對象

// call
rollCall.sayName.call(); // A // 不傳參默認綁定window
rollCall.sayName.call(window); // A // 綁定window對象
rollCall.sayName.call(document); // B // 綁定document對象
rollCall.sayName.call(s); // C // 綁定自定義對象

// bind // 最后一個()是為讓其執(zhí)行
rollCall.sayName.bind()(); //A // 不傳參默認綁定window
rollCall.sayName.bind(window)(); //A // 綁定window對象
rollCall.sayName.bind(document)(); //B // 綁定document對象
rollCall.sayName.bind(s)(); // C // 綁定自定義對象

new綁定

在JavaScript中new是一個語法糖，可以簡化代碼的編寫，可以批量創(chuàng)建對象實例，在new的過程實際上進行了以下操作。

創(chuàng)建一個空的簡單JavaScript對象即{}。鏈接該對象(即設置該對象的構造函數(shù))到另一個對象。將步驟1新創(chuàng)建的對象作為this的上下文context。如果該函數(shù)沒有返回對象，則返回步驟1創(chuàng)建的對象。

function _new(base,...args){
 var obj = {};
 obj.__proto__ = base.prototype;
 base.apply(obj, args);
 return obj;
}

function Funct(a) {
 this.a = a;
}
var f1 = new Funct(1);
console.log(f1.a); // 1

var f2 = _new(Funct, 1);
console.log(f2.a); // 1

箭頭函數(shù)

箭頭函數(shù)沒有單獨的this，在箭頭函數(shù)的函數(shù)體中使用this時，會取得其上下文context環(huán)境中的this。箭頭函數(shù)調用時并不會生成自身作用域下的this，它只會從自己的作用域鏈的上一層繼承this。由于箭頭函數(shù)沒有自己的this指針，使用apply、call、bind僅能傳遞參數(shù)而不能動態(tài)改變箭頭函數(shù)的this指向，另外箭頭函數(shù)不能用作構造器，使用new實例化時會拋出異常。

window.name = 1;
var obj = {
 name: 11,
 say: function(){
 const f1 = () => {
 return this.name;
 }
 console.log(f1()); // 11 // 直接調用者為window 但是由于箭頭函數(shù)不綁定this所以取得context中的this即obj對象
 const f2 = function(){
 return this.name;
 }
 console.log(f2()); // 1 // 直接調用者為window 普通函數(shù)所以
 return this.name;
 }
}

console.log(obj.say()); // 11 // 直接調用者為obj 執(zhí)行過程中的函數(shù)內context的this為obj對象

示例

function s(){
 console.log(this);
}

// window中直接調用 // 非 use strict
s(); // Window // 等同于window.s()，調用者為window
// window是Window的一個實例 // window instanceof Window //true

// 新建對象s1
var s1 = {
 t1: function(){ // 測試this指向調用者
 console.log(this); // s1
 s(); // Window // 此次調用仍然相當 window.s()，調用者為window
 },
 t2: () => { // 測試箭頭函數(shù)，this并未指向調用者
 console.log(this);
 },
 t3: { // 測試對象中的對象
 tt1: function() {
 console.log(this);
 } 
 },
 t4: { // 測試箭頭函數(shù)以及非函數(shù)調用this并未指向調用者
 tt1: () => {
 console.log(this);
 } 
 },
 t5: function(){ // 測試函數(shù)調用時箭頭函數(shù)的this的指向，其指向了上一層對象的調用者
 return {
 tt1: () => {
 console.log(this);
 }
 }
 }
}
s1.t1(); // s1對象 // 此處的調用者為 s1 所以打印對象為 s1
s1.t2(); // Window
s1.t3.tt1(); // s1.t3對象
s1.t4.tt1(); // Window
s1.t5().tt1(); // s1對象

到此這篇關于深入理解Js中的this的文章就介紹到這了,更多相關深入理解Js中的this內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！