当前位置: 首页 > news >正文

js的this指向问题

代码一:

这段代码定义了run函数、obj对象,然后我们把run函数作为obj的方法。

 function run(){console.log(this);}let obj={a:1,b:2};obj.run=run;obj.run();

那么我们调用obj的run方法,那么这个方法打印的this指向obj。 

 分析:即函数作为某一个对象的方法被调用的话,那么这个函数指向的就是这个对象

代码二:

 这段代码定义了run函数、obj对象,obj里面有个级联对象o,然后我们把run函数作为obj的级联对象o的方法。

function run(){console.log(this);}let obj={a:1,b:2,o:{}};obj.o.run=run;obj.o.run();

 那么我们调用obj的级联对象o的run方法,那么这个方法打印的this指向o。 

 分析:因为run函数不是作为obj对象的方法,run函数是作为obj对象里面的o对象的方法,那么这个函数指向的就是这个o对象

代码三:

这段代码定义了run函数、obj对象,然后我们把run函数作为obj的方法。run函数使用箭头函数

let  run=()=>{console.log(this);};let obj={a:1,b:2,};obj.run=run;obj.run();

那么我们调用obj的run方法,那么这个方法打印的this指向window。  

 分析:箭头函数的this是与定义函数的上下文有关

 代码四:

 这段代码定义了run函数、obj对象,然后我们把run函数作为obj的方法,我们可以使用call方法、apply方法、bind方法去强制改变this的指向

function  run(){console.log(this);};let obj={a:1,b:2,};let o={c:3}obj.run=run;obj.run.call(o);// obj.run.apply(o);// obj.run.bind(0)

this指向o对象

 

 代码五:

 这段代码定义了Person构造函数,然后一个实例化构造函数被调用,另一个直接调用构造函数

 function Person(name){this.name=name;console.log(this);}let person=new Person("小明");// 1. let o=new Object()// 2. this -> o;// 3. return o;Person("小红");console.log(person.name);

实例化构造函数调用this指向Person,直接调用构造函数this指向的时window 

 分析:

实例化过程默认要经历三个过程

·   // 1. let o=new Object()
    // 2. this -> o;
    // 3. return o;

 即,实例化的this指向的就是变量person

外话:

 function Person(name){this.name=name;console.log(this);return {}; //如果手动return对象,那么this指向的就是这个对象return 123; // 基本数据类型不会改变thisreturn "123"; // 基本数据类型不会改变this}let person=new Person("小明");// 1. let o=new Object()// 2. this -> o;// 3. return o;Person("小红");console.log(person.name);

总结:

如果一个标准函数,也就是非箭头函数,作为某个对象的方法被调用时,那么这个this指向的就是这个对象 ,箭头函数的this指向与函数上下文有关。

相关文章:

js的this指向问题

代码一: 这段代码定义了run函数、obj对象,然后我们把run函数作为obj的方法。 function run(){console.log(this);}let obj{a:1,b:2};obj.runrun;obj.run(); 那么我们调用obj的run方法,那么这个方法打印的this指向obj。 分析:即…...

Redis常用数据类型及命令

Redis 常用数据类型 常用数据类型 主要是指value类型 key都是字符串类型的 各种数据类型对应的特点 应用场景 哈希:一般来存储一些对象 列表:存一些跟顺序有关系的数据,比如朋友圈点赞 集合:一般用来做运算,交集&a…...

软件工程(六) 面向对象分析(OOA)之UML图特点

1、UML 面向对象分析里面有一个非常重要的工具叫UML,UML不仅在工作中非常重要,在考试当中也是非常重要的,即作为上午综合体,又大概率又会出现在下午的案例分析中,作为一个25分的大题。 UML叫做统一建模语言,它主要用于需求分析和软件的设计,来做一些模型的制作。比如我…...

QT 消息对话框按钮显示

前言 搞QT嘛,大多数都是军工。都要国产化,而且消息对话框的按钮的英文也不是很得劲,所以需要汉化。使用静态函数的按钮就是显示英文,汉化的代码如下。 void Widget::on_pushButton_clicked() {QMessageBox box(QMessageBox::Inf…...

平衡二叉树及其应用详解

平衡二叉树 定义与性质 平衡二叉树(Balanced Binary Tree)是计算机科学中的一种数据结构,它是二叉排序树的一种特殊情况。 平衡二叉树满足以下性质: 左子树和右子树的高度差不超过 1。也就是说,对于任意节点&#…...

vue3+ ts ts语法在script写不知道为啥一直报错

在vue3页面中写ts语法 发现识别不了 一直报错 1.出现这种问题的话,首先查看自己写的有没有问题,没有问题的话 2.再查看 script里边有没有写 lang"ts" <script setup lang"ts">解析 setup&#xff1a;是vue3在单文件组件 (SFC) 中使用 composition …...

c#写的端口监听,程序退出后,再次运行提示端口占用,且进程不存在

我用c#写了一个监听29999端口,进程结束后再次启动发现端口被占用&#xff0c;但是运行netstat -ano | findstr 29999找到进程ID后&#xff0c;却没有这个进程 经查询这个监听29999进程虽然没了&#xff0c;但是要找到他的父进程&#xff0c;把父进程关闭了才可以&#xff0c;参…...

跨域案例go gf ,请求代理,前端请求后端A转发给多个后端B

跨域案例go gf &#xff0c;请求代理&#xff0c;前端请求后端A转后端B 案例&#xff1a;从前端请求后端A&#xff08;路径携带argusx&#xff09;&#xff0c;后端A转发请求到多个不同地区&#xff08;可一个&#xff09;后端B(切掉argusx&#xff0c;其他不变进行请求)&…...

9.4 集成功率放大电路

OTL、OCL 和 BTL 电路均有各种不同输出功率和不同电压增益的集成电路。应当注意&#xff0c;在使用 OTL 电路时&#xff0c;需外接输出电容。为了改善频率特性&#xff0c;减小非线性失真&#xff0c;很多电路内部还引入深度负反馈。这里以低频功放为例。 一、集成功率放大电路…...

Java“牵手“拼多多商品详情数据、拼多多优惠券信息、拼多多到手价信息获取方法,拼多多API实现批量商品数据抓取示例

拼多多商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取拼多多商品详情数据&#xff0c;您可以通过开放平台的接口或者直接访问拼多多商城的网页来获取商品详情信息。以下是两种常用方法的介绍&#xff1a;…...

亚马逊云科技 re:Inforce 大会云安全合规与技术实践及 Security Jam 大赛,快来报名吧!...

‍‍ 2023年8月31日在北京 亚马逊云科技 re:Inforce 大会 首次登陆中国&#xff01; 我们期待您的莅临&#xff0c; 并与您一起迎接 AI 时代&#xff0c; 开启全面智能的安全旅程&#xff01; 在13:00-17:00的 培训与动手实验环节中 云安全合规与技术实践 及 Security Jam 大赛…...

网络安全(黑客技术)学习手册

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…...

泡泡玛特回应头部IP营收增速放缓:IP上市时间不固定

8月23日&#xff0c;针对今年上半年头部IP营收增速放缓问题&#xff0c;泡泡玛特&#xff08;09992.HK&#xff09;管理层在业绩会上解释称&#xff0c;每个IP上市时间并不固定&#xff0c;单从上半年看同比增长会有偏差&#xff0c;而随着下半年两个新系列的推出&#xff0c;全…...

很干的 Nginx

&#x1f3a8; 前言 本篇文章有些概念性的东西&#xff0c;是结合自己的理解表达出来的&#xff0c;可能有些理解不到位的地方。希望多多指教&#xff0c;谢谢大家。 红包献上 &#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;…...

【已解决】pycharm突然双击无法打开,重启电脑也不管用

1.问题&#xff1a; pycharm突然双击无法打开&#xff0c;重启电脑也不管用 2.解决 2.1 方法一&#xff08;修改Roaming&#xff09; 1.找到C盘对应路径下的pycharm版本 2. 用记事本打开文件类型为VMOPTIONS文件 3. 修改或删除最后一行的映射路径 4.保存退出 2.2 方法二…...

【HCIP】15.MPLS基础

多协议标签交换 MPLS位于TCP/IP协议栈中的数据链路层和网络层之间&#xff0c;可以向所有网络层提供服务。 通过在数据链路层和网络层之间增加额外的MPLS头部&#xff0c;基于MPLS头部实现数据快速转发。 术语 MPLS域&#xff08;MPLS Domain&#xff09;&#xff1a;一系列…...

热烈祝贺重庆融能成功入选航天系统采购供应商库

经过航天系统采购平台的严审&#xff0c;重庆融能机电设备股份有限公司成功入选中国航天系统采购供应商库。航天系统采购平台是航天系统内企业采购专用平台&#xff0c;服务航天全球范围千亿采购需求&#xff0c;目前&#xff0c;已有华为、三一重工、格力电器、科大讯飞等企业…...

隧道vs免费爬虫ip:为何要选择隧道爬虫ip?

在网络爬虫的世界中&#xff0c;爬虫ip是一项关键技术&#xff0c;它可以帮助我们隐藏身份、突破限制、提高抓取效率。但是&#xff0c;在选择爬虫ip时&#xff0c;我们常常会面对隧道爬虫ip和免费爬虫ip之间的抉择。在本文中&#xff0c;我们将探讨隧道爬虫ip相对于免费爬虫ip…...

C++day6(多态实现动物园的讲解员和动物表演的相关介绍、用函数模板实现不同数据类型的交换功能)

1.比喻&#xff1a;动物园的讲解员和动物表演 想象一下你去了一家动物园&#xff0c;看到了许多不同种类的动物&#xff0c;如狮子、大象、猴子等。现在&#xff0c;动物园里有一位讲解员&#xff0c;他会为每种动物表演做简单的介绍。 在这个场景中&#xff0c;我们可以将动…...

多线程学习之生产者和消费者与阻塞队列的关系

生产者和消费者 概述&#xff1a; 生产者消费者问题&#xff0c;实际上主要是包含了两类线程&#xff1a; 生产者线程用于生产数据消费者线程用于消费数据 生产者和消费者之间通常会采用一个共享的数据区域&#xff0c;这样就可以将生产者和消费者进行解耦&#xff0c; 两…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...