this共有以下5中使用场景
- 1.普通函数中，this始终指向window对象。
- 2.事件函数中，this始终指向触发事件的标签。
- 3.构造函数中，this始终指向实例化后的那个对象。
- 4.对象方法中，this指向调用方法的那个对象，如果是链式调用，则指向方法前的那个对象。
- 5.html标签中，this指向标签本身。
以上五句话请务必谨记，因为关于this的指向问题常常会搞不清楚。
一、普通函数中，this始终指向window对象。
<!DOCTYPE html>
<html>
<head>
<title>普通函数中，this始终指向window对象</title>
</head>
<body>
<script type="text/javascript">
function f7(){
console.log(this);
function f8(){
console.log(this);
}
f8();
}
f7();
</script>
</body>
</html>
二、事件函数中，this始终指向触发事件的标签。
<!DOCTYPE html>
<html>
<head>
<title>事件函数中，this始终指向触发事件的标签</title>
</head>
<body>
<input type="button" id="btn" value="按钮">
<script type="text/javascript">
document.getElementById('btn').onclick = function(){
console.log(this);
}
function f2(){
console.log(this);
}
document.getElementById('btn').onclick = f2;
</script>
</body>
</html>
三、构造函数中，this始终指向实例化后的那个对象。
<!DOCTYPE html>
<html>
<head>
<title>构造函数中，this始终指向实例化后的那个对象。</title>
</head>
<body>
<script type="text/javascript">
function Person(){
this.age = 30;
console.log(this);//this指向obj
}
var obj = new Person();
</script>
</body>
</html>
四、对象方法中，this指向调用方法的那个对象，如果是链式调用，则指向方法前的那个对象。
<!DOCTYPE html>
<html>
<head>
<title>对象方法中，this指向调用方法的那个对象，如果是链式调用，则指向方法前的那个对象。</title>
<script src="./jquery.js"></script>
</head>
<body>
<script type="text/javascript">
var obj = {
"age":30,
"say":function(){
console.log(this);
}
};
obj.say(); // obj调用，this指向obj
var obj2 = {
"age":40,
"say":obj.say
};
obj2.say(); //obj2调用，this指向obj2
//链式调用时看方法调用的前面的那个值
var obj = {
"age":40,
"son":{"age":20,"say":function(){console.log(this);}}//this指向son
};
obj.son.say();
</script>
</body>
</html>
五、html标签中，this指向标签本身。
<!DOCTYPE html>
<html>
<head>
<title>html标签中，this指向标签本身</title>
<script src="./jquery.js"></script>
</head>
<body>
<img src="./img/a.jpg">
<img src="./img/a.jpg">
<script type="text/javascript">
function f(obj){
console.log(obj);
}
</script>
</body>
</html>
解释：
点击图片1时输出this为标签自身，点击图片2时替换了当前标签的src属性。
|
窥视卡
雷达卡
发表于 2023-1-28 20:37:10
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-21 17:56:08
