js中this關鍵字詳解

2021-08-09 10:43:55 字數 1964 閱讀 7470

首先,js對於this,我們有乙個原則,那就是this指向的是呼叫該函式的物件。

下面分四種情況:

情況一:純粹的函式呼叫

這是函式的最通常用法,屬於全域性性呼叫,因此this就代表全域性物件global,也就是指向windows

請看下面這段**,它的執行結果是1。 

複製**

**如下:

function test() 

test(); // 1 

為了證明this就是全域性物件,我對**做一些改變: 

複製**

**如下:

var x = 1; 

function test() 

test(); // 1 

執行結果還是1。再變一下: 

複製**

**如下:

var x = 1; 

function test() 

test(); 

alert(x); //0 

情況二:作為物件方法的呼叫

函式還可以作為某個物件的方法呼叫,這時this就指這個上級物件。 

複製**

**如下:

function test() 

var o = {}; 

o.x = 1; 

o.m = test; 

o.m(); // 1 

這裡o.m=test,o.m()就相當於呼叫test方法,而test這裡相當於被o呼叫了,因此this指向的是o,this.x也就是o.x=1

情況三 作為構造函式呼叫

所謂建構函式,就是通過這個函式生成乙個新物件(object)。這時,this就指這個新物件。 

複製**

**如下:

function test() 

var o = new test(); 

alert(o.x); // 1 

在這裡,畢竟物件是通過這個test函式生成的,因此,this指向的也就是這個物件,this.x=o.x=1

執行結果為1。為了表明這時this不是全域性物件,我對**做一些改變: 

複製**

**如下:

var x = 2; 

function test() 

var o = new test(); 

alert(x); //2 

執行結果為2,表明全域性變數x的值根本沒變。 

複製**

**如下:

var x = 0; 

function test() 

var o={}; 

o.x = 1; 

o.m = test; 

如果把最後一行**修改為 

複製**

**如下:

執行結果就變成了1,證明了這時this代表的是物件o

一些例項:

var name = "the window";

var object =

}alert(object.getnamefunc());   //my object

var fun=object.getnamefunc; //the window

alert(fun());

解釋:第乙個是objec.getnamefunc(),getnamefunc本來就是乙個函式屬性,後面有括號相當於直接呼叫這個方法,就是直接執行函式裡面的內容,就是直接執行object的方法,因此this在這裡指的是object。

第二個是fun=object.getnamefunc,那麼object.getnamefunc對應的是function() ,因此fun對應的也是這個,然後fun()相當於在全域性執行fun方法,也就是在全域性執行function() 方法,因此this指向的是全域性window

更加容易理解的教程:

js中this關鍵字用法詳解

1 全域性環境中的this 在全域性環境中,this 指向全域性物件global,即 window 物件 如 alert this 顯示 object window alert this window 顯示 true 2 事件處理中的this 在事件處理函式中,this 指向當前節點,即繫結事件的節...

Js中delete關鍵字

用來刪除物件的屬性,還可以用來使用var宣告變數 delete關鍵字有返回值,豔紅來表示刪除屬性是否刪除成功 true false 如果刪除的是不存在的屬性,則返回的是true var 變數名 delete 物件名.屬性名 案列 var obj console.log obj.name 張三 var...

js中的this關鍵字

普通函式 window functionfn fn window 事件函式 指向事件源 var btn document.queryselector button btn.onclick function 定時器 中也是window setinterval function 1000 預保留this...