前端知识点---this的用法 , this动态绑定(Javascript)
文章目录
- this动态绑定 , this的用法
- 01. 全局作用域下的 this
- 02. 函数中的 this
- 2.1 普通函数调用
- 2.2 构造函数调用
- 2.3 箭头函数中的 this
- 03对象方法调用
- 04. 事件处理中的 this
- 05. 动态绑定的方式
- 5.1 call 方法
- 5.2 apply 方法
- 5.3 bind 方法
- 06类中的 this
- 07. 总结
this动态绑定 , this的用法
在JavaScript中,this 是一个非常重要但是呢 也让人难搞明白的关键字。
**它的值不是在编写代码时静态确定的,而是在代码运行时动态绑定的。**这非常重要
下面讲一下它 .
01. 全局作用域下的 this
在全局作用域中(即不在任何函数中),this 通常指向全局对象:
在浏览器中,this 指向 Window 对象。
在Node.js环境中,this 指向 global 对象。
console.log(this); // 浏览器中输出 Window
例子二
02. 函数中的 this
this 在函数中的行为取决于调用的方式。
2.1 普通函数调用
当函数以普通方式调用时,this 默认指向全局对象(在严格模式下是 undefined)。
function foo() {console.log(this);
}
foo(); // 浏览器中,this 指向 window
在严格模式下:
"use strict";
function foo() {console.log(this);
}
foo(); // undefined
2.2 构造函数调用
当一个函数用作构造函数(通过 new 关键字调用 new关键字创建一个新的对象实例,并将该对象与构造函数绑定)时,this 指向新创建的实例对象 , 用于将属性和方法绑定到该对象。
function Person(name) {this.name = name;
}const person = new Person('Bob');
console.log(person.name); // 输出 'Bob'function Person(name, age) {this.name = name; // this 绑定到新创建的对象this.age = age;
}const person1 = new Person('Alice', 25);
console.log(person1); // Person { name: 'Alice', age: 25 }function Car(brand, model) {this.brand = brand; // 将 brand 绑定到新对象this.model = model; // 将 model 绑定到新对象this.getDetails = function() {return `${this.brand} ${this.model}`;};
}const car1 = new Car('Toyota', 'Corolla');
console.log(car1.getDetails()); // Toyota Corolla
2.3 箭头函数中的 this
箭头函数不会创建自己的 this,它会继承来自其定义位置的外层上下文的 this。
const obj = {name: 'Alice',arrowFunc: () => {console.log(this.name);}
};
obj.arrowFunc(); // undefined, 因为箭头函数中的 this 绑定的是全局对象
而普通函数会绑定到调用它的对象:const obj = {name: 'Alice',normalFunc: function() {console.log(this.name);}
};
obj.normalFunc(); // 输出 'Alice'
使用箭头函数时,this 会继承自外层作用域:
03对象方法调用
当函数作为对象的方法调用时,this 指向调用该方法的对象。
const obj = {name: 'Alice',sayName: function() {console.log(this.name);}
};
obj.sayName(); // 输出 'Alice'
当 this 在对象的方法中使用时,this 指向调用该方法的对象。
const obj = {name: 'Alice',getName() {return this.name;}
};console.log(obj.getName()); // 输出 "Alice"
更复杂的例子:
const obj1 = {name: "Bob",greet: function() {console.log(this.name);}
};const obj2 = {name: "Charlie"
};obj2.greet = obj1.greet;obj2.greet(); // "Charlie"
方法调用时,this 指向调用该方法的对象。
04. 事件处理中的 this
在事件处理函数中,this 通常指向触发事件的 DOM 元素。
const button = document.querySelector('button');
button.addEventListener('click', function() {console.log(this); // 输出被点击的按钮元素
});
05. 动态绑定的方式
JavaScript 提供了三种显式绑定方法来改变 this 的值:(然而这仅仅是显式绑定)
详细了解:
this四大绑定方式
5.1 call 方法
call 允许你显式指定 this 的值,并立即调用函数。
function greet() {console.log(this.name);
}const person = { name: 'Alice' };
greet.call(person); // 输出 'Alice'
5.2 apply 方法
apply 与 call 类似,只是它接收参数的方式不同:apply 接收一个参数数组。
greet.apply(person); // 输出 'Alice'
5.3 bind 方法
bind 方法与 call 和 apply 不同,它返回一个新的函数,该函数的 this 值绑定到指定的对象。
const boundGreet = greet.bind(person);
boundGreet(); // 输出 'Alice'
06类中的 this
在类的实例方法中,this 指向实例对象:
class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a sound.`);}
}const dog = new Animal('Dog');
dog.speak(); // Dog makes a sound.
07. 总结
相关文章:

前端知识点---this的用法 , this动态绑定(Javascript)
文章目录 this动态绑定 , this的用法01. 全局作用域下的 this02. 函数中的 this2.1 普通函数调用2.2 构造函数调用2.3 箭头函数中的 this 03对象方法调用04. 事件处理中的 this05. 动态绑定的方式5.1 call 方法5.2 apply 方法5.3 bind 方法 06类中的 this07. 总结 this动态绑定…...

web——upload-labs——第五关——大小写绕过绕过
先上传一个 先尝试直接上传一个普通的一句话木马 不行 可以看到,.htaccess文件也被过滤了,我们来查看一下源码 第五关的源码没有把字符强制转换为小写的语句: $file_ext strtolower($file_ext); //转换为小写 直接通过Burpsuite抓包修改文…...
String类型
String类 在Java中,String 类是一个非常核心且常用的类,它用于表示文本值,即字符序列或者说字符串。 1.1 类的声明 public final class Stringimplements java.io.Serializable, Comparable<String>, CharSequence 解释:…...
Ubuntu24.04安装和配置Redis7.4
Ubuntu24.04安装和配置Redis7.4 #切换到root用户 sudo su -#更新源 apt update apt upgrade#安装 lsb-release、curl 和 gpg ,以便能够添加 Redis 仓库 apt install lsb-release curl gpg#导入 Redis 的 GPG 密钥 curl -fsSL https://packages.redis.io/gpg | gpg …...

权限相关知识
1.Linux权限的概念 在说Linux权限的概念之前我来问大家一个问题,你们觉得什么是权限? 权限平时的体现呢,就比如不是校长的亲戚就不能逛办公室,没充会员的爱奇艺看不了VIP影视剧,没成会员的的蛋糕店拿不到会员价等等等…...

【时间之外】IT人求职和创业应知【37】-AIGC私有化
目录 新闻一:2024智媒体50人成都会议暨每经20周年财经媒体峰会召开 新闻二:全球机器学习技术大会在北京召开 新闻三:区块链技术在金融领域的应用取得新突破 不知不觉的坚持了1个月,按照心理学概念,还要坚持2个月&am…...

深入理解 source 和 sh、bash 的区别
1 引言 在日常使用 Linux 的过程中,脚本的执行是不可避免的需求之一,而 source、sh、bash 等命令则是执行脚本的常用方式。尽管这些命令都能运行脚本,但它们之间的执行方式和效果却有着显著的区别。这些区别可能会影响到脚本的环境变量、工作…...

k8clone二进制工具迁移k8s中的无状态应用
1 概述 k8clone是一个简便的Kubernetes元数据克隆工具,它可以将Kubernetes元数据(对象)保存为本地压缩包,在恢复时可将这些元数据恢复到目标集群中(已存在的资源不会被覆盖)。它不依赖远程存储,…...

VPI photonics的一些使用经验(测相位 快速搜索)持续更新
1.使用FuncSinEl模块的注意事项: 2.在VPI player(示波器)测电信号相位时候,可以使用正则表达式,快速搜索。 比如我要搜索以30开头的数据,输入: ^30 其他的正则表达式不适用,比如以…...

DBeaver 连接 OceanBase Oracle 租户
DBeaver 是一款通用的数据库工具软件,支持任何具有JDBC驱动程序的数据库。DBeaver 需要 Java 运行环境的支持。截稿时 DBeaver 24.0.0 版本默认提供的 OceanBase 驱动是连接 MySQL 的,想连接 Oracle 租户需要新建一个驱动器使用。 下载数据库驱动包 1、…...

QT_CONFIG宏使用
时常在Qt代码中看到QT_CONFIG宏,之前以为和#define、DEFINES 差不多,看了定义才发现不是那么回事,定义如下: 看注释就知道了QT_CONFIG宏,其实是:实现了一个在编译时期安全检查,检查指定的Qt特性…...

力扣(leetcode)题目总结——辅助栈篇
leetcode 经典题分类 链表数组字符串哈希表二分法双指针滑动窗口递归/回溯动态规划二叉树辅助栈 本系列专栏:点击进入 leetcode题目分类 关注走一波 前言:本系列文章初衷是为了按类别整理出力扣(leetcode)最经典题目,…...
如何处理 iOS 客户端内 Webview H5 中后台播放的音视频问题
目录 问题描述Page Visibility API 的应用什么是 Page Visibility API?使用 Page Visibility API 暂停音视频完整解决方案1. 监听媒体的播放和暂停事件2. 防止自动播放3. 结合 Intersection Observer 进行媒体控制4. 手动处理应用生命周期中的事件 问题描述 在 iOS…...
C++的一些模版
1、不限制次数的输入数据 vector<int> nums;int num;while (cin >> num) {nums.push_back(num);if (cin.get() \n) break;}2、取模模版 template<int kcz> struct ModInt { #define T (*this)int x;ModInt() : x(0) {}ModInt(int y) : x(y > 0 ? y : y…...

spring boot整合https协议
整体目录 1. 生成SSL证书 首先,使用keytool生成一个自签名证书。打开命令行工具并运行以下命令: keytool -genkeypair -alias myserver -keyalg RSA -keysize 2048 -keystore keystore.jks -validity 365 这将创建一个名为keystore.jks的文件…...
服务器开机即占用大量内存,解决
1.服务器开机两分钟不到,内存使用飙升 [rootlocalhost ~]# top #查看是否有了明显的内存占用程序 2.上述未果,查看是否有违规的开机自启项 [rootlocalhost ~]# chkconfig --list 3.上述无果,查看开启启动加载项内容 上网搜后ÿ…...

Keil uvision的edition
0 Preface/Foreword 0.1 参考网址 https://zhuanlan.zhihu.com/p/456069876 1 Keil版本介绍 版本介绍: Keil Lite(免费版):最多32KB代码,无法使用中间件Keil Essential(基础版):没…...

[每周一更]-(第123期):模拟面试|消息队列面试思路解析
文章目录 22|消息队列:消息队列可以用来解决什么问题?1. 你用过消息队列吗?主要用来解决什么问题?异步、削峰和解耦你能各举一个例子吗?2. 你用的是哪个消息队列?为什么使用它而不用别的消息队列?3. 为什么你一定要用消息队列?不用行不行?不用有什么缺点?4. 在对接多…...

游戏引擎学习第12天
视频参考:https://www.bilibili.com/video/BV1yom9YnEWY 这节没讲什么东西,主要是改了一下音频的代码 后面有介绍一些alloc 和malloc,VirtualAlloc 的东西 _alloca 函数(或 alloca)分配的是栈内存,它的特点是: 生命周…...

深入理解Flutter生命周期函数之StatefulWidget(一)
目录 前言 1.为什么需要生命周期函数 2.开发过程中常用的生命周期函数 1.initState() 2.didChangeDependencies() 3.build() 4.didUpdateWidget() 5.setState() 6.deactivate() 7.dispose() 3.Flutter生命周期总结 1.调用顺序 2.函数调用时机以及主要作用 4.生…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...

ETLCloud可能遇到的问题有哪些?常见坑位解析
数据集成平台ETLCloud,主要用于支持数据的抽取(Extract)、转换(Transform)和加载(Load)过程。提供了一个简洁直观的界面,以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...

【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令,在Linux上安装软件,以及如何在Linux上部署一个单体项目,大多数同学都会有相同的感受,那就是麻烦。 核心体现在三点: 命令太多了,记不住 软件安装包名字复杂&…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念,确保一个租户(在这个系统中可能是一个公司或一个独立的客户)的数据对其他租户是不可见的。在 RuoYi 框架(您当前项目所使用的基础框架)中,这通常是通过在数据表中增加一个…...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...
多模态图像修复系统:基于深度学习的图片修复实现
多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

Unity中的transform.up
2025年6月8日,周日下午 在Unity中,transform.up是Transform组件的一个属性,表示游戏对象在世界空间中的“上”方向(Y轴正方向),且会随对象旋转动态变化。以下是关键点解析: 基本定义 transfor…...