6、this关键字

简介: 6、this关键字

1、this关键字


  • 它是一个引用,指向内存中的一个对象


2、对象this的指向


this的指向类型
1、指向调用方法的对象 最常用的一种情况,一个对象调用一个方法,那么方法中的this,指向这个对象
2、指向new创建出来的对象 构造函数中的this,指向new创建出来的对象


  <script>
    // ES5的语法
    // 1、指向调用方法的对象
    let person = {
      name: "jasmine",
      getName() { console.log(this.name); }
    }
    person.getName();   // 输出结果:jasmine
    // 2、指向new创建出来的对象
    function person1(name) {
      this.name = name;
    }
    let person2 = new person1("jasmine");
    console.log(person2.name);    // 输出结果:jasmine
    // ES6的语法
    class Person3 {
      constructor(name) {
        this.name = name;
      }
    }
    let person4 = new Person3("jamsine");
    console.log(person4.name);    // 输出结果:jasmine
  </script>

3、DOM事件this的指向


  • 当DOM事件被触发时,事件监听函数中的this指向触发事件的DOM对象


  <button>按钮</button>
  <script>
    document.querySelector('button').onclick = function () {
      console.log(this);
    }
  </script>

4、全局事件this的指向


// 2、全局函数this指向window
    function fun() { console.log(this); };
    fun();      // 输出结果:Window


5、普通函数与箭头函数this的指向


类型 this指向
普通函数 指向window
箭头函数 指向定义函数的上下文的this


    let person = {
      name: "jasmine",
      getName() { console.log(this.name); },
      getName1() {
        setTimeout(() => {
          // 箭头函数this指向对象
          console.log(`箭头函数:${this}`);
        }, 1000)
      },
      getName2() {
        setTimeout(function () {
          console.log(`普通函数:${this}`);
        }, 1000)
      }
    }
    person.getName();   // 输出结果:jasmine
    person.getName1();    // 输出结果:[object Object]
    person.getName2();    // 输出结果:[object Window]


总结


image.png

目录
打赏
0
0
0
0
2
分享
相关文章
Getting Started with phoneME Feature Software (MR4)
  Getting Started with phoneME Feature Software (MR4) This guide contains the following sections:  * Download...
961 0
kde
|
11天前
|
Docker镜像加速指南:手把手教你配置国内镜像源
配置国内镜像源可大幅提升 Docker 拉取速度,解决访问 Docker Hub 缓慢问题。本文详解 Linux、Docker Desktop 配置方法,并提供测速对比与常见问题解答,附最新可用镜像源列表,助力高效开发部署。
kde
7308 15
|
8天前
typora免费版,激活方法,Typora使用教程
Typora是一款简洁高效的Markdown编辑器,支持即时渲染。本教程涵盖安装方法、文件操作、视图控制、格式排版、字体样式及Markdown语法,助你快速上手使用Typora进行高效写作。
1896 2
Dify MCP 保姆级教程来了!
大语言模型,例如 DeepSeek,如果不能联网、不能操作外部工具,只能是聊天机器人。除了聊天没什么可做的。
1838 27
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
1068 5
【保姆级图文详解】大模型、Spring AI编程调用大模型
【保姆级图文详解】大模型、Spring AI编程调用大模型
733 9
【保姆级图文详解】大模型、Spring AI编程调用大模型
2025年最新版最细致Maven安装与配置指南(任何版本都可以依据本文章配置)
本文详细介绍了Maven的项目管理工具特性、安装步骤和配置方法。主要内容包括: Maven概述:解释Maven作为基于POM的构建工具,具备依赖管理、构建生命周期和仓库管理等功能。 安装步骤: 从官网下载最新版本 解压到指定目录 创建本地仓库文件夹 关键配置: 修改settings.xml文件 配置阿里云和清华大学镜像仓库以加速依赖下载 设置本地仓库路径 附加说明:包含详细的配置示例和截图指导,适用于各种操作系统环境。 本文提供了完整的Maven安装和配置
2025年最新版最细致Maven安装与配置指南(任何版本都可以依据本文章配置)
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问