js中this不同場景中的含義

1. 全局函數

在全局環境中,this指向Window

 function A(){
    console.log(this)
 }
  A();//Window

2. 對象方法

作爲對象方法調用時,this指向調用該方法的對象

var b={
	getThis:function(){
		console.log(this)
	}
b.getThis()//b

下面這個例子不太一樣,有點難度,一般會入坑

var c ={
	getFunc:function(){
		return function(){
			console.log(this)
	 	}
	  }
 }
 var cFun =  c.getFunc()
 cFun()//window

這個例子和前一個例子不一樣,運行c.getFunc()時,首先返回的是一個匿名函數,我們將這個函數賦值給cFun,接着在全局環境中調用了cFun(),此時this指向的還是Window。

如果我們一定要讓這裏返回的時c對象呢?在開頭我們說過,this對象實在函數執行時確定的,在例子3中,執行c.getFunc()時,this對象指向的還是c,所以我們只要包喫住這個this就好了,對上面的代碼稍微改動:

var c={
	getFunc:function(){
		var that = this //在這裏保留住this
			return function(){
				console.log(that)
			 }
	  }
	}
	var cFun = c.getFunc()
	cFun() //c

3. call 和apply

此時this對象通常指向函數中制定的this值(注意這裏的通常2字)

//例子5
var d = {
getThis:function(){
 console.log(this)
}
}
var e = {
name:'e'//(給e寫個`name`屬性只是因爲覺得孤零零的太難看了~~)
}
d.getThis.call(e)//e

這裏我們可以看出call函數:指定一個對象o1去調用其他對象o2的方法,此時this對象指向o1.
前面說的通常是有線面這種情況的,這裏thisArg是可以指定爲null和undefind。請看:

//例子6
var d = {
 getThis:function(){
  console.log(this)
 }
}
 d.getThis.call(null)//Window
 d.getThis.call(undefined)//Window

此時的this指向全局對象Window

4. 箭頭函數

es6 中的箭頭函數現在也用的比較頻繁,但是有個需要注意的點是:函數體內的this對象,就是定義該箭頭函數時所在的對象,而不是使用時所在的對象。
其實出現這種情況根本原因是:箭頭函數沒有this對象,調用箭頭函數的this時,指向是其聲明時所在的作用於的this.

//例子7
 var f = {
	 getThis:()=>{
   		console.log(this)
  		}
 }
 f.getThis()//Window
     	

這個例子和前面例子2是基本一樣的,只是把普通函數改寫成箭頭函數,但是此時的this對象已經指向了外層的Window。

  • 總結

1、 JavaScript中this關鍵字代表的是一個函數的上下文環境,這個上下文環境在大多數情況下指的是函數運行封裝這個函數的那個對象。
2、當不通過任何對象單獨調用一個函數時,上下文環境指的就是全局的window對象。在一個對象的方法中使用this指向的是這個對象本身。
3、對象中嵌套函數其上下文環境是全局的window對象,而非包含它的那個對象。
在call和apply函數中this指向指定的對象,如果指定的對爲undefined或者null,那麼this對象指向Window
在箭頭函數中,this對象等同於外層代碼塊的this

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章