JS函数this的用法实例分析
在JavaScript中，每个函数都有一个被称为this的上下文对象。这个对象是函数的执行环境，这个对象的值取决于函数的调用方式。this的用法是JavaScript中比较棘手的一个话题之一。在本篇文章中，我们将深入研究this的用法，并通过两个实例来帮助读者更好地理解它的使用。
什么是this？
在JavaScript中所有函数都有一个this对象，用于表示函数的执行上下文。this的值在函数调用时确定。根据调用方式的不同，它会指向不同的对象。如何调用函数决定了this的值，下面介绍几种情况。
this指向哪里？
1. 函数作为普通函数调用时
当函数作为普通函数调用时，this指向的是全局对象window。
function test() {
console.log(this);
}
test(); // window
2. 函数作为对象方法调用时
当函数作为对象方法调用时，this指向的是这个对象。
var person = {
name: 'John',
age: 25,
sayHello: function() {
console.log(this);
}
};
person.sayHello(); // {name: "John", age: 25, sayHello: ƒ}
3. 函数作为构造函数调用时
当函数作为构造函数调用时，this指向的是构造函数创建的新对象。
function Person(name) {
this.name = name;
this.sayHello = function() {
console.log(this);
};
}
var person = new Person('John');
person.sayHello(); // {name: "John", sayHello: ƒ}
4. 函数作为 Function.prototype.call 或 Function.prototype.apply 被调用时
当函数作为Function.prototype.call或Function.prototype.apply被调用时，this指向的是第一个参数。
function greet() {
console.log(`Hello, ${this.name}!`);
}
var person = { name: 'John' };
greet.call(person); // Hello, John!
实例分析
1. 点击按钮打印出当前按钮所在的section的id值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS函数this的用法实例分析</title>
<style>
section {
background-color: pink;
width: 300px;
height: 200px;
margin: 20px auto;
}
button {
margin-top: 10px;
}
</style>
</head>
<body>
<section id="section1">
<h2>Section1</h2>
<button onclick="logSectionId()">Click Me</button>
</section>
<section id="section2">
<h2>Section2</h2>
<button onclick="logSectionId()">Click Me</button>
</section>
<script>
function logSectionId() {
console.log(this.parentElement.id);
}
</script>
</body>
</html>
在这个例子中，我们有两个section和两个按钮。点击按钮会调用logSectionId函数，并打印出按钮所在的section的id属性值。事件处理函数不需要event参数，this指向的是被点击按钮的HTMLButtonElement元素，parentElement指向的是按钮的父元素section元素。
2. div下面有多个span元素，点击span元素弹出该元素的innerHTML值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS函数this的用法实例分析</title>
<style>
div span {
padding: 10px;
margin: 5px;
background-color: pink;
}
</style>
</head>
<body>
<div onclick="logInnerHTML(event)">
<span>span1</span>
<span>span2</span>
<span>span3</span>
</div>
<script>
function logInnerHTML(event) {
console.log(event.target.innerHTML);
}
</script>
</body>
</html>
在这个例子中，我们有一个div和三个span元素。点击span元素会调用logInnerHTML函数，并打印出当前点击的span元素的innerHTML值。事件处理函数需要event参数，this指向的是div元素，event.target指向的是当前点击的span元素。
总结
this是JavaScript中一个重要的概念，它的值取决于函数被调用的方式。在第一个实例中，this的值指向被点击的按钮的HTMLButtonElement元素，这个例子就展示了函数作为事件处理函数的情况。在第二个实例中，this的值指向了被点击的span元素的父节点，也就是div元素，展示函数位于事件处理函数外部的情况。熟练掌握JavaScript中this的用法可以使代码更加简洁和易于维护。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS函数this的用法实例分析 - Python技术站
微信扫一扫 
支付宝扫一扫 