一、如果是函数名圆括号执行这个函数，函数的上下文就是window
<script type="text/javascript">
var a=100;
function myfun(a,b,c,d){
console.log(this.a);//100
var a=200;
console.log(this.a)//100
console.log(a); //200
}
myfun();
</script>
提示：①一定要记住，谁才有this的属性；是函数对象才有this属性；
②狭义对象没有函数的上下文之后
二、如果函数作为对象的方法，最后是某一个对象打点调用这个方法，函数的上下文就是这个对象
<script type="text/javascript">
var people={
‘name‘:‘小明‘,
‘age‘ :18,
‘sex‘:‘男‘,
‘say‘:function(){
console.log(this); //people这个对象
console.log(this.age); //18
}
}
people.say();
</script>
注意：如果函数作为对象的方法，而且是某个函数最后打点调用，这个函数的上下文就是这个对象
三、如果函数作为定时器的回调函数,函数的上下文为window
<script type="text/javascript">
var a=100;
setInterval(function(){
a++;
console.log(this);
console.log(this.a);
},1000)
</script>
四、如果函数作为事件的处理函数，函数的上下文就是这个，触发这个事件的这个对象；
<!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>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
p{
height:20px;
width:300px;
background: pink;
margin:10px 0;
}
</style>
</head>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>
<script type="text/javascript">
var p0=document.getElementsByTagName(‘p‘)[0];
var p1=document.getElementsByTagName(‘p‘)[1];
var p2=document.getElementsByTagName(‘p‘)[2];
var p3=document.getElementsByTagName(‘p‘)[3];
function changeColor(argument) {
this.style.background = "blue";
}
p0.onclick = changeColor;
p1.onclick = changeColor;
p2.onclick = changeColor;
p3.onclick = changeColor;
</script>
提示：事件处理函数的上下文，当谁触发这个事件，函数的上下文就是这个对象
五、如果函数作为数组的元素，函数通过数组枚举出来圆括号执行，函数的上下文是这个数组
<script type="text/javascript">
var arr=[fn,1,2,3,4,5,6,7];
function fn(){
console.log(this);
console.log(this.length);
// console.log(arguments);
}
arr[0]();
</script>
时间： 2024-10-09 02:10:12