js之this指向規則

2022-08-16 18:24:17 字數 2056 閱讀 5564

1.在瀏覽器環境中,this在全域性作用域下指向window物件,nodejs裡面指向global物件

2.函式中三種不同的指向

// 定義乙個函式

function foo()

不同的環境指向不同的物件

// 直接呼叫

foo(); //window/global物件

// 放在物件裡使用

let obj =

obj.foo(); //obj物件

foo.call("abc"); // string物件

3.繫結方式

3a 預設繫結,也就是獨立的函式呼叫this或者函式作為引數傳入另外乙個函式,這時候this都是預設繫結的全域性物件

function test1() 

function test2()

function test3()

test1();

3b 隱式呼叫,也就是某個物件發起的函式呼叫this。

function foo() 

var obj1 =

var obj2 =

obj2.obj1.foo(); // obj1

注意下面的呼叫方式是預設繫結

var bar = obj1.foo;

bar();

3c 顯示繫結
function foo() 

foo.call(global); // 全域性物件

foo.call(); //

foo.call(123); // number物件,存放是123

bind函式(其實就是function.prototype.bind)可以將乙個函式顯示繫結到乙個物件上

function foo() 

var obj =

var bar = foo.bind(obj);

bar(); // obj物件

bar(); // obj物件

3d 特殊的內建函式

在js的一些內建函式裡面,this指向會有一些不一樣。

settimeout的函式引數裡面的this指向的是全域性物件,foreach預設下也是全域性物件,但是可以傳入第二引數來指定this繫結的物件。

還有在dom操作中,操作函式中的this指向的是節點物件

var box = document.queryselector(".box");

box.onclick = function()

3e new關鍵字繫結

使用new關鍵字呼叫函式時,建立的新物件會被執行prototype連線,然後繫結到函式呼叫的this上,如果函式沒有返回其他物件,表示式會返回這個新物件。

// 建立person

function person(name)

this.name = name;

}var p = new person("aaa");

console.log(p); // person

4 優先順序

預設繫結最低,顯示大於隱式,new高於隱式和顯示。

5 其他情況

5.1顯示繫結時傳入的是null或者undefined,那麼這個顯示繫結就被忽略使用預設繫結

5.2 間接函式引用,使用預設繫結

首先知道(num1=num2)的結果是num2

function foo() 

var obj1 = ;

var obj2 =

obj1.foo(); // obj1物件

// ()裡面的結果是foo函式

(obj2.foo = obj1.foo)(); // window/global

5.3 箭頭函式

箭頭函式沒有作用域,不使用上述規則,而是根據外層作用域來決定this的指向

js物件導向之this指向

對於前端開發者來說,this是乙個讓人又愛又恨的小妖精。應用得好,專案事半功倍,應用得不好,專案可能漏洞百出。接下來本文就將揭開this的神秘面紗。鄙人第一次鼓足了膽子寫部落格,望路過的大神輕踩 首先強調的一點是,在函式中this指向不是在定義的時候確定的,而是在真正執行此函式時確定的。因為this...

JS高階之 this的指向

this到底指向什麼地方,決定於函式的呼叫方式。1 指向全域性變數 函式被單獨呼叫的時候 function fn var a 2 fn 2 fn單獨呼叫,this引用window 2 指向某物件 隱式繫結 隱式呼叫的意思是,函式呼叫時擁有乙個上下文物件 function fn var obj obj...

JS基礎 this指向

解析器在呼叫函式每次都會向函式內部傳遞進乙個隱含的引數,這個隱含的引數就是this,this指向的是乙個物件,這個物件我們稱為函式執行的上下文物件 根據函式的呼叫方式的不同,this會指向不同的物件 1.以函式的形式呼叫時,this永遠都是window 2.以方法的形式呼叫時,this就是呼叫方法的...