彻底搞懂JavaScript中的this指向问题

JavaScript中的this是让很多开发者头疼的地方,而this关键字又是一个非常重要的语法点。毫不夸张地说,不理解它的含义,大部分开发任务都无法完成。
想要理解this,你可以先记住以下两点:
1:this永远指向一个对象;
2:this的指向完全取决于函数调用的位置;
针对以上的第一点特别好理解,不管在什么地方使用this,它必然会指向某个对象;确定了第一点后,也引出了一个问题,就是this使用的地方到底在哪里,而第二点就解释了这个问题,但关键是在JavaScript语言之中,一切皆对象,运行环境也是对象,所以函数都是在某个对象下运行,而this就是函数运行时所在的对象(环境)。这本来并不会让我们糊涂,但是JavaScript支持运行环境动态切换,也就是说,this的指向是动态的,很难事先确定到底指向哪个对象,这才是最让我们感到困惑的地方。

先看原理

function fun(){
    console.log(this.s);
}
​
var obj = {
    s:'1',
    f:fun
}
​
var s = '2';
​
obj.f(); //1
fun(); //2

上述代码中,fun函数被调用了两次,显而易见的是两次的结果不一样;
很多人都会这样解释,obj.f()的调用中,因为运行环境在obj对象内,因此函数中的this指向对象obj;
而在全局作用域下调用 fun() ,函数中的 this 就会指向全局作用域对象window;
但是大部分人不会告诉你,this的指向为什么会发生改变,this指向的改变到底是什么时候发生的;
而搞懂了这些,this的使用才不会出现意外;

首先我们应该知道,在JS中,数组、函数、对象都是引用类型,在参数传递时也就是引用传递;

上面的代码中,obj 对象有两个属性,但是属性的值类型是不同的,在内存中的表现形式也是不同的;


QQ20180624-152138@2x.png

调用时就成了这个样子:


QQ20180624-152547@2x-1.png

因为函数在js中既可以当做值传递和返回,也可当做对象和构造函数,所有函数在运行时需要确定其当前的运行环境,this就出生了,所以,this会根据运行环境的改变而改变,同时,函数中的this也只能在运行时才能最终确定运行环境;

再来看下面的代码,你可能会更加理解this对于运行环境的动态切换规则:

var A = {
   name: '张三',
   f: function () {
       console.log('姓名:' + this.name);
   }
};
​
var B = {
   name: '李四'
};
​
B.f = A.f;
B.f()   // 姓名:李四
A.f()   // 姓名:张三

上面代码中,A.f属性被赋给B.f,也就是A对象将匿名函数的 地址 赋值给B对象;
那么在调用时,函数分别根据运行环境的不同,指向对象A和B;


QQ20180624-155603@2x-1.png
function foo() {
    console.log(this.a);
}
var obj2 = {
    a: 2,
    fn: foo
};
var obj1 = {
    a: 1,
    o1: obj2
};
obj1.o1.fn(); // 2

obj1对象的o1属性值是obj2对象的地址,而obj2对象的fn属性的值是函数foo的地址;
函数foo的调用环境是在obj2中的,因此this指向对象obj2;

那么接下来,我们对this使用最频繁的几种情况做一个总结,最常见的基本就是以下5种:
对象中的方法,事件绑定 ,构造函数 ,定时器,函数对象的call()、apply() 方法;
上面在讲解this原理是,我们使用对象的方法中的this来说明的,在此就不重复讲解了,不懂的同学们,请返回去重新阅读;

事件绑定中的this
事件绑定共有三种方式:行内绑定、动态绑定、事件监听;
行内绑定的两种情况:

<input type="button" value="按钮" onclick="clickFun()">
<script>
    function clickFun(){
        this // 此函数的运行环境在全局window对象下,因此this指向window;
    }
</script>

<input type="button" value="按钮" onclick="this">
<!-- 运行环境在节点对象中,因此this指向本节点对象 -->

行内绑定事件的语法是在html节点内,以节点属性的方式绑定,属性名是事件名称前面加'on',属性的值则是一段可执行的 JS 代码段;而属性值最常见的就是一个函数调用;
当事件触发时,属性值就会作为JS代码被执行,当前运行环境下没有clickFun函数,因此浏览器就需要跳出当前运行环境,在整个环境中寻找一个叫clickFun的函数并执行这个函数,所以函数内部的this就指向了全局对象window;如果不是一个函数调用,直接在当前节点对象环境下使用this,那么显然this就会指向当前节点对象;

动态绑定与事件监听:
<input type="button" value="按钮" id="btn">
<script>
   var btn = document.getElementById('btn');
   btn.onclick = function(){
       this ;  // this指向本节点对象
   }
</script>

因为动态绑定的事件本就是为节点对象的属性(事件名称前面加'on')重新赋值为一个匿名函数,因此函数在执行时就是在节点对象的环境下,this自然就指向了本节点对象;
事件监听中this指向的原理与动态绑定基本一致,所以不再阐述;

构造函数中的this

function Pro(){
    this.x = '1';
    this.y = function(){};
}
var p = new Pro();
20180815-160135-1.jpg

对于接触过 JS 面向对象编程的同学来说,上面的代码和图示基本都能看懂,new 一个构造函数并执行函数内部代码的过程就是这个五个步骤,当 JS 引擎指向到第3步的时候,会强制的将this指向新创建出来的这个对象;基本不需要理解,因为这本就是 JS 中的语法规则,记住就可以了;

window定时器中的this

var obj = {
    fun:function(){
        this ;
    }
}
​
setInterval(obj.fun,1000);      // this指向window对象
setInterval('obj.fun()',1000);  // this指向obj对象

setInterval() 是window对象下内置的一个方法,接受两个参数,第一个参数允许是一个函数或者是一段可执行的 JS 代码,第二个参数则是执行前面函数或者代码的时间间隔;
在上面的代码中,setInterval(obj.fun,1000) 的第一个参数是obj对象的fun ,因为 JS 中函数可以被当做值来做引用传递,实际就是将这个函数的地址当做参数传递给了 setInterval 方法,换句话说就是 setInterval 的第一参数接受了一个函数,那么此时1000毫秒后,函数的运行就已经是在window对象下了,也就是函数的调用者已经变成了window对象,所以其中的this则指向的全局window对象;
而在 setInterval('obj.fun()',1000) 中的第一个参数,实际则是传入的一段可执行的 JS 代码;1000毫秒后当 JS 引擎来执行这段代码时,则是通过 obj 对象来找到 fun 函数并调用执行,那么函数的运行环境依然在 对象 obj 内,所以函数内部的this也就指向了 obj 对象;

函数对象的call()、apply() 方法
函数作为对象提供了call(),apply() 方法,他们也可以用来调用函数,这两个方法都接受一个对象作为参数,用来指定本次调用时函数中this的指向;

call()方法
call方法使用的语法规则
函数名称.call(obj,arg1,arg2...argN);
参数说明:
obj:函数内this要指向的对象,
arg1,arg2...argN :参数列表,参数与参数之间使用一个逗号隔开

var lisi = {names:'lisi'};
var zs = {names:'zhangsan'};
function f(age){
    console.log(this.names);
    console.log(age);
    
}
f(23);//undefined
​
//将f函数中的this指向固定到对象zs上;
f.call(zs,32);//zhangsan

apply()方法
函数名称.apply(obj,[arg1,arg2...,argN])
参数说明:
obj :this要指向的对象
[arg1,arg2...argN] : 参数列表,要求格式为数组

var lisi = {name:'lisi'}; 
var zs = {name:'zhangsan'}; 
function f(age,sex){
    console.log(this.name+age+sex); 
}

//将f函数中的this指向固定到对象zs上;
f.apply(zs,[23,'nan']);

注意:call和apply的作用一致,区别仅仅在函数实参参数传递的方式上;

这个两个方法的最大作用基本就是用来强制指定函数调用时this的指向;

推荐阅读更多精彩内容