情形1：在全局中，this 指向的是window 对象。
情形2：在函数中，this 指向分为下面两种情况：
-
非严格模式下：this 指向的也是window 对象。
演示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this指向测试</title>
</head>
<body>
<script>
function show() {
console.log(this)
}
show();
</script>
</body>
</html>
打印结果为window对象。
-
在严格模式下：this 指向会出现undefined。
演示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this指向测试</title>
</head>
<body>
<script>
//加了严格模式
'use strict';
function show() {
console.log(this)
}
show();
</script>
</body>
</html>
情形3：在对象（Object）中：
如果对象中没有嵌套多个函数，那么无论是在严格还是非严格模式下，this 指向的都是对象本身。
如果有多个嵌套函数，那么嵌套函数中的this 指向跟 情形2 相同：非严格模式下指向window，严格模式下指向undefined。
- 对象中没有嵌套多个函数
演示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this指向测试</title>
</head>
<body>
<script>
var student = {
name:"Hayden",
showName:function () {
console.log(this)
}
};
student.showName();
</script>
</body>
</html>
- 对象中有嵌套多个函数
非严格模式下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this指向测试</title>
</head>
<body>
<script>
var student = {
name:"Hayden",
showName:function () {
function testThis() {
console.log(this)
}
testThis();
}
};
student.showName();
</script>
</body>
</html>
严格模式下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this指向测试</title>
</head>
<body>
<script>
'use strict';
var student = {
name:"Hayden",
showName:function () {
function testThis() {
console.log(this)
}
testThis();
}
};
student.showName();
</script>
</body>
</html>
扩展：那对象的嵌套函数中如何使用指向对象的this 呢？
很简单！
方法1：只需要将对象中的this 传给嵌套函数中即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this指向测试</title>
</head>
<body>
<script>
'use strict';
var student = {
name:"Hayden",
showName:function () {
let self = this; //用let接一下指向对象本身的this
function testThis() {
console.log(self)
}
testThis();
}
};
student.showName();
</script>
</body>
</html>
方法2：使用call 函数修改成指向对象的this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this指向测试</title>
</head>
<body>
<script>
'use strict';
var student = {
name:"Hayden",
showName:function () {
function testThis() {
console.log(this)
}
testThis.call(this); //使用call函数修改成指向对象的this
}
};
student.showName();
</script>
</body>
</html>
网友评论