javascript中關於this指向問題詳解

  前  言

LiuDaP

　　　在前端的學習中，咱們必然要用到js，js能夠說是前端必不可少的的東西。在學習js的過程當中，咱們會常常用到this這個東西，而this的指向問題就變得尤其重要。今天正好有空閒時間，就給你們詳細介紹一下js中關於this的指向問題，但願可以幫助到你們。

 　　

1、this的指向原理

　>>>僅僅一條就是：誰最終調用函數，this就指向誰。。

下面給你們作一下詳細的解釋：

　　（1）、this到底指向誰，不該該考慮函數在哪聲明，而是應該考慮函數在什麼地方調用

　　（2）、this指向的永遠只多是對象，而不是函數。

　　（3）、this指向的對象，叫作函數的上下文，也叫函數的content，還叫函數的調用者。

 

2、總結幾條關於this指向問題的規律

　　>>>注意：如下幾條規律特別好用，若是必要的話能夠直接背過。

　　一、經過函數名()調用的函數，this永遠指向window。

　　　　具體例子以下：

1 function func(){
2     this.name="wangwu";
3     console.log(this);
4 }
5 func(); //經過func()調用的，this永遠指向window。

 

　　>>>如下代碼直接經過func()調用函數，則this指向window對象。

　　二、函數做爲window內置函數的回掉函數使用，this指向window。例如：setInterval setTimeout等。

　　　　具體例子以下：

1 function func(){
2     this.name="wangwu";
3     console.log(this);
4 }
5 //函數做爲window內置函數的回掉函數使用，this指向window。
6 setTimeout(func,1000);

　　>>>以上代碼，func直接做爲setTimeout的回掉函數使用，則this指向window對象。

　　三、經過對象.方法調用函數，則this指向這個對象。

　　　　具體例子以下：

 1 function func(){
 2     this.name="wangwu";
 3     console.log(this);
 4 }
 5 var obj={
 6     name:"zhangsan",
 7     func:func
 8 }
 9 //經過對象.方法調用的，this指向這個對象
10 obj.func(); //狹義對象，指向obj。

　　>>>以上代碼，經過obj.func()進行調用，this指向這個obj。

 　　四、函數做爲數組中的一個元素，用數組下標進行調用的，this指向這個數組

　　　　具體例子以下：

1 function func(){
2     this.name="wangwu";
3     console.log(this);
4 }
5 var arr=[1,2,3,func,4,5,6]; //此時函數做爲數組中第四個元素
6 arr[3](); //直接用數組的下標調用函數，此時this指向arr。

　　>>>以上代碼，func做爲數組arr中的元素，經過arr[3]()進行調用，this指向arr

 　　五、函數做爲一個構造函數，使用new關鍵字進行調用，this指向用new關鍵字new出的對象。

　　　　具體例子以下：

function func(){
    this.name="wangwu";
    console.log(this);
}
var obj=new func(); //此時經過new關鍵字進行調用，this指向obj這個新new出的對象

　　>>>以上代碼，經過new關鍵字進行函數的調用，最終this指向這個新new出的對象

 　　this的指向問題，最終的內容就是這麼多，雖然看起來很簡單，可是真正遇到問題的時候也會有讓人爲難的時候。

 

編者按

　　咱們都是在這條路上奔跑着的孩子，讓咱們相互學習，共同努力吧！！！但願今天這點兒關於js中this指向問題的小內容對你們有一點點幫助吧，，畢竟我也是一個初入江湖的小菜鳥啊！！