this的指向问题
下面我们对this使用最频繁的几种情况做一个总结:
最常见的基本就是一下5种:
对象中的方法,事件绑定,构造函数,定时器,函数对象的call(),apply()方法
事件绑定中的this:
事件绑定共有三种方式:行内绑定、动态绑定、事件监听;
行内绑定的两种情况:
<input type="button" value="按钮" onclick="clickFun()"> <script> function clickFun(){ this // 此函数的运行环境在全局window对象下,因此this指向window; } </script> <input type="button" value="按钮" onclick="this"> <!-- 运行环境在节点对象中,因此this指向本节点对象 -->
当元素绑定的是一个方法,当事件触发时,属性值就会作为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();
对于接触过 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 对象;
而在 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 :参数列表,参数与参数之间使用一个逗号隔开
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
注意:call和apply的作用一致,区别仅仅在函数实参参数传递的方式上;
这个两个方法的最大作用基本就是用来强制指定函数调用时this的指向;