JavaScript中的this有什么用

小編給大家分享一下JavaScript中的this有什么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

只需要記住幾個口訣就能正確找到this的指向:

1.不管函數或者方法是如何聲明的,要看這個函數或者方法最終是誰調用的,誰最終調用這個函數或方法,那么這個函數或方法中的this就是誰,(誰點出來的this就是誰).

2.看執行時而非定義時，只要函數(function)沒有綁定在對象上調用，它的 this 就是 window。

3.ES6,箭頭函數中的this 會綁定上下文中的this,創建箭頭函數時this是誰 以后一直都是那個誰

1.普通函數中的this

一個全局函數相當于給window對象添加了一個方法,所以第5行調用welcome函數和第6行調用welcome函數本質是一樣的,所以welcome函數最終是window對象在調用,所以welcome函數內部的this就指向了window對象.

運行結果為window  ,window.

2.作為對象的方法中的this

sayHi方法是由obj對象點出來調用的,所以sayHi方法中的this指向obj對象.所以輸出的是obj對象中的name的值.

結果如下

3.構造函數中的this

(1)直接調用構造函數

第3行,調用cat1函數的時候沒有用new關鍵字,那么這就意味著cat函數是window點出來調用的,所以Student函數中的this就是window,那么第1行第2行就是在給window添加name和age屬性,值分別是露露和12.  然后函數內部沒有寫return關鍵字那默認返回值是undefined.所以cat1接受到的是undefined.

整個輸出結果如下

(2)使用new調用構造函數

new關鍵字會創建一個對象,并且會把構造函數中的this指向這個對象,并且還會把這個對象自動返回, 那么執行完第3行代碼, cat1就是那個new關鍵字創建并返回的對象.在第1行第2行也已經給這個對象添加了name和age屬性.

所以上面的代碼執行結果如下：

4.  修改函數中this的默認指向:call、 apply、 bind

4.1.call();

語法：函數名.call(期望函數內部this指向誰, 參數1,參數2....);

4.2.apply();

語法：函數名.apply(this的新指向 , 數組或者偽數組);

輸出結果為：

apply()和call()輸出結果是一樣的，區別在于apply()只有2個參數，第一個參數是this的新指向，第二個參數是數組或者偽數組，調用的時候會把第二個參數（數組或偽數組）的元素依次的賦值給被調用函數的形參。

適用條件，參數是明確知道數量時用 call 。而不確定的時候用 apply，然后把參數 push 進數組傳遞進去。

4.3.bind();

bind()方法會創建一個新函數,當這個click事件綁定在被調用的時候，它的 this 關鍵詞會被設置成被傳入的值（這里指調用bind()時傳入的參數）.

語法：函數名.bind( this的新指向 ，可以寫參數也可以不寫參數 );

用bind()的方式調用getSum()函數，但是此時并不會執行getSum()函數，而是會返回一個和getSum()函數的函數體一模一樣但是this已經修改成obj對象的函數了，這個函數被新聲明的變量接收。 一般在this修改后才轉入實參。

javascript中的函數（普通函數、構造函數）本質上是一個對象，是由Function()構造函數實例化出來的對象，而call、apply、bind這三個方法都是定義在Function.prototype原型中的，那么意味著javascript中的所有函數都可以點出這三個方法來

5.上下文調用模式注意細節：

5.1如果使用函數上下文模式調用函數，第一個參數不是指向一個對象，而是指向一個 基本數據類型的值，那么函數中this的指向該類型的值？代碼如下：

5.2哪個函數使用上下文模式調用，修改的this就是哪個函數的

6.函數上下文調用模式的使用場景

6.1元素都是整數的數組求最大值

6.2偽數組轉換成真數組

6.3借用構造函數繼承

6.4 檢測數據類型

以上是“JavaScript中的this有什么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！