對于前端程序媛（員）來說，this這個機制應用的地方是很多的，所以搞懂是必要的，不熟練使用this將遇到一些困惑，下面是一些關于this的學習心得分享，希望大家可以一起學習：

1，this并不是指向自身

首先來看一段代碼

1 function foo(num) { 2 console.log("foo:" + num); //0 1 2 3 4 3 console.log(this); //window對象 4 this.count++; //記錄foo被調用的次數 5 } 6 foo.count = 0; //count 屬于foo的屬性 并不屬于window 7 var i; 8 for (i = 0; i < 10; i++) { 9 if (i < 5) { 10 foo(i); 11 } 12 } 13 console.log(foo.count) //0

很多人認為 ：函數內部的this指向當前這個函數，這是錯誤的

對于這個例子來說，一種解決方法是使用foo標識符代替this來指向自身

1 function foo(num) { 2 console.log("foo:" + num); //0 1 2 3 4 3 console.log(this); //window對象 4 foo.count++; //記錄foo被調用的次數 5 } 6 foo.count = 0; //count 屬于foo的屬性 并不屬于window 7 var i; 8 for (i = 0; i < 10; i++) { 9 if (i < 5) { 10 foo(i); 11 } 12 } 13 console.log(foo.count) //5

另一種方法是沒有規避了this使用

function foo(num) {console.log("foo:" + num); //0 1 2 3 4 console.log(this); //window對象 this.count++; //記錄foo被調用的次數 }foo.count = 0; //count 屬于foo的屬性 并不屬于windowvar i;for (i = 0; i < 10; i++) {if (i < 5) {foo.call(foo, i) //使用call() 確保this 指向函數foo }}console.log(foo.count) //5

2，this指向函數作用域(并不是一直都是對的）

?需要知道的一點是this在任何情況都不會指向函數的詞法作用域，因為作用域是無法通過js代碼訪問到的，它存在于引擎內部

下面這個代碼很好的說明了這個問題

function foo() {var a = 2;this.bar(); // this是window }function bar() {console.log(this); //windowconsole.log(this.a); //undefined }foo();

?

?this究竟是指向什么呢？this是在運行時進行綁定的，并不是在編寫時綁定的，它的上下文取決于函數調用時的各種條件，this綁定和函數聲明的位置沒有任何關系，只取決于函數的調用方式。

當函數調用時，會創建一個執行上下文，這個上下文會記錄函數在哪里調用了，函數的調用方法，函數參數等信息，this就是該上下文的一個屬性，會在函數執行的過程中用到。

3，函數在執行過程中this是如何綁定的

尋找函數的調用位置，其實有的很明顯，而某些編程模式會因此函數的真正的調用位置

分析調用棧

1 function baz() { 2 //當前的調用棧是baz 3 //因此，當前的調用位置是全局作用域 4 console.log("baz"); 5 bar(); //bar的調用位置 6 } 7 8 function bar() { 9 //當前的調用棧是baz->bar 10 //因此，當前的調用位置是baz 11 console.log("bar"); 12 foo(); //foo的調用位置 13 } 14 15 function foo() { 16 //當前的調用棧是baz->bar->foo 17 //因此，當前的調用位置是bar 18 console.log("foo"); 19 } 20 baz(); //baz的調用位置

分析調用棧是，決定了this的綁定

?4，this的綁定規則

①默認綁定：獨立函數調用? ，在下面的代碼中，foo（）是直接使用不帶任何修飾符的函數引用進行調用的，因此只能使用默認綁定

1 function foo() { 2 console.log(this.a); //this指向window 3 } 4 var a = 2; 5 foo(); //2

但是在嚴格模式下，全局對象將無法使用默認綁定，因此this會綁定到undefined

1 function foo() { 2 'use strict' 3 console.log(this); //undefined 4 console.log(this.a); //報錯 5 } 6 var a = 2; 7 foo();

但是有個微妙的非常重要的情況，雖然this的邦定規則完全取決于調用位置，但是只有foo運行在非嚴格模式下是默認綁定才能綁定到全局對象，但在嚴格模式下，于foo的調用位置無關了

1 function foo() { 2 console.log(this); //window 3 console.log(this.a); //2 4 } 5 var a = 2; 6 7 (function() { 8 'use strict' 9 console.log(this);//undefined 10 foo(); 11 })()

②隱式綁定

1 function foo() { 2 console.log(this); //obj 3 console.log(this.a); //2 4 } 5 var obj = { 6 a: 2, 7 foo: foo 8 } 9 obj.foo();

當foo被調用的時候，它的落腳點確實指向obj對象，當函數引用有上下文對象時，隱式綁定規則會把函數調用中的this邦定到這個上下文對象中，因此，調用foo()時，this被綁定到obj，因此，this.a和obj.a是一樣的

③顯示綁定

1 function foo() { 2 console.log(this); //obj 3 console.log(this.a); //2 4 } 5 var obj = { 6 a: 2 7 } 8 foo.call(obj)

.call(...)和apply(...)方法實現顯示綁定

他們的第一個參數是一個對象，不是對象的會利用自己的包裝對象轉換成對象（new Number()? ，new String() ，new Boolen()等），他們會把這個對象綁定到this，接著在調用函數時指定這個this,因為你可以直接指定this的綁定對象，因此我們稱為顯式綁定

④new綁定

1 function foo(a) { 2 this.a = a; 3 } 4 var bar = new foo(2); 5 console.log(bar.a);//2

構造函數是使用new操作時會被調用的函數。他們并不屬于類，也不會實例化一個類，實際上，甚至不能說他們是一直特殊的函數類型，他們只是用new操作費調用的普通函數而已。

使用new來調用函數，會自動執行下面操作：

1，創建（或者構造一個）全新的對象

2，這個對象會被執行【原型】連接

3，這個新對象會被綁定到函數調用的this,

4，如果函數沒有返回其他對象，那么new表達式中的函數調用會自動返回這個新對象

上面的代碼，使用new調用foo()時，我們會構造一個新的對象并把它綁定到foo()調用中的this上，new是最后一個可以影響函數調用時this邦定行為的方法，我們稱之為new綁定

轉載于:https://www.cnblogs.com/zhanghaiyu-Jade/p/10586650.html

總結

以上是生活随笔為你收集整理的this 相关的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。