JS面向对象之this
1、this说明
在js中提供了this。this的中文意思是这,用来指向一个对象。比如说这函数对象,这个window对象,这个obj等等。在js中,因为一些原因,我们需要指向一个对象,例如,使用全局变量给几个按钮绑定单击事件,但按钮的单击事件函数是一个回调函数,当按钮单击后事件才发生,此时的变量已经变化完毕,按钮[i]既是undefined值,是会报错的,因此,我们就需要用this来指向那个单击事件发生时绑定单击事件的按钮对象,下面是代码
在这段代码中,我获取了所有的button按钮,然后分别给他们安装了单击事件,因为全局变量i在按钮绑定的回调事件发生之前已经走到了最大值,所以无法给按钮成功绑定上单击事件,所以需要用到this,指向的就是那个绑定单击事件的那个对象
var btns = document.querySelectorAll('button')
for (var i = 0; i < btns.length; i++) {
btns[i].onclick=function(){
for (var j = 0; j < btns.length; j++) {
btns[j].style.color = ""
btns[j].style.backgroundColor = ""
}
this.style.color = "red"
this.style.backgroundColor = "green"
}
}
2、this的具体指向
1、在全局作用域中,this指向window对象,window对象是顶级对象,document也是它的孩子。
2、在普通方法中,this也指向window对象
3、对象调用方法时,this指向的就是那个调用方法的对象,在下面我会进行举例
1、全局作用域
console.log(this);
2、普通函数使用
function fun() {
console.log(this);
}
fun()
以上输出的都是window对象
3、对象调用方法,this就指向这个对象
var btn = document.querySelector('button')
btn.onclick = function () {
console.log(this);
}
这里的this就是btn这个按钮对象,因为是按钮对象在调用这个单击方法。
4、对象调用方法
var a=5
function fun() {
console.log(this.a);
}
// 对象调用方法,this就指向这个对象
var obj = {
a:2,
fun: function(){
fun()
}
}
// 对象.属性值: obj.属性
// 对象方法的使用:obj.fun()
obj.fun()
在这里使用obj去调用fun方法,这个this同样的指向的是obj
3、this的一些规则
为了大家更好的认识到this。会提供一些规则来认识到在运行环境中,this到底指向谁,也会认识到我们可以通过这个this对那个指向对象进行属性的读写操作。
1、圆括号直接调用对象,该对象指向window
2、对象打点调用函数,上下是对象是对象 对象.方法名
3、从数组中枚举出函数圆括号运行,this是数组 数组[index]()
4、延时器、定时器调用的函数this指向window
5、事件监听,this是绑定监听的这个元素。
6、补充:不端在规则里面,但应该了解
函数的apply方法和call方法指向
函数.call()、函数.call():是在执行函数
但如果在括号里面传入对象,那么就可以将对象作为执行传给函数, this就指向该对象
再补充(call和apply的区别)
ps:当函数有参数需要进行传递的时候,call方法可以直接写入参数,但apply方法必须是把参数写成数组的形式
var obj = {
a: 6,
fun: function () {
console.log(this.a);
}
}
var a=3
var f=obj.fun
f()
var obj = {
a: 6,
fun: function () {
console.log(this.a);
}
}
var a=3
obj.fun()
var arr=[3,4,5,8,9,fn]
function fn(){
console.log(this[0]);
}
arr[5]()
setInterval(function(){
console.log(this);
},2000) var obj = {
a: 3,
fun: function () {
setTimeout(function () {
console.log(this.a);
}, 2000)
}
}
var a=5
obj.fun()
var btn = document.querySelector('button')
btn.onclick = function () {
console.log(this);
}
function fun() {
alert(this);
}
fun.apply()
var a=5
var obj={