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指向问题的小内容对你们有一点点帮助吧，，毕竟我也是一个初入江湖的小菜鸟啊！！