想要了解this,先记住以下两点:
1:this永远指向一个对象;
2:this的指向齐全取决于函数调用的地位;
①:如果一个函数中有this,然而它没有被上一级的对象所调用,那么this指向的就是window,这里须要阐明的是在js的严格版中this指向的不是window,然而咱们这里不探讨严格版的问题(在严格版中的默认的this不再是window,而是undefined。)
function fun(){ console.log(this.s);}var obj = { s:'1', f:fun}var s = '2';obj.f(); //1fun(); //2
另外还有两种种非凡状况:
第一种:当this遇到return
1
function fn() { this.user = '二狗子'; return {}; }var a = new fn; console.log(a.user); //undefined
2.
function fn() { this.user = '二狗子'; return function(){};}var a = new fn; console.log(a.user); //undefined
3.
function fn() { this.user = '二狗子'; return 1;}var a = new fn; console.log(a.user); //二狗子
4.
function fn() { this.user = '二狗子'; return undefined;}var a = new fn; console.log(a.user); //二狗子
5.
function fn() { this.user = '二狗子'; return null;}var a = new fn; console.log(a.user); //二狗子
总结:如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。
还有一点就是尽管null也是对象,然而在这里this还是指向那个函数的实例,因为null比拟非凡。
this应用最频繁的几种状况做一个总结,最常见的根本就是以下5种:
对象中的办法,事件绑定 ,构造函数 ,定时器,函数对象的call()、apply() 办法;
事件绑定中的this
行内绑定事件:
当事件触发时,属性值就会作为JS代码被执行,以后运行环境下没有clickFun函数,因而浏览器就须要跳出以后运行环境,在整个环境中寻找一个叫clickFun的函数并执行这个函数,所以函数外部的this就指向了全局对象window;如果不是一个函数调用,间接在以后节点对象环境下应用this,那么显然this就会指向以后节点对象;
<input type="button" value="按钮" onclick="clickFun()"><script> function clickFun(){ console.log(this) //打印window对象 this // 此函数的运行环境在全局window对象下,因而this指向window; }</script><input type="button" value="按钮1" onclick="clickFun"><input type="button" value="按钮2" onclick="clickFun"><!--打印input节点--><!-- 运行环境在节点对象中,因而this指向本节点对象 -->
动静绑定与事件监听:
<input type="button" value="按钮" id="btn"><script> var btn = document.getElementById('btn'); btn.onclick = function(){ this ; // this指向本节点对象 }</script>
构造函数中的this
function Pro(){ this.x = '1'; this.y = function(){};}var p = new Pro();
new 一个构造函数并执行函数外部代码的过程就是这个五个步骤,当 JS 引擎指向到第3步的时候,会强制的将this指向新创建进去的这个对象;
window定时器中的this
var obj = { fun:function(){ this ; }}setInterval(obj.fun,1000); // this指向window对象setInterval('obj.fun()',1000); // this指向obj对象
setInterval() 是window对象下内置的一个办法;
在下面的代码中,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()办法
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()办法
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的指向;