揭开`this`的神秘面纱:探索 JavaScript 中的上下文密钥(上)

在这里插入图片描述

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

  • 一、引言
    • 介绍`this`关键字在 JavaScript 中的重要性。
  • 二、`this`的基本概念
    • 解释`this`的定义和作用。
  • 三、不同的绑定方式
    • 介绍`this`的四种绑定方式:默认绑定、隐式绑定、显式绑定和 new 绑定。

一、引言

介绍this关键字在 JavaScript 中的重要性。

this 关键字在 JavaScript 中具有非常重要的作用,它用于表示当前执行上下文对象,即当前函数所在的对象

this 关键字可以用来访问对象的属性和方法,以及调用对象的方法和访问对象的属性。

this 关键字在 JavaScript 中具有以下重要性:

  1. 确定当前对象的属性:在 JavaScript 中,可以使用 this 关键字来访问对象的属性。例如,this.name 可以用来访问对象的 name 属性。

  2. 调用对象的方法:在 JavaScript 中,可以使用 this 关键字来调用对象的的方法。例如,this.sayHello() 可以用来调用对象的 sayHello 方法。

  3. 访问原型链上的属性和方法:JavaScript 中每个对象都有一个原型链,可以通过 this 关键字访问原型链上的属性和方法。例如,this.prototype.age 可以用来访问原型链上的 age 属性。

  4. 避免全局变量和全局函数:使用 this 关键字可以避免全局变量和全局函数的命名冲突和代码污染。例如,可以使用 varlet 关键字定义全局变量,但是不能直接使用全局变量,而是需要使用 this 关键字访问。

  5. 访问闭包中的变量和方法:在 JavaScript 中,闭包中的变量和方法是私有的,不能直接访问。但是,可以使用 this 关键字访问闭包中的变量和方法。例如,this.counter 可以用来访问闭包中的 counter 变量。

  6. 避免函数嵌套:在 JavaScript 中,函数嵌套会导致函数内部的变量被覆盖,从而无法访问。但是,使用 this 关键字可以避免函数嵌套的问题。例如,var counter = 0;var counter = 0; 定义了两个变量,但是使用 this 关键字可以避免变量被覆盖的问题。

综上所述,this 关键字在 JavaScript 中具有非常重要的作用,它可以帮助我们访问对象的属性和方法,调用对象的方法和访问对象的属性,访问原型链上的属性和方法,避免全局变量和全局函数的命名冲突和代码污染,访问闭包中的变量和方法,以及避免函数嵌套的问题。因此,在 JavaScript 中,我们需要熟练掌握 this 关键字的重要性,并正确地使用它来处理对象和函数之间的关系。

二、this的基本概念

解释this的定义和作用。

this 是一个 JavaScript 关键字,它用于表示当前执行上下文对象
在函数中,this 的值取决于函数是否被作为构造函数调用,或者是否被作为普通函数调用

1. 当函数作为构造函数被调用时:

如果函数被作为构造函数调用,那么 this值会自动绑定到新创建的对象上。例如:

function Person(name, age) {this.name = name;this.age = age;
}var person = new Person("张三", 25);
console.log(person.name); // 输出 "张三"

在这个例子中,Person 函数作为构造函数被调用,创建了一个新的 Person 对象。由于 this 的值自动绑定到新创建的对象上,因此 this.namethis.age 分别被绑定到对象的 nameage 属性上。

2. 当函数作为普通函数被调用时:

如果函数被作为普通函数调用,那么 this值会指向全局对象(通常是 window 对象)。例如:

function sayHello() {console.log("Hello, world!");
}sayHello(); // 输出 "Hello, world!"

在这个例子中,sayHello 函数作为普通函数被调用,由于 this 的值指向全局对象,因此 console.log 中的 "Hello, world!" 被输出到全局对象 window 上。

3. 当函数作为参数传递给另一个函数时:

如果函数作为参数传递给另一个函数,那么 this 的值会指向接收函数的 this 值。例如:

function logMessage(message) {console.log(message);
}var logMessage = logMessage;
logMessage("Hello, world!"); // 输出 "Hello, world!"

在这个例子中,logMessage 函数被作为参数传递给另一个函数 logMessage,由于接收函数的 this 值指向全局对象 window,因此 logMessage 中的 console.log 中的 "Hello, world!" 被输出到全局对象 window 上。

综上所述,this 是一个非常重要的关键字,它可以帮助我们访问对象的属性和方法,调用对象的方法和访问对象的属性,以及确定函数的执行上下文。因此,在 JavaScript 中,我们需要熟练掌握 this 的定义和作用,并正确地使用它来处理对象和函数之间的关系。

三、不同的绑定方式

介绍this的四种绑定方式:默认绑定、隐式绑定、显式绑定和 new 绑定。

在 JavaScript 中,this 有四种绑定方式,分别是默认绑定、隐式绑定、显式绑定和 new 绑定。这四种绑定方式分别适用于不同的场景,下面我们来详细介绍这四种绑定方式。

  1. 默认绑定(Function 函数默认绑定)

当函数作为普通函数调用时,this 的默认绑定方式是全局对象(通常是 window 对象)。例如:

function sayHello() {console.log("Hello, world!");
}sayHello(); // 输出 "Hello, world!"

在这个例子中,sayHello 函数作为普通函数被调用,由于 this 的默认绑定方式是全局对象,因此 console.log 中的 "Hello, world!" 被输出到全局对象 window 上。

  1. 隐式绑定(函数内变量默认绑定)

在函数内部,如果变量没有被赋值,它会自动绑定到 this。例如:

function sayHello() {console.log(this);
}sayHello(); // 输出 window

在这个例子中,sayHello 函数内部的 this 指向全局对象 window,因此 console.log 中的输出结果是 window

  1. 显式绑定(使用 call 方法或 apply 方法显式绑定)

我们可以使用 call 方法或 apply 方法来显式地绑定 this。例如:

function sayHello() {console.log(this);
}sayHello.call(null); // 输出 undefined
sayHello.call(window); // 输出 window

在这个例子中,我们使用 call 方法将 this 显式地绑定到全局对象 window 上,因此 console.log 中的输出结果是 window

function sayHello() {console.log(this);
}sayHello.apply(null); // 输出 undefined
sayHello.apply(window); // 输出 window
  1. new 绑定(使用 new 关键字创建对象时绑定)

当我们使用 new 关键字创建对象时,this 会自动绑定到新创建的对象上。例如:

function Person(name, age) {this.name = name;this.age = age;
}var person = new Person("张三", 25);
console.log(person.name); // 输出 "张三"

在这个例子中,我们使用 new 关键字创建了一个 Person 对象,因此 this 的绑定方式是该对象本身。因此,我们在函数内部使用 this.name 可以正确地访问对象的属性。

总结一下,四种绑定方式分别是:

  1. 默认绑定(Function 函数默认绑定):当函数作为普通函数调用时,this 的默认绑定方式是全局对象(通常是 window 对象)。
  2. 隐式绑定(函数内变量默认绑定):在函数内部,如果变量没有被赋值,它会自动绑定到 this
  3. 显式绑定(使用 call 方法或 apply 方法显式绑定):我们可以使用 call 方法或 apply 方法来显式地绑定 this
  4. new 绑定(使用 new 关键字创建对象时绑定):当我们使用 new 关键字创建对象时,this 会自动绑定到新创建的对象上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/220304.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

phpMyAdmin的常见安装位置

nginx的日志显示有人一直在尝试访问phpMyAdmin的setup.php,用了各种位置。 其实我只有一个nginx,别的什么也没有。 47.99.136.156 - - [01:44:37 0800] "GET http://abc.com:80/phpMyAdmin/scripts/setup.php HTTP/1.0" 404 162 "-"…

天猫数据分析-天猫查数据软件-11月天猫平台饮料市场品牌及店铺销量销额数据分析

今年以来,饮料是快消品行业中少数保持稳定增长的品类之一。 11月份,饮料市场同样呈现较好的增长态势。根据鲸参谋电商数据分析平台的相关数据显示,今年11月份,天猫平台上饮料市场的销量为2700万,环比增长约42%&#xf…

Python-Selenium-使用 pywinauto 实现 Input 上传文件

当前环境:Win10 Python3.7 pywinauto0.6.8,selenium3.14.1 示例代码 from pywinauto import Desktop import osapp Desktop() dialog app[打开] dialog[Edit].set_edit_text(os.getcwd() .\\example-01.jpg) dialog[Button].click() 其他方法&…

智能优化算法应用:基于模拟退火算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于模拟退火算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于模拟退火算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.模拟退火算法4.实验参数设定5.算法结果6.…

【百度PARL】强化学习笔记

文章目录 强化学习基本知识一些框架Value-based的方法Q表格举个例子 强化的概念TD更新 Sarsa算法SampleSarsa Agent类 On_policy vs off_policy函数逼近与神经网络DQN算法DQN创新点DQN代码实现model.pyalgorithm.pyagent.py总结:举个例子 实战 视频:世界…

关于“Python”的核心知识点整理大全28

目录 11.1.5 添加新测试 11.2 测试类 11.2.1 各种断言方法 unittestModule中的断言方法: ​编辑11.2.2 一个要测试的类 survey.py language_survey.py 11.2.3 测试 AnonymousSurvey 类 test_survey.py 往期快速传送门👆(在文章最后&…

2024免费mac苹果电脑系统电脑管家CleanMyMac X

macOS已经成为最受欢迎的桌面操作系统之一,它提供了直观、简洁的用户界面,使用户可以轻松使用和管理系统。macOS拥有丰富的应用程序生态系统;还可以与其他苹果产品和服务紧密协作,如iPhone、iPad,用户可以通过iCloud同…

Flutter ios 使用ListView 。滚动时 AppBar 改变颜色问题

在Ios 中 列表滚动条向下滚动一段距离后 会导致 AppBar 颜色改变 可以给 AppBar 或者 AppBarTheme。 scrolledUnderElevation: 0.0 属性 全局: MaterialApp(theme: ThemeData(appBarTheme: AppBarTheme(scrolledUnderElevation: 0.0)) ) 局部: App…

实现基于 Keepalived 和 Nginx 的高可用架构

目录 前言1 高可用性简介2 准备服务器和软件3 高可用的配置(主从配置)3.1 配置/etc/keepalived/keepalived.conf文件3.2 配置/usr/local/src/nginx_check.sh脚本文件 4 启动软件5 测试结语 前言 在现代互联网架构中,高可用性是至关重要的。N…

Linux——权限

个人主页:日刷百题 系列专栏:〖C语言小游戏〗〖Linux〗〖数据结构〗 〖C语言〗 🌎欢迎各位→点赞👍收藏⭐️留言📝 ​ ​ 一、 Linux下用户的分类 Linux下有两种用户: 1. root(超级管理员用户…

饥荒Mod 开发(十三):木牌传送

饥荒Mod 开发(十二):一键制作 饥荒Mod 开发(十四):制作屏幕弹窗 一键传送源码 饥荒的地图很大,跑地图太耗费时间和饥饿值,如果大部分时间都在跑图真的是很无聊,所以需要有一个能够传送的功能,不仅可以快速…

JOSEF约瑟三相电流继电器 HJL-93/AY AC220V 0.2-6A 导轨安装

HJL-93B数字式交流三相电流继电器 系列型号 HJL-93/AY数字式交流三相电流继电器;HJL-93/A数字式交流三相电流继电器; HJL-93/BY数字式交流三相电流继电器;HJL-93/B数字式交流三相电流继电器; HJL-F93/AY数字式交流三相电流继电…

ARM KEIL 安装

根据设备类型安装开发工具及环境 Arm,Cortex ----> MDK-Arm 8051 ----> C51 80251 ----> C251 C166,XC166,XC2000 MCU设备 ----> C155 填写信息提交后下载 点击MDK539.EXE下载 : MDK539.EXE 双击MDK539安装 点击Next 默认安装路径,点击Ne…

Linux系统管理、服务器设置、安全、云数据中心

前言 「作者主页」:雪碧有白泡泡 「个人网站」:雪碧的个人网站 我们来快速了解liunx命令 文章目录 前言解析命令提示符linux的文件和目录文件和目录管理文件操作 进程管理命令系统管理网络管理 书籍推荐 本文以服务器最常用的CentOS为例 解析命令提示…

星融元中标华夏银行项目,助力金融数据中心可视网建设工作

近日,星融元成功入围华夏银行国产品牌网络流量汇聚分流器(TAP)设备供应商,在助力头部金融机构构建数据中心可视网络的建设工作中,星融元又一次获得全国性股份制银行客户的青睐。 华夏银行作为全国性股份制商业银行积极…

前端开发中的webpack打包工具

前端技术发展迅猛,各种可以提高开发效率的新思想和框架层出不穷,但是它们都有一个共同点,即源代码无法直接运行,必须通过转换后才可以正常运行。webpack是目前主流的打包模块化JavaScript的工具之一。 本章主要涉及的知识点有&am…

UDP特性之组播(多播)

UDP特性之组播 1. 组播的特点2. 设置主播属性2.1 发送端2.2 接收端 3. 组播通信流程3.1 发送端3.2 接收端 4. 通信代码 原文链接 在公司测试广播和多播有一点问题。。。 1. 组播的特点 组播也可以称之为多播这也是UDP的特性之一。组播是主机间一对多的通讯模式,是…

Linux之FTP 服务器

一、FTP服务器匿名账户服务器配置 1、测试是否已安装vsftp服务器: 2、启动vsftp服务器: 3、修改vsftp主配置文件,允许匿名登录 4、重新启动vsftpd服务,禁用防火墙 5、打开FTP服务的数据文件存放目录/var/ftp,复制若干文件到该目…

端口占用命令 netstat (centos)+netstat (windows)

linux 1.使用 netstat 命令查看端口占用情况 netstat -tlnp 使用 -p 选项查看进程信息。 使用 -t 选项列出 TCP 协议的连接:类似(使用 -u 选项列出 UDP 协议的连接:) 2.查找占用指定端口号的应用信息 netstat -tlnp | grep 3…

C#拼接JSON

一、业务背景 最近项目需要与U8c对接,实现增删改查,借此机会,梳理一下C#解析Json字符串的问题。 这篇文章,先以新增接口为例。 二、新增接口 查看需要传入的json格式。 拼接json,无非就是{}和[]的来回嵌套。 首先&am…