JS函数this的用法实例分析

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.callFunction.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函数,并打印出按钮所在的sectionid属性值。事件处理函数不需要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技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • js 判断数据类型的几种方法

    当我们在使用JavaScript编写程序时,需要经常判断变量的数据类型,以便执行不同的操作。本文将介绍JS判断数据类型的几种方法。 方法一:typeof操作符 typeof操作符用于判断JS数据类型,返回值为一个字符串。它可以判断的数据类型有:“undefined”、“boolean”、“number”、“string”、“object”(注意:null也是…

    JavaScript 2023年6月10日
    00
  • web前端页面生成exe可执行文件的方法

    生成可执行文件的方法有很多,根据您的需求和技能水平不同,可能有多种选择。在此,本文将介绍两种常见的方法。 方法一:使用NW.js NW.js是一个基于node.js和Chromium浏览器的应用程序框架,可用于构建跨平台桌面应用程序。由于它包括一个完整的Chromium浏览器内核,因此可以将web页面打包成单个可执行文件,不需要用户安装任何浏览器就可以运行。…

    JavaScript 2023年5月27日
    00
  • js中通过父级进行查找定位元素

    在 JavaScript 中,如果我们需要在当前元素的子元素中查找某个元素,我们可以使用 querySelector() 或 getElementById() 等 DOM API 方法进行定位。但如果我们需要在当前元素的父级或祖先级元素中查找某个元素,该怎么做呢?以下是通过父级定位元素的完整攻略。 1. 使用 parentElement 属性查找父级元素 J…

    JavaScript 2023年6月11日
    00
  • JavaScript定时器setTimeout()和setInterval()详解

    JavaScript定时器setTimeout()和setInterval()详解 在前端开发中,经常会用到定时器来控制代码的执行时间。而JavaScript中提供了两个定时器函数setTimeout()和setInterval(),本文详细讲解它们的用法及区别。 setTimeout() setTimeout()函数可以让指定的代码在指定的时间后执行一次。…

    JavaScript 2023年6月11日
    00
  • 克隆javascript对象的三个方法小结

    恭喜你,这是一个非常好的问题。这里会同时涉及到markdown格式文本,以及编程中的JavaScript代码块。我们可以先来简单介绍一下这三个克隆javascript对象的方法: 浅克隆 浅克隆只会克隆对象的第一层属性。如果对象的属性值是另一个对象,那么仅会克隆这个对象的引用。举个例子,如果对象 A 有一个属性 B,B 的值是对象 C,在浅克隆的过程中,只有…

    JavaScript 2023年5月27日
    00
  • php实现paypal 授权登录

    下面我给出详细的步骤和示例说明: 1. 注册PayPal商家账户 首先,你需要注册一个PayPal商家账户并登录。进入 https://developer.paypal.com/ ,点击右上角“Dashboard”,进入主页面,在“REST API apps”中创建一个新应用。在应用创建完成后,你可以从应用设置中获得API密钥。 2. 引入PayPal SD…

    JavaScript 2023年6月11日
    00
  • 详解前端安全之JavaScript防http劫持与XSS

    首先,需要明确的是前端安全是一个非常重要的主题。在网络环境日趋复杂的今天,安全问题已经不再是一个简单的概念,而是涉及到许多方面,包括网络攻击、数据泄露、信息窃取等。因此,在开发网站时,需要重视前端安全,采取相应的措施,以保障网站和用户的安全。 其中一项非常重要的前端安全技术就是防止http劫持和XSS攻击。http劫持指的是黑客通过某些手段,劫持用户的请求,…

    JavaScript 2023年6月10日
    00
  • js闭包用法实例详解

    JS闭包用法实例详解 什么是闭包? 闭包是指有权访问另一个函数作用域中变量的函数。创建闭包的常见方式是在一个函数内部创建另一个函数。在创建的内部函数中,可以访问外部函数的参数和变量,即使外部函数已经返回退出。 为什么要使用闭包? 闭包的主要作用是作为函数工厂,可以用来封装变量和方法,使全局变量不被污染。 同时,闭包可以让一个函数访问另一个函数的局部变量,使得…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部