执行上下文,js、React、HTML中的this

目录

执行上下文属性:变量对象、this,作用域链

变量对象是与执行上下文相关的数据作用域,存储:变量、函数声明

执行上下文生命周期

创建:生成变量对象、创建函数作用域,建立作用域链、确定this的指向

执行:变量赋值、函数的引用(调用时用指针)、执行其他代码

全局执行上下文:this 指向window全局对象

函数执行上下文:每次调用会创建新的执行上下文

()=>{}应用:共享外部函数的执行上下文(this、性能优化)

作用域:可访问变量的集合

全局作用域

函数作用域:在函数定义的时候就决定了

块级作用域(ES6):{}

作用链=作用域链表

查找不到:原型链undefined,作用域链ReferenceError

this:谁调用就指向谁,除非绑定

全局环境(普通函数/匿名函数):window/undefined 严格模式

JS

非严格模式:对象

严格模式:任意值

改变this中的thisArg

new 运算符构造绑定函数:提供的 this 值会被忽略(因为构造函数会准备自己的 this

new.target

原始值转换为对象:->Number/String

全局对象替换:null/undefined->window(非严格模式)

bind

HTML

React的class实例

执行上下文属性:变量对象、this,作用域链

const ExecutionContextObj = {VO: window, // 变量对象ScopeChain: {}, // 作用域链this: window
};

变量对象是与执行上下文相关的数据作用域,存储:变量、函数声明

生成变量对象:

  • 创建arguments
  • 扫描函数声明
  • 扫描变量声明

执行上下文生命周期

创建:生成变量对象、创建函数作用域,建立作用域链、确定this的指向

执行:变量赋值、函数的引用(调用时用指针)、执行其他代码

全局执行上下文:this 指向window全局对象

函数执行上下文:每次调用会创建的执行上下文

()=>{}应用:共享外部函数的执行上下文(this、性能优化)

//函数内部找不到就会去外层作用域
function foo() {console.log(a);
}function bar() {let a="bar"foo(); 
}
let a="window"
bar(); //window

浏览器调试工具

作用域:可访问变量的集合

作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突

全局作用域

函数作用域:在函数定义的时候就决定了

块级作用域(ES6):{}

作用链=作用域链表

查找不到:原型链undefined,作用域链ReferenceError

this:谁调用就指向谁,除非绑定

全局环境(普通函数/匿名函数):window/undefined 严格模式

// 整个脚本都开启严格模式的语法
"use strict";
var v = "Hi!  I'm a strict mode script!";

JS

当前执行上下文(global、function 或 eval)的一个属性:this

可以使用 globalThis 获取全局对象,无论你的代码是否在当前上下文运行。

非严格模式对象

严格模式任意值

如果进入执行环境时没有设置 this 的值,this 会保持为 undefined

function f2() {"use strict"; // 这里是严格模式return this;
}f2() === undefined; // true

改变this中的thisArg

new 运算符构造绑定函数:提供的 this 值会被忽略(因为构造函数会准备自己的 this

new.target
//如果构造函数是通过 new 运算符来调用的,则 new.target 将指向构造函数本身,否则它将是 undefined
//new.target 是一个在构造函数中可用的元属性(meta-property),用于检查构造函数是如何被调用的。而 Base 是一个类(或构造函数)的名称
class Base {constructor(...args) {console.log(new.target === Base);console.log(args);}
}const BoundBase = Base.bind(null, 1, 2);new BoundBase(3, 4); // true, [1, 2, 3, 4]
function Greet(name) {this.name = name;
}const person = {name: "Alice"
};// 使用 bind 创建绑定函数,将 this 设置为 person
const boundGreet = Greet.bind(person, "Bob");// 使用 new 运算符尝试构造绑定函数
const newGreet = new boundGreet();console.log(newGreet.name); // 输出 "Bob",而不是 "Alice"

原始值转换为对象:->Number/String

期望 this 是一个对象,但 thisArg 参数是一个原始值(比如数字、字符串等),则 thisArg 会被转换为对应的包装对象。例如,如果 thisArg 是一个数字,它将被转换为 Number 包装对象

严格模式下,不允许将原始值(如字符串、数字、布尔值)包装为对应的对象(String、Number、Boolean),而是保持它们的原始类型

"use strict"; // 防止 `this` 被封装到到包装对象中function log(...args) {console.log(this, ...args);
}
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6
//不用严格模式,则输出{"this value"}, 1, 2, 3, 4, 5, 6

全局对象替换:null/undefined->window(非严格模式)

如果 thisArg 参数传入了 nullundefined,在非严格模式下,它们会被替换为全局对象(通常是 window 对象)。这是为了确保函数始终有一个合法的 this 对象,防止出现错误。在严格模式下,nullundefined 不会被替换,函数内部的

"use strict"; // 防止 `this` 被封装到到包装对象中function log(...args) {console.log(this, ...args);
}
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

this 将保持为 nullundefined

bind

const module = {x: 42,getX: function () {return this.x;},
};const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// Expected output: undefinedconst boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// Expected output: 42

绑定函数将绑定时传入的参数(包括 this 的值和前几个参数)提前存储为其内部状态。而不是在实际调用时传入。

通常情况下,你可以将 const boundFn = fn.bind(thisArg, arg1, arg2) 和 const boundFn = (...restArgs) => fn.call(thisArg, arg1, arg2, ...restArgs) 构建的绑定函数的调用效果视为等效

绑定函数可以通过调用 boundFn.bind(thisArg, /* more args */) 进一步进行绑定,从而创建另一个绑定函数 boundFn2。新绑定的 thisArg 值会被忽略,因为 boundFn2 的目标函数是 boundFn,而 boundFn 已经有一个绑定的 this 值了。

HTML

<button onclick="click(this)">传进去的为当前button</button>
<button onclick="click()">click()中直接使用this为window</button>

React的class实例

  

import React, { Component } from 'react'; // 请确保导入 React 和 Componentclass APP extends Component {constructor(props) {super(props);// 将 handleClick 方法绑定到组件实例的上下文this.handleClick5 = this.handleClick5.bind(this);}handleClick1(ev) {console.log(this);//undefinedconsole.log(ev);//合成的SyntheticBaseEvent console.log(ev.target);//button}//箭头函数//方法A:类中箭头handleClick2 = () => {console.log(this);//APP类组件实例}//方法B:onclick中箭头handleClick3() {console.log(this);//APP类组件实例}// bind绑定组件实例this// 方法A:onclickhandleClick4() {console.log(this);   //APP类组件实例}// 方法B:constructorhandleClick5() {console.log(this); //APP类组件实例  }render() {return (<div><button onClick={this.handleClick1}>点击1</button>{/* 箭头函数 */}<button onClick={this.handleClick2}>点击2</button><button onClick={() => { this.handleClick3() }}>点击3</button>{/* bind */}<button onClick={this.handleClick4.bind(this)}>点击4</button><button onClick={this.handleClick5}>点击5</button></div>);}
}export default APP;

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

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

相关文章

勒索病毒最新变种.mallab勒索病毒来袭,如何恢复受感染的数据?

导言&#xff1a; 在当今数字化时代&#xff0c;.mallab勒索病毒以其险恶的特性和神秘的名称引起了广泛关注。为了更深入了解这种威胁&#xff0c;我们需要揭示.mallab勒索病毒背后的神秘面纱&#xff0c;了解它的运作方式以及预防它的方法。如果受感染的数据确实有恢复的价值…

【python学习第9节笔记,面向对象(继承,封装,多态),zip函数,with语句】

文章目录 一&#xff0c;面向对象&#xff08;继承&#xff0c;封装&#xff0c;多态&#xff09;1.1封装1.2继承/派生1.3多态1.3.1纯虚函数 二&#xff0c;zip函数三&#xff0c;with语句 一&#xff0c;面向对象&#xff08;继承&#xff0c;封装&#xff0c;多态&#xff09…

代码随想录day50:动态规划

123.买卖股票的最佳时期II 规则改成最多买卖两次&#xff1a;即0&#xff0c;1&#xff0c;2次 1.定义dp数组&#xff1a;本题一共有五种状态&#xff1a;初始状态&#xff0c;第一次持有股票&#xff0c;第一次卖出股票&#xff0c;第二次持有股票&#xff0c;第二次卖出股票…

经典文献阅读之--EGO-Planner(无ESDF的四旋翼局部规划器)

0. 简介 作为局部规划器而言&#xff0c;当机器人或无人机想要避开动态障碍物时。局部规划器就显得尤为重要了。其中基于梯度的规划器被广泛用于四旋翼无人机的局部规划&#xff0c;其中欧几里得符号距离场&#xff08;ESDF&#xff09;对于评估梯度幅度和方向至关重要。然而&…

ARINC825规范简介

ARINC825规范简介 机载CAN网络通用标准 ARINC825规范全称为机载CAN网络通用标准&#xff08;The General Standardization of CAN for Airborne Use&#xff09;。顾名思义&#xff0c;ARINC825规范是建立在CAN物理网络基础上的高层规范。CAN网络使用共享的双绞电缆传输数据&…

电压放大器在无损探伤中的应用研究

电压放大器是一种常见的电子设备&#xff0c;其主要作用是将低电平信号转换为高电平信号。在无损探伤中&#xff0c;电压放大器被广泛应用于信号增益和分析&#xff0c;以便更好地检测表面或内部缺陷。下面安泰电子Aigtek将详细介绍电压放大器在无损探伤中的应用研究。 电压放大…

动态分配的内存位置在哪里?

在C++中,动态分配的内存位于称为堆(Heap)的内存区域。以下是一些关于堆和其他相关内存区域的基本信息: 堆(Heap): 这是一个用于动态内存分配的内存区域。使用new(C++)或malloc(C)等函数从堆中分配内存,并使用delete(C++)或free(C)释放这些内存。堆的大小通常受…

分析训练速度慢

一、分析GPU nvidia-smi二、分析CPU使用率 htop查看cpu96个核的使用率 三、分析磁盘IO apt-get install iotop iotop分析GPU和CPU都没有使用完&#xff0c;瓶颈在磁盘IO。 四、磁盘IO瓶颈解决方法 1、拼成一张图片&#xff0c; 2、多张图内存拼在一起&#xff0c; 3、增大磁…

二、vue2脚手架-组件化开发

| vue中的图片打包后会转换为base64格式 组件的使用 1.创建组件&#xff1a;component文件夹中创建HelloWorld.vue文件 2.在app.vue中引入组件 组件间的通信/传值&#xff08;常用&#xff09; 一、prop父传子 1.App.vue中的引入组件中创建需要传递的数据 2.在子组件中接…

车厂造手机旗舰版售价6899,不只是个“车钥匙”

大伙应该发现了这两年的一个奇怪现象&#xff1a;造手机的跑去造车&#xff0c;而车厂又跑来造手机。 这也好解释&#xff0c;毕竟别人碗里的更香、别人老氵…板先挑衅是吧&#xff1f; 昨日&#xff0c;蔚来在其创新科技日活动中正式发布了传闻已久的手机产品 NIO Phone 。 …

掌动智能兼容性测试有哪些优势

兼容性测试为企业带来市场竞争优势&#xff0c;并提高用户满意度。在软件开发过程中&#xff0c;将兼容性测试作为一个重要的环节&#xff0c;将为企业的成功和用户满意度打下坚实的基础。那么&#xff0c;掌动智能兼容性测试的具体优势是什么?下面&#xff0c;就来看看具体介…

Linux下压缩和解压缩

在Linux下&#xff0c;您可以使用多种命令来进行文件和目录的压缩和解压缩操作。以下是一些常见的压缩和解压缩命令&#xff1a; tar&#xff1a;tar命令可用于创建和提取tar压缩文件。例如&#xff0c;要创建一个名为archive.tar的.tar文件&#xff0c;可以使用以下命令&#…

mdobus ASCII转CAN OPEN JAE1939协议网关

Modbus RTU协议转换网关是一种常见的设备&#xff0c;用于将Modbus RTU协议转换为其他通信协议。而CANopen是一种基于CAN总线的通信协议&#xff0c;主要用于工业自动化和控制系统中。本文将介绍Modbus RTU协议转换网关如何支持CANopen协议&#xff0c;以及该功能的应用场景和优…

【1】ElementUI 组件实际应用===》按钮的使用

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。个人B站主页热爱技术的小郑 &#xff0c;视频内容主要是对应文章的视频讲解形式。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘…

【JAVA EE】详解单点登录

作者简介 目录 1.概述 2.实现方案 2.1.分散鉴权 2.2.集中鉴权 1.概述 SSO&#xff0c;即进行一次认证&#xff0c;然后就可以访问所有子系统。很明显SSO只是一种具象化的目标而已&#xff0c;目前业内为了实现单点登录、统一鉴权&#xff0c;提出了一系列的打法。比如直接…

golang漏洞扫描工具,看看自己项目有没有坑

最近发现 Go 官方自己推出了新的工具&#xff0c;作用是漏洞管理&#xff0c;告诉你已报告的漏洞&#xff0c;并告知你应该如何升级到什么版本。 版本要求是&#xff1a;Go > 1.18 go install golang.org/x/vuln/cmd/govulnchecklatest进入项目目录govulncheck ./...输出如…

vim基本操作

功能&#xff1a; 命令行模式下的文本编辑器。根据文件扩展名自动判别编程语言。支持代码缩进、代码高亮等功能。使用方式&#xff1a;vim filename 如果已有该文件&#xff0c;则打开它。 如果没有该文件&#xff0c;则打开个一个新的文件&#xff0c;并命名为filename 模式…

Unity3D C# 反射与特性的配合使用

需求分析 情况&#xff1a; 假如我们是一个动物园的管理员&#xff0c;我们需要统计园内的所有动物和动物的行为。 举例&#xff1a; 现在园区内有猫、狗和鸡。猫对应的行为是喵喵喵和卖萌&#xff0c;狗对应狗吠和干饭&#xff0c;鸡对应篮球和打鸣那么这时候我要统计这些&a…

Lyapunov optimization 李雅普诺夫优化

文章目录 正文引言Lyapunov drift for queueing networks 排队网络的Lyapunov漂移Quadratic Lyapunov functions 二次李雅普诺夫函数Bounding the Lyapunov drift 李亚普诺夫漂移的边界A basic Lyapunov drift theorem 一个基本的李雅普诺夫漂移定理 Lyapunov optimization for…

【C++】手撕string(string的模拟实现)

手撕string目录&#xff1a; 一、 Member functions 1.1 constructor 1.2 Copy constructor&#xff08;代码重构&#xff1a;传统写法和现代写法&#xff09; 1.3 operator&#xff08;代码重构&#xff1a;现代写法超级牛逼&#xff09; 1.4 destructor 二、Other mem…