1.1关于this的介绍
在js开发中this的使用频率很高，而且面试过程中也会碰到关于this的相关题目。因此有必要对this的使用方法进行总结一下。
1.2关于this的定义
this 为JavaScript的关键字 表示“当前” 指的调用函数的那个对象。
1.3关于this的使用情况
(1) 在jquery里面的使用场景 this表示当前节点对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>关键字this</title>
</head>
<body>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<script src="./js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul li").click(function(){
$(this).css("color","red");//this表示当前节点对象
});
});
</script>
</body>
</html>
(2) 在普通函数的使用场景一
<script type="text/javascript">
window.onload=function(){
var x=1;
function fun(){
this.x;
}
console.log(x); // 输出 1 这里的this表示 全局的情况
}
</script>
(3) 在普通函数的使用场景二
<script type="text/javascript">
window.onload=function(){
var x=1;
function fun(){
this.x=2;
}
console.log(x); //输出 1
//可能想不明白为什么这里还是会输出1，函数fun里面对x的值重新定义后，但fun并没有被调用，所以这里输出的结果仍然为 1
}
</script>
(4) 在普通函数的使用场景三
<script type="text/javascript">
window.onload=function(){
var x=1;
function fun(){
console.log(this); //这里的this指向window对象
this.x=2;
}
fun();//函数执行 x的值变为2
console.log(x); //这里输出 2
}
</script>
(5) 在普通函数的使用场景四
window.onload=function(){
//没有被绑定的对象 默认this指向window对象
var x=1;
function f1(){
this.x=2;
}
function f2(){
this.x=3;
}
f2();
f1();
console.log(x); // 输出 2
}
</script>
(6) 在对象里面的使用
<script type="text/javascript">
window.onload=function(){
var fun=function(){
console.log(this);//对象中引用 指向当前绑定的对象
};
var obj={};
obj.name='sonia';
obj.action=fun;
obj.action(); // 返回显示 object对象 {name:"sonia",action:fun}
}
</script>
那么我们把上面的代码再改一下 又会发生意外的情况：
<script type="text/javascript">
window.onload=function(){
var fun=function(){
console.log(this);//当前绑定的对象
};
var obj={};
obj.name='sonia';
o.action=fun;
fun();// 调用这个fun函数 这时this就指向了window对象
}
</script>
(7) 在构造函数里面的使用
//在构造函数里面的this指向当前new的对象实例
function Fun(name,age){
this.name=name;
this.age=age;
}
var fun=new Fun("123",20)
console.log(fun.name);//123
// 要注意这种情况
function Fun(name,age){
this.name=name;
this.age=age;
}
var fun=new Fun("123",20);
fun.name='abc'; //这里对name已经重新赋值
console.log(fun.name);//abc 就近原则 先从最近的地方寻找值 如果没有 会继续往上查找对应的值
(8) 使用apply的情况
var name='123';
function f(){
return this.name;
};
var o={};
o.name='sonia';
o.action=f;
//o.action();//sonia
console.log(o.action.apply()); // 这里 输出 123
//在apply()里面没有传入任何参数 默认就是 window ; 但如果apply() 传入了值（对象）
那么就会找到对象里面的值
var name='123';
function f(){
return this.name;
};
var o={};
o.name='sonia';
o.action=f;
console.log(o.action.apply(o)); //输出 sonia
(9) 使用call()的情况 此时this代表指定的对象
var obj={name:'sonia'};
function funOne(){
console.log(this);
}
function funTwo(){
this.name='123';
}
funOne.call(obj); // 输出 {name: "sonia"} 代表obj
funOne.call(funTwo); //输出funTwo这个函数对象
(10) 在事件处理函数中 this 指向谁的事件作用元素
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
console.log(this);// 输出的是button标签
}
那么我们再改一下上面的代码 如下所示：
function fun(){
console.log(this);
}
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
console.log(this); //这里的this指向事件作用元素
fun();//直接调用函数时 this指向window
}
1.4关于this的一道面试题
var number=1;
var obj={
number:2,
showNumber:function(){
this.number=3;
(function(){
console.log(this.number);
})(); //这里是匿名函数自我调用 在这里的this指向了 window
console.log(this.number);
}
};
obj.showNumber();
所以最终输出的结果为: 1 3
网友评论