this指向自己理解的

2021-10-07 13:51:26 字數 3219 閱讀 8074

關於this,總結起來,主要有以下幾個途徑能夠被運用到。

1 物件方法中呼叫this:如果函式被當中物件的乙個方法進行呼叫,則this值指向該物件。

var person =

}person.

sayname()

;// this == person, alert: 'welcome alice'

在這裡,函式的this指向該物件(即 person);但是有一點需要注意,就是當物件的方法被賦予給乙個變數時,其則變為了函式觸發,此時的this為 window 或者 undefined(嚴格模式下),如下:

var person =

}var name =

'bob'

;var say = person.sayname;

// this == window || undefined

say();

// 'welcome bob' || throw an error: cannot read property 'name' of undefined(...)

2 函式內部使用

在函式內部當中使用了 this,即函式被當做方法使用,不同於 1 當中作為物件的方法使用,此時呼叫,是在全域性作用域下進行呼叫,即在window下進行呼叫,由定義可以知道,在全域性作用域下宣告乙個函式,其自動加為window的乙個屬性。this此時名正言順的會指向window,嚴格模式下為 undefined

function

saythis()

saythis

()

結合第一點,函式作為物件的乙個方法使用,這裡存在乙個小坑,即閉包;第一點當中存在乙個小坑,就是將物件的方法賦予給乙個變數的時候,其變為函式觸發,此時的 this 實際上是指向 window(非嚴格模式)。

那麼,當函式中返回乙個函式,此時在物件當中呼叫該方法,其就相當於是函式觸發,此時的 this,在不做任何上下文繫結的前提之下,其指向 window(非嚴格模式)。

var name =

'bob'

, person =;}

};person.

sayname()

();

當然,要解決這個問題的方法,很簡單,就是給他繫結乙個上下文。

var name =

'bob'

, person =

.bind

(this);

}};person.

sayname()

();

3 new 當中進行使用

我們知道在使用 new 方法建立物件的時候,會經過如下這些個過程:

function

person

(name, age)

var person1 =

newperson

('alice',29

);console.

log(person1.name)

;// alice

這裡要記得使用 new 運算子,否則,其只能算是普通的呼叫,而不是建立乙個新的例項物件。而當做普通函式呼叫的話,實際上即 第 2 種情況下,對函式普通呼叫,此時的 this 指向 window

function

person

(name, age);}

var person1 =

newperson

('alice');

console.

log(person1.name)

;// bob

console.

log(person1.age)

;// undefined

var a =

, func2:

function()

.(a)

,100);

}}; a.

func2()

// cherry

使用 call

var a =

, func2:

function()

.call

(a),

100);}

};a.

func2()

// cherry

使用 bind

var a =

, func2:

function()

.bind

(a)(),

100);}

};a.

func2()

// cherry

var a =

}var b = a.fn;

b.(a,[1,

2])// 3

var a =

}var b = a.fn;

b.call

(a,1,2

)// 3

bind()方法建立乙個新的函式, 當被呼叫時,將其this關鍵字設定為提供的值,在呼叫新函式時,在任何提供之前提供乙個給定的引數序列。

bind 是建立乙個新的函式,我們必須要手動去呼叫:

var a =

}var b = a.fn;

b.bind

(a,1,2

)()// 3

5 箭頭函式

眾所周知,es6 的箭頭函式是可以避免 es5 中使用 this 的坑的。箭頭函式的 this 始終指向函式定義時的 this,而非執行時。,箭頭函式需要記著這句話:「箭頭函式中沒有 this 繫結,必須通過查詢作用域鏈來決定其值,如果箭頭函式被非箭頭函式包含,則 this 繫結的是最近一層非箭頭函式的 this,否則,this 為 undefined」。

var name =

"windowsname"

;var a =

, func2:

function()

,100);

}}; a.

func2()

// cherry

this指向理解

首先必須要說的是,this的指向在函式定義的時候是確定不了的,只有函式執行的時候才能確定this到底指向誰,實際上this的最終指向的是那個呼叫它的物件 例子1 functiona a 按照我們上面說的this最終指向的是呼叫它的物件,這裡的函式a實際是被window物件所點出來的,下面的 就可以證...

this指向的簡單理解

this 本身含義 執行上下文 只能是物件 不是物件強行轉換成物件 this一般存在於函式中,表示當前函式的執行上下文,如果函式沒有被執行,那麼this沒有內容,只有函式在執行後this才有繫結。函式執行的位置 1 預設執行 自己執行自己 fn 預設情況下的隱式執行 this指向window 嚴格模...

關於js this指向的理解

var obj add1 function a var f v v this.count return f.call b,a add2 function a var f function v return f.call b,a console.log obj.add 1 2 console.log ...