1、this 关键字的作用
1)在方法中,this
表示该方法所属的对象。
2)如果单独使用,this
表示全局对象。
3)在函数中,this
表示全局对象。
4)在函数中,在严格模式下,this 是未定义的(undefined
)。
5)在事件中,this
表示接收事件的元素。
6)类似 call()
和 apply()
方法可以将 this
引用到任何对象。
2、函数和方法中的this
1)普通函数中的this都引用window对象
例如,
//function关键字声明的普通函数 function fn1(){ console.log(this); }; fn1();//执行结果:window{...} //函数表达式形式的普通函数 var fn2=function(){ console.log(this); } fn2();//执行结果:window{...};
2)构造函数中this
构造函数中的this
指向的是它实例化的对象。
例如,
//写一个构造函数 function site(){ this.siteName='cjavapy'; this.siteUrl='https://www.cjavapy.com'; }; var mysite=new site();//js在执行到此条语句时,将this的引用指向了mysite console.log(mysite.siteName),//执行结果 cjavapy //需要注意的是 如果直接执行构造函数,而不是new 一下,那么this还是指向window function site(){ this.siteName='cjavapy'; this.siteUrl='https://www.cjavapy.com'; console.log(this) }; site();//执行结果 window{...}
3)方法中的this
在对象方法中, this
指向调用它所在方法的对象。
例如,
var site = { siteName: "cjavapy", siteUrl : "https://www.cjavapy.com", siteId : 1314, siteInfo : function() { return this.siteName + " " + this.siteUrl; } };//this所属的对象是site
3、对象属性
作为对象属性值的函数,其内部this
指向的就是这个对象。
例如,
var obj={ siteName:"cjavapy", showMessage:function(){ console.log(this); console.log(this.siteName) } }; obj.showMessage;//执行结果 {siteName:"cjavapy",showMessage:fn} 1 //需要注意的是,如果函数不是作为对象属性的属性值被调用,而是作为属性值赋值给其他变量,则此函数中的this不再指向该对象 var obj={ showMessage:function(){ console.log(this) }} var z=obj.showMessage;//作为属性值赋值 z();//执行结果 window{...}
4、apply&call方法
函数调用call()
、apply()
方法后,this的引用为call apply 方法传进去的第一个参数。
例如,
//call var a={ age:0, value:1 };//定义一个对象 function fn1(){ console.log(this) }; fn1.call(a)//执行结果:{age:0,value:1} //call apply 的功能一样,唯一不同的是传给函数的参数的方式(就是第二个参数开始,第一个参数是this指向的新对象) //apply 传数组,这个数组包含函数所需要的参数,call 直接传参数 var a={ age:0, value:1 };//定义一个对象,用来做call和apply的第一个参数 function fn2(arg1,arg2){ console.log(this) console.log(arg1+arg2) }; fn2.call(a,1,1)//执行结果{age:0,value:1} 2 fn2.apply(a,[1,1]);//执行结果{value:0,value:1} 2 fn2.apply(a,1,1)//报错 //还有一个bind方法.bind方法和call使用方式一样,作用也一样,不一样的是实现方式,call传参结束后直接执行函数(apply也是),而bind只是更改this值和给函数传参,函数并不执行 ,所以bind可以作为事件的处理函数去使用 //比如给div绑定一个click事件 div.onclick=fn.call(obj,arg1,arg2)//还没等div点击fn就已经被执行 div.onclick=fn.bind(obj,arg1,arg2)//这样当div被点击时才会有效
5、函数中使用 this(严格模式)
严格模式下函数是没有绑定到 this 上,此时 this
是 undefined
。
例如,
"use strict"; function myFunction() { return this; }
6、this的其它使用情况
在函数中,函数的所属者默认绑定到 this
上。
单独使用 this
,则它指向全局(Global
)对象。
在浏览器中,window
就是该全局对象为 [object Window]
:
var x = this; console.log(x); function myFunction() { console.log(this); return this; }