js中this指向問題 有例題

2021-09-27 04:18:09 字數 3616 閱讀 1892

先做一下美團2019的題

var name = 'global'

var obj = .bind(window)

}var bar = new obj.foo()

settimeout((function()),0)

console.log(bar.name)

var bar3 = bar2 = bar

bar2.name = "foo2"

console.log(bar3.name)

this指向函式自身

function foo(num) 

foo.count = 0;

var i;

for (i=0; i<10; i++)

} // foo: 6

// foo: 7

// foo: 8

// foo: 9

// foo 被呼叫了多少次? console.log( foo.count ); // 0

this指向函式作用域(有時對)

this 在任何情況下都不指向函式的詞法作用域

function foo() 

function bar()

foo(); // referenceerror: a is not defined

//this無法呼叫bar

this 的繫結和函式宣告的位置沒有任何關係,只取決於函式的呼叫方式

當乙個函式被呼叫時,會建立乙個活動記錄(有時候也稱為執行上下文)。這個記錄會包 含函式在**被呼叫(呼叫棧)、函式的呼叫方法、傳入的引數等資訊。this 就是記錄的 其中乙個屬性,會在函式執行的過程中用到。

看看函式在哪個作用域被呼叫的

function baz() 

function bar()

function foo()

baz(); // <-- baz 的呼叫位置

(new 繫結) var bar = new foo()

函式是否在某個上下文物件中呼叫(隱式繫結)?如果是的話,this 繫結的是那個上 下文物件。 var bar = obj1.foo()

如果都不是的話,使用預設繫結。如果在嚴格模式下,就繫結到 undefined,否則繫結到 全域性物件。 var bar = foo()

預設繫結

this預設繫結到全域性,若this所在函式為嚴格模式,則不會預設繫結

function foo()  

var a = 2;

foo(); // 2

隱式繫結
function foo() 

var obj = ;

obj.foo(); // 2

隱式丟失

function foo() 

var obj = ;

var bar = obj.foo; // 函式別名!

var a = "oops, global"; // a 是全域性物件的屬性

bar(); // "oops, global"

顯性繫結
//但也不能解決隱式丟失

function foo()

var obj = ;

foo.call( obj ); // 2

bind可以解決隱式丟失

function foo(something) 

var obj = ;

var bar = foo.bind( obj ); ****繫結後呼叫bar,始終與obj繫結

var b = bar( 3 ); // 2 3

console.log( b ); // 5

new繫結

建立(或者說構造)乙個全新的物件。

這個新物件會被執行 [[ 原型 ]] 連線。

這個新物件會繫結到函式呼叫的 this。

如果函式沒有返回其他物件,那麼 new 表示式中的函式呼叫會自動返回這個新物件。

function foo(a) 

var bar = new foo(2);

console.log( bar.a ); // 2

顯式繫結比隱式繫結優先順序更高

new繫結比隱式繫結優先順序更高

new和硬繫結。。。可以看書

硬繫結函式是否是被 new 呼叫,如果是的話就會使用新建立 的 this 替換硬繫結的 this。

被忽略的this

若是null就會呼叫預設繫結規則,一下就繫結到全域性中

function foo(a,b) // 把陣列「展開」成引數 

// 使用 bind(..) 進行柯里化

var bar = foo.bind( null, 2 );

bar( 3 ); // a:2, b:3

改進

這樣就不會this繫結到其他物件上

function foo(a,b) // 我們的 dmz 空物件 var ø = object.create( null ); 

// 把陣列展開成引數

// a:2, b:3

// 使用 bind(..) 進行柯里化

var bar = foo.bind( ø, 2 );

bar( 3 ); // a:2, b:3

間接引用
間接引用最容易在賦值時發生:

function foo()

var a = 2;

var o = ;

var p = ;

o.foo(); // 3

(p.foo = o.foo)(); // 2

軟繫結

軟繫結就是在不用顯性繫結的情況下,預設繫結obj,其他顯性繫結可以修改this

function foo() 

var obj = ,

obj2 = ,

obj3 = ;

var fooobj = foo.softbind( obj );

fooobj(); // name: obj

obj2.foo = foo.softbind(obj);

obj2.foo(); // name: obj2 <---- 看!!!

fooobj.call( obj3 ); // name: obj3 <---- 看!

settimeout( obj2.foo, 10 ); // name: obj <---- 應用了軟繫結

根據外層(函式或者全域性)作用域來決 定 this。

箭頭函式的繫結無法被修改

箭頭函式會繼承外層函式呼叫的 this 繫結

function foo() ,100); 

}var obj = ;foo.call( obj ); // 2

JS中this指向問題

解析器在呼叫函式時,每次都會向函式內部傳遞進乙個隱含的引數,這個隱含的引數就是this,this指向的是乙個物件,這個物件我們稱之為函式執行的上下文物件,根據函式的呼叫方式不同,this會指向不同的物件.簡單來說一下函式中this指向問題,1.this是什麼?任何函式本質上都是通過某個物件來呼叫的,...

JS中this指向問題

函式內部的this之和函式的呼叫方式有關,和函式的定義方式沒有關係functionfn fn windowvar obj obj.fn obj functionfn 或者可以這樣寫自呼叫函式 functionfn div document.queryselector div div.onclick ...

JS中this指向問題

與其它語言相比,js的this關鍵字的指向稍微有點差別。一 全域性環境 首選我們要明確一點,在全域性環境中 在任意函式體外部 無論是嚴格模式還是非嚴格模式,this都指向window。下面,我們來通過幾個例子理解一下。示例1 console.log this 這裡的this在全域性域下,指向wind...