JavaScript中的this指向問題怎么解決

這篇文章主要介紹了一文搞懂JavaScript中的this指向問題的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇一文搞懂JavaScript中的this指向問題文章都會有所收獲，下面我們一起來看看吧。

this的概念：

• 在js中，this的意思為“這個;當前”，是一個指針型變量，它動態指向當前函數的運行環境。

• 在不同的場景中調用同一個函數，this的指向也可能會發生變化，但是它永遠指向其所在函數的真實調用者；如果沒有調用者，就指向全局對象window。

普通函數：關于this，誰調用就指向誰，沒有調用者，就指向全局對象window。箭頭函數：箭頭函數的this指向于函數作用域所用的對象。

一、全局環境下的this指向

在全局作用域下，this始終指向全局對象window，無論是否是嚴格模式！

congsole.log()完整的寫法是window.console.log(),window可以省略，window調用了console.log()方法，所以此時this指向window。

二、函數內的this

• 普通函數內的this分為兩種情況，嚴格模式下和非嚴格模式下。

1. 嚴格模式下：

直接test()調用函數,this指向undefined，window.test()調用函數this指向window。因此，在嚴格模式下， 我們對代碼的的調用必須嚴格的寫出被調用的函數的對象，不可以有省略或者說簡寫。

2. 非嚴格模式下：

非嚴格模式下，通過test()和window.test()調用函數對象，this都指向window。

三、對象中的this

對象內部方法的this指向調用這些方法的對象，也就是誰調用就指向誰。

1. 一層對象：

調用obj.skill()方法，返回值為蒙犽，說明此時this指向obj。

2. 二層對象：

調用skill2()方法的順序為，obj.obj2.skill2() ,返回值為魯班，說明skill2()方法中的this指向obj2。

總結：

• 函數的定義位置不影響其this指向，this指向只和調用函數的對象有關。

• 多層嵌套的對象，內部方法的this指向離被調用函數最近的對象。

四、箭頭函數中的this

箭頭函數：this指向于函數作用域所用的對象。

• 箭頭函數的重要特征：箭頭函數中沒有this和arguments，是真的沒有！

• 箭頭函數沒有自己的this指向，它會捕獲自己定義所處的外層執行環境，并且繼承這個this值,指向當前定義時所在的對象。箭頭函數的this指向在被定義的時候就確定了，之后永遠都不會改變。即使使用call()、apply()、bind()等方法改變this指向也不可以。

例子1：

• 聲明的是全局變量Obj，this指向箭頭函數所在全局作用域的對象，即indow對象。

例子2：

• 由于show函數是箭頭函數，所以自身不能綁定this，因此找它的上一級作用域。如果父級作用域還是箭頭函數，就再往上找，一層一層的直到直到this的指向。

• window.show()返回值是window，所以this此時指向window；

• window.obj.show(),obj是對象，非箭頭函數，所以找到這里就停止了，this綁定到obj上。window調用obj，所以obj中的this也指向window。

五、構造函數中的this

構造函數中的this是指向實例。

由上圖可以看出，構造函數中的this指向構造函數下創建的實例。

六、原型鏈中的this

this這個值在一個繼承機制中，仍然是指向它原本屬于的對象，而不是從原型鏈上找到它時，它所屬于的對象。

七、改變this指向的方法

1. call()

• call（a, b, c）方法接收三個參數，第一個是this指向，第二個，三個是傳遞給函數的實參，可以是數字，字符串，數組等類型的數據類型都可以。

示例：

//定義函數function fn(n1,n2){
   console.log(this);  
   console.log(n1,n2)}//調用call()方法fn.call();//=>this:window;let obj = {fn:fn};fn.call(obj);
   //=>this:obj;n1,n2:undefinedfn.call(1,2);//=>this: 1;n1=2,n2=undefined;fn.call(obj,1,2);//=>this: obj;n1=1,n2=2;
   //Call方法的幾個特殊屬性
   //非嚴格模式下fn.call(undefined);//this=>windowfn.call(null);//this=>window
   //嚴格模式下"use strict"fn.call(undefined);//this=>undefinedfn.call(null);//this=>null

2. apply()

• apply(a, [b])和call基本上一致，唯一區別在于傳參方式，apply把需要傳遞給fn()的參數放到一個數組（或者類數組）中傳遞進去，雖然寫的是一個數組，但是也相當于給fn()一個個的傳遞。

• 
  

  //call()的傳參方式
  fn.call(obj, 1, 2);//apply()的傳參方式fn.apply(obj, [1, 2]);

示例：

//apply方法的使用和call方法基本相同，唯一的區別是，apply方法傳參要求是數組類型的，數組內可以任意形式的數據
function fn (n1,n2){
    console.log(this);
    console.log(n1,n2)
    console.log(arguments)}let obj = {fn:fn};
    //調用apply()方法
    fn.applay(abj,[1,2]);fn.applay(abj,1,2)；
    //報錯
    fn.applay(abj,[11,'apply',{a:123}]);
    //注意第二個參數必須是數組，否則會報錯

3. bind()

• bind（a, b, c）：語法和call一模一樣，區別在于立即執行還是等待執行，bind不兼容IE6~8

• bind與call的唯一區別就是call直接改變函數test的指向，而bind是生成了一個新函數test2()，該函數改變了指向。

• 
  

  //call()方法：改變fn中的this，并且把fn立即執行fn.call(obj, 1, 2); //bind()方法：改變fn中的this，fn并不執行fn.bind(obj, 1, 2);

示例：

//bind和call方法調用形式類似，但是原理完全不同
fn.call(obj,10,20);//=>fn先執行，將fn內的this指向obj，并且把參數10,20傳遞給fn

fn.bind(obj,10,20)//bind是先將fn中的this指向obj，并且將參數10,20預先傳遞給fn，但是此時的fn并沒有被執行，只有fn執行時this指向和傳遞參數才有作用
fn.bind(obj,10,20);//=>不會有任何輸出
fn.bind(obj,10,20)();//=>調用后才會有輸出

//=>需求：點擊box這個盒子的時候，需要執行fn，并且讓fn中的this指向obj
oBox.onclick=fn; //=>點擊的時候執行了fn,但此時fn中的this是oBox

oBox.onclick=fn.call(opp); //=>綁定事件的時候就已經把fn立即執行了(call本身就是立即執行函數),然后把fn執行的返回值綁定給事件

oBox.onclick=fn.bind(opp);
//=>fn.bind(opp)：fn調取Function.prototype上的bind方法，執行這個/* 
 * function(){
 *     fn.call(opp);
 * }
 */
oBox.onclick=function(){
   //=>this:oBox
    fn.call(opp);
}

相同點：

• call、apply和bind都是JS函數的公有的內部方法，他們都是重置函數的this，改變函數的執行環節。

不同點：

• bind是創建一個新的函數，而call和aplay是用來調用函數；

• call和apply作用一樣，只不過call為函數提供的參數是一個個地羅列出來，而apply為函數提供的參數是一個數組

關于“一文搞懂JavaScript中的this指向問題”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“一文搞懂JavaScript中的this指向問題”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。