js中this對象用法分析
this對象是在函數(shù)運行時,基于函數(shù)的執(zhí)行環(huán)境綁定的。
其實這句話的本質(zhì)就是,誰調(diào)用了函數(shù),this就指向誰
具體的來說,通常有以下幾種情況:
全局函數(shù)
在全局環(huán)境中,this指向Window
//例子1
function A() {
console.log(this)
}
A();//Window
上面的例子很簡單,函數(shù)A在全局環(huán)境中執(zhí)行,也就是全局對象Window調(diào)用了函數(shù)。此時this指向Window
對象方法
作為對象方法調(diào)用時,this指向調(diào)用該方法的對象
//例子2
var b = {
getThis:function(){
console.log(this)
}
}
b.getThis()//b
到這里我們舉的例子都比較簡單易懂,接下來來一個有意思的:
//例子3
var c = {
getFunc:function(){
return function(){
console.log(this)
}
}
}
var cFun = c.getFunc()
cFun()//Window
這個例子和前一個例子不一樣,運行c.getFunc()時,首先返回的是一個匿名函數(shù),我們將這個函數(shù)賦值給cFun,接著在全局環(huán)境中調(diào)用了cFun(),所以此時this指向的還是Window。
如果我們一定要讓這里返回的是c對象呢?在開頭我們說過,this對象是在函數(shù)執(zhí)行時確定的,在例子3中,執(zhí)行c.getFunc()時,this對象指向的還是c,所以我們只要保持住這個this就好了,對上面的代碼稍微改動:
//例子4
var c = {
getFunc:function(){
var that = this //在這里保留住this
return function(){
console.log(that)
}
}
}
var cFun = c.getFunc()
cFun()//c
這也就是我們經(jīng)??梢栽谝恍┐a中看到var self = this或者var that = this之類的原因了。
call和apply
此時this對象通常指向函數(shù)中指定的this值(注意這里的通常2字,考試要考的)
call和apply算是老生常談,但還是稍微介紹下,怕新同學(xué)可能沒接觸過(其實是為了湊點字數(shù)),拿call來說,語法是這樣的
fun.call(thisArg, arg1, arg2, ...)
這個方法怎么用呢,看下面的例子:
//例子5
var d = {
getThis:function(){
console.log(this)
}
}
var e = {
name:'e'//(給e寫個`name`屬性只是因為覺得孤零零的太難看了~~)
}
d.getThis.call(e)//e
在這里我們就可以看出call函數(shù)的意思了:指定一個對象o1去調(diào)用其他對象o2的方法,此時this對象指向o1
好了,那為什么前面我們說通常呢?因為,這里的thisArg是可以指定為null和undefined的。請看:
//例子6
var d = {
getThis:function(){
console.log(this)
}
}
d.getThis.call(null)//Window
d.getThis.call(undefined)//Window
此時的this指向全局對象Window
箭頭函數(shù)
es6中的箭頭函數(shù)現(xiàn)在也用的比較頻繁,但是有個需要注意的點是:
函數(shù)體內(nèi)的this對象,就是定義時所在的對象,而不是使用時所在的對象。
其實出現(xiàn)這種情況的根本原因是:箭頭函數(shù)沒有this對象,所以箭頭函數(shù)的this就是外層代碼的this
//例子7
var f = {
getThis:()=>{
console.log(this)
}
}
f.getThis()//Window
這個例子和前面例子2是基本一樣的,只是把普通函數(shù)改寫成箭頭函數(shù),但是此時的this對象已經(jīng)指向了外層的Window。
考慮到這一點可能不好理解,我們再看幾個例子:
//例子8
var g = {
getThis:function(){
return function(){console.log(this)}
}
}
var h = {
getThis:function(){
return ()=> console.log(this)
}
}
g.getThis()()//Window
h.getThis()()//h
這個例子里,g的getThis寫法就和之前的例子3一樣,由于函數(shù)在全局環(huán)境中運行,所以此時this指向Window;h的getThis使用了箭頭函數(shù),所以this指向了外層代碼塊的this所以,此時this指向的是h。
總結(jié)
一般情況下this對象指向調(diào)用函數(shù)的對象,全局環(huán)境中執(zhí)行函數(shù)this對象指向Window
在call和apply函數(shù)中this指向指定的對象,如果指定的對為undefined或者null,那么this對象指向Window
在箭頭函數(shù)中,this對象等同于外層代碼塊的this
然后依然是每次都一樣的結(jié)尾,如果內(nèi)容有錯誤的地方歡迎指出;如果對你有幫助,歡迎點贊和收藏,感謝你對腳本之家的支持。
相關(guān)文章
JavaScript中的Math.atan2()方法使用詳解
這篇文章主要介紹了JavaScript中的Math.atan2()方法使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
有關(guān)于JS構(gòu)造函數(shù)的重載和工廠方法
有關(guān)于JS構(gòu)造函數(shù)的重載和工廠方法,對此有需要的朋友,參考一下。2013-04-04
JavaScript基礎(chǔ)語法與數(shù)據(jù)類型介紹
這篇文章介紹了JavaScript基礎(chǔ)語法與數(shù)據(jù)類型,文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-02-02
JavaScript數(shù)據(jù)結(jié)構(gòu)和算法之二叉樹詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)和算法之二叉樹詳解,本文講解了二叉樹的概念、二叉樹的特點、二叉樹節(jié)點的定義、查找最大和最小值等內(nèi)容,需要的朋友可以參考下2015-02-02

