JavaScript函數中this有哪些不同的指向

這篇文章主要介紹了JavaScript函數中this有哪些不同的指向，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

上下文和this關鍵字

在JavaScript中，函數有自己的執行上下文，在這里要特別注意下函數的執行上下文不是關于它是如何聲明的，也不是說函數的作用，而是關于如何在代碼中調用它，我們在調用此執行上下文時就會用到this。當this從函數內部訪問時，實際上就是訪問其執行上下文。

調用函數方式與this

上下文取決于函數的調用方式，我們可以通過4種不同的方式來調用上下文的函數,因此this也有四種不同的指向

1. 一個基本的函數調用

2. 使用上下文對象調用函數，也稱為隱式綁定。

3. 使用call()或調用函數apply()，也稱為顯式綁定。

4. 通過bind()方法綁定

基本函數調用

基本函數調用是調用函數的最簡單方法

例：

<script type="text/javascript">
	var name="張三";
	function student(){
		console.log(this.name);
	}
	student();
</script>

在這個例子中可以看出student（）是從全局范圍內調用函數，因此這里的this指代的是全局范圍，所以輸出結果為“”張三“”

隱式綁定

當函數被一個對象“包含”的時候，我們稱函數的this被隱式綁定到這個對象里面了

<script type="text/javascript">
var student={
	name:"張三",
	obj:function(){
		console.log(this.name)
	}
}
student.obj();
	</script>

obj函數雖然被放到對象里去但是并不會因為它被定義在對象的內部就會與外部產生區別，在隱式綁定下，obj通過this還是可以訪問到student對象中的a屬性

顯示綁定

可以使用call()或apply()方法調用函數，其執行上下文顯式綁定到對象，call和apply可以改變this指向

例：未使用call （）或者apply（）時

<script type="text/javascript">
var name="張三";
var obj = {
	name:"李四",
	fun:function(){
	console.log(this.name);}}
obj.fun();
</script>

利用call（）使this指向window

<script type="text/javascript">
var name="張三";
var obj = {
name:"李四",
fun:function(){
      onsole.log(this.name);}}
       obj.fun.call(window);
</script>

bind()綁定

bind()會創建一個函數，函數體內的this對象的值會被綁定到傳入bind()第一個參數的值，但是bind不執行函數，只返回一個可供執行的函數

<script type="text/javascript">
var a = {
	b : function(){
		var func = function(){
			console.log(this.c);
		}
		func.bind(this)();
	},
	c : 'Hello!'
}
a.b();
	</script>

通過bind方法將this指向c對象中的內容。

感謝你能夠認真閱讀完這篇文章，希望小編分享JavaScript函數中this有哪些不同的指向內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!