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技术站