this指向問題你真的徹底掌握了嗎?

2022-08-03 06:27:10 字數 2282 閱讀 2641

在前端的面試中,this指向與物件導向是必考題,也是日常開發中繞不開的話題,很多前端新手總感覺this指向變化莫測,琢磨不透;也有很多前端老鳥時常在this指向這裡掉坑,本文主要圍繞 this指向**一下,看看你是否真的徹底掌握了。

我們可以直接在全域性中向控制台列印 this,檢視指向;

在瀏覽器中執行,會輸出

console.log(this)  // 輸出 window
在 node 中執行,會輸出

console.log(this)  // 輸出 {}
可以看出在 node 環境中輸出了乙個空物件,可以進一步測試

console.log(this === module.exports)  // 輸出 true
結論:全域性作用域中,在瀏覽器執行 this 指向的是 window;在 node 中執行,this 指向的是 module.exports。

按函式不同的使用場景,歸納為以下幾種情況,分別舉例進行說明。

設定乙個簡單的場景,有兩個按鈕,點選按鈕,可以讓按鈕背景色變成紅色,兩個按鈕互不影響

...

按鈕1按鈕2

....

var btn1 = document.getelementbyid("btn1");

var btn2 = document.getelementbyid("btn2");

btn1.onclick = changebgcolor;

btn2.onclick = changebgcolor;

function changebgcolor()

結論:此時 this 指向的是呼叫它的 dom 物件。

在普通模式下直接呼叫fn(),this 會指向 window;

function fn() 

fn(); // 輸出 window

window.fn(); // 輸出 window

在嚴格模式下呼叫,this 指向的是 undefined,如下:

'use strict'

function()

fn(); // 輸出 undefined

window.fn(); // 輸出 window

結論:誰呼叫指向誰,嚴格模式下,函式沒有被 window 顯示呼叫,會指向 undefined。

var obj = 

}obj.b(); // 輸出 , 即物件 obj

window.obj.b(); // 輸出 , 即物件 obj

var c = obj.b;

c(); // 輸出 window

window.c(); // 輸出 window

function fn(age) 

var obj = new fn(31); // 輸出 fn ,即新建立的物件

# 有種特殊情況,當建構函式中存在 return 時

function fn(argu) 

// 返回個空字元傳

var obj1 = new fn('');

console.log(obj1.age); // 輸出 10

// 返回個物件

var obj2 = new fn({});

console.log(obj2.age); // 輸出 undefined

// 返回 null

var obj3 = new fn(null);

console.log(obj3.age); // 輸出 10

結論:在建構函式中如果return 乙個物件,this 指向返回的的物件,return null 和 非物件 及沒有顯式 return 時,則 this 指向 new 新建立的對像。

var obj1 = 

}var obj2 =

}obj1.b(); // 輸出 即 obj1物件

obj2.b(); // 輸出 window 物件

結論:箭頭函式本身是沒有 this 和 arguments 的,在箭頭函式中引用 this 實際上呼叫的是定義上一層作用域的 this ,這裡強調一下是上一層作用域,因為物件是不能形成獨立的作用域。

一文徹底搞懂父類引用指向子類物件問題

public class father private void run public father public static void main string args class sonextends father public void sleep public son public int...

一招讓你徹底掌握C語言中運用巨集以及 與 的妙用

學習c語言,特別是閱讀linux原始碼的時候,大家經常遇到很多的巨集定義,有簡單的,當然也有很複雜的。有事乙個巨集定義甚至有幾十行之多,遇到這種巨集定義的大家基本上是一臉懵逼,不知所措,其實想複雜的巨集定義沒有去深究的價值,簡短的才有深究的價值。但是你不理解這些長的巨集定義就無法接著理解接下來的 今...

你真的會問問題嗎?提問的智慧型能讓你更容易進步!

在工作和生活中,總是會有很多人問我很多關於技術方面的問題。有一些時候,問問題的和答問題的總是會有一些不爽的事情發生。如下面的幾種情況 1 比如 我的電腦老是藍屏,怎麼辦?通常這樣的問題90 以上的回答是 重灌吧 這讓問問題的人感到很沮喪,但你不能不承認那不是答案。而且有時候讓人無法解答,比如 我的m...