javascript中关于this指向问题详解

  前  言

LiuDaP

　　　在前端的学习中，我们必然要用到js，js可以说是前端必不可少的的东西。在学习js的过程中，我们会经常用到this这个东西，而this的指向问题就变得尤为重要。今天正好有空闲时间，就给大家详细介绍一下js中关于this的指向问题，希望能够帮助到大家。

 　　

一、this的指向原理

　>>>仅仅一条就是：谁最终调用函数，this就指向谁。。

下面给大家做一下详细的解释：

　　（1）、this到底指向谁，不应该考虑函数在哪声明，而是应该考虑函数在什么地方调用

　　（2）、this指向的永远只可能是对象，而不是函数。

　　（3）、this指向的对象，叫做函数的上下文，也叫函数的content，还叫函数的调用者。

 

二、总结几条关于this指向问题的规律

　　>>>注意：以下几条规律特别好用，如果必要的话可以直接背过。

　　1、通过函数名()调用的函数，this永远指向window。

　　　　具体例子如下：

function func(){
    this.name="wangwu";
    console.log(this);
}
func(); //通过func()调用的，this永远指向window。

 

　　>>>以下代码直接通过func()调用函数，则this指向window对象。

　　2、函数作为window内置函数的回掉函数使用，this指向window。例如：setInterval setTimeout等。

　　　　具体例子如下：

function func(){
    this.name="wangwu";
    console.log(this);
}
//函数作为window内置函数的回掉函数使用，this指向window。
setTimeout(func,1000);

　　>>>以上代码，func直接作为setTimeout的回掉函数使用，则this指向window对象。

　　3、通过对象.方法调用函数，则this指向这个对象。

　　　　具体例子如下：

function func(){
    this.name="wangwu";
    console.log(this);
}
var obj={
    name:"zhangsan",
    func:func
}
//通过对象.方法调用的，this指向这个对象
obj.func(); //狭义对象，指向obj。

　　>>>以上代码，通过obj.func()进行调用，this指向这个obj。

 　　4、函数作为数组中的一个元素，用数组下标进行调用的，this指向这个数组

　　　　具体例子如下：

function func(){
    this.name="wangwu";
    console.log(this);
}
var arr=[1,2,3,func,4,5,6]; //此时函数作为数组中第四个元素
arr[3](); //直接用数组的下标调用函数，此时this指向arr。

　　>>>以上代码，func作为数组arr中的元素，通过arr[3]()进行调用，this指向arr

 　　5、函数作为一个构造函数，使用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指向问题的小内容对大家有一点点帮助吧，，毕竟我也是一个初入江湖的小菜鸟啊！！