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

JavaScript的函数中this的指向

JavaScript的函数中this的指向

JavaScript 语言之所以有 this 的设计,跟内存里面的数据结构有关系。

以下例子来简单描述this在不同情况下所指向的对象。

var obj = {aa: function(){console.log(this.num)},num: 5
};var aa = obj.aa;
var num = 10;obj.aa();  // 5
aa();  // 10

对于以上代码,obj.aa和aa都是指向同一个函数,但其执行输出的结果却是大不相同,其原因是他们所指向的函数在内存中是独立保存的。

var obj = {aa: 20};

上面代码所展示的是将一个对象aa的地址丢给了obj,也就是说obj指向的是aa,通过obj拿到内存地址,读取aa对象,返回aa的属性,而aa属性中的值为20。

在这里插入图片描述

注意:aa属性的值保存在aa对象的value属性里面。

而如果value属性中所存的不是固定的数值,而是一个函数,则存的是函数的地址(因为函数在内存中是另外的独立存在)。

在这里插入图片描述

var obj = {aa: function(){console.log(this.num)},num: 5
};obj.aa();  // 5

对于aa的value属性中存在函数的地址,则在aa中所调用的函数所属的环境存在于obj中,即function中this所指向为obj。

在这里插入图片描述

在上面代码所指向的this是obj本身,this.num所输出的值就是obj中num的value属性所带的值。

var obj = {aa: function(){console.log(this.num)},num: 5
};var aa = obj.aa;
var num = 10;obj.aa();  // 5
aa();  // 10

对于obj.aa();调用的函数指向情况和aa();调用的函数指向情况有所不同,obj.aa和上面所阐述的一样,相当于将函数绑定在obj的环境里面。

在这里插入图片描述

而对于var aa = obj.aa;来说,变量aa相当于指向函数本身,即aa是一个与function共同存放在全局环境下的函数。

在这里插入图片描述

相当于现在的window就好比原来的obj,而现在的obj.aa就好比原来的aa,即将obj.aa看成一个整体,是window环境下的对象,value的值为function的地址,与num:10并其在window这个环境下面,此时this指向的不再是obj,而是window,即this.num调用的是window下的num:10。

相关文章:

JavaScript的函数中this的指向

JavaScript的函数中this的指向 JavaScript 语言之所以有 this 的设计,跟内存里面的数据结构有关系。 以下例子来简单描述this在不同情况下所指向的对象。 var obj {aa: function(){console.log(this.num)},num: 5 };var aa obj.aa; var num 10;obj.aa(); // …...

Caddy 中实现自动 HTTPS

要在 Caddy 中实现自动 HTTPS,您可以按照以下步骤进行操作: 步骤 1:安装 Caddy 首先,您需要安装 Caddy 服务器。您可以从 Caddy 的官方网站(https://caddyserver.com/)下载适用于您的操作系统的最新版本。…...

SK5代理(socks5代理)在网络安全与爬虫应用中的优势与编写指南

一、SK5代理(socks5代理)的基本概念 SK5代理是一种网络代理协议,它允许客户端通过代理服务器与目标服务器进行通信。相较于HTTP代理,SK5代理在传输数据时更加高效且安全,它支持TCP和UDP协议,并且能够实现数…...

【LeetCode-简单】剑指 Offer 06. 从尾到头打印链表(详解)

题目 输入一个链表的头节点,从尾到头反过来返回每个节点的值(用数组返回)。 题目地址:剑指 Offer 06. 从尾到头打印链表 - 力扣(LeetCode) 方法1:栈 思路 题目要求我们将链表的从尾到投打印一…...

【LeetCode】114.二叉树展开为链表

题目 给你二叉树的根结点 root ,请你将它展开为一个单链表: 展开后的单链表应该同样使用 TreeNode ,其中 right 子指针指向链表中下一个结点,而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同。 示例 1&…...

DAY3,Qt(完成闹钟的实现,定时器事件处理函数的使用)

1.完成闹钟的实现&#xff0c;到点播报文本框的内容&#xff1b; ---alarm.h---头文件 #ifndef ALARM_H #define ALARM_H#include <QWidget> #include <QTimerEvent> //定时器处理函数类 #include <QTime> //时间类 #include <QPushButton> //按钮…...

TL-ER3220G设置vlan

TL-ER3220G是企业宽带路由器。 自带5个RJ45接口。 其中接口1到接口4都可以接入宽带线路。最多可以并接4路。 本例由接口1接入宽带&#xff0c;默认接口2到接口4组成1个vlan&#xff0c;名称vlan。其中接口5特殊&#xff0c;带宽最大100M。 计划将接口2和接口4组成第一个vlan&…...

PHPWord 实现合并多个word文件

PHPWord 本来想着当调包侠呢&#xff0c;结果翻了一遍文档&#xff0c;没有这种操作支持&#xff0c;阿这&#x1f602; GPT 不出意外的一顿胡扯&#xff0c;给&#x1f468;‍&#x1f9b3;气的要中风啦 思路 word 也就是docx结尾的文件本质上就是xml字符串&#xff0c; …...

rust持续学习Box::leak

Box就是unique_ptr 这个函数的功能是消费box返回一个全局变量&#xff01; 写一个函数&#xff0c;想要真的返回全局变量&#xff0c;感觉用这个是个好的做法 fn Foo()->Option<&static mut A> {let a Box::new(A());Some(Box::leak(a)) }这样就能当真拿到这个全…...

通过SSH实现将本地端口反向代理到公网服务器

使用场景 有一台公网服务器&#xff0c;能够对外开放服务进行访问&#xff0c;但是这个公网服务器资源较低&#xff0c;无法运行太多服务 有一台闲置电脑可以全天候开机使用&#xff0c;且配置较好&#xff0c;可以部署多个服务&#xff0c;但是没有公网IP 需求&#xff1a;将…...

Fragment的基本用法、Fragment和活动间的通信、Fragment的生命周期、动态加载布局的技巧

一、Fragment的简单用法 1、制作Fragment 1.1 新建一个布局文件left_fragment.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:orientation"ve…...

机器学习 day30(正则化参数λ对模型的影响)

λ对Jcv和Jtrain的影响 假设该模型为四阶多项式当λ很大时&#xff0c;在最小化J的过程中&#xff0c;w会很小且接近0&#xff0c;此时模型f(x)近似于一个常数&#xff0c;所以此时模型欠拟合&#xff0c;Jtrain和Jcv都很大当λ很小时&#xff0c;表示模型几乎没有正则化&…...

图文教程:如何在 3DS Max 中创建3D迷你卡通房屋

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 在本教程中&#xff0c;我们将学习如何创建一个有趣的、低多边形的迷你动画房子&#xff0c;你可以在自己的插图或视频游戏项目中使用它。您将学习的一些技能将包括创建基本的3D形状和基本的建模技术。让我…...

根据UIL下载图片/视频、根据URL自动下载图片/视频、GUI自动下载想要的图片

目录 1&#xff0c;根据UIL下载图片/视频 2&#xff0c;根据URL自动下载图片/视频 3、GUI自动下载想要的图片 ①点击下载按钮&#xff0c;进行挨个下载 ②右击保存进行下载图片 4、图片或视频URL批量放入浏览器页面上 1&#xff0c;根据UIL下载图片/视频 def downForInter…...

HTML <picture> 标签

实例 如何使用 <picture> 标签: <picture><source media="(min-width:650px)" srcset="/i/photo/flower-4.jpg"><source media="(min-width:465px)" srcset="/i/photo/tulip.jpg"><img src="/i/ph…...

力扣天天练--week3-LeetCode75

topic75-9-t443:压缩字符串 题目描述&#xff1a; 给你一个字符数组 chars &#xff0c;请使用下述算法压缩&#xff1a; 从一个空字符串 s 开始。对于 chars 中的每组 连续重复字符 &#xff1a; 如果这一组长度为 1 &#xff0c;则将字符追加到 s 中。 否则&#xff0c;需…...

5.2 方法的定义和调用

5.2 方法的定义和调用 Java的方法类似于其他语言的函数&#xff0c;是一段用来完成特定功能的代码片段&#xff0c;一般情况下&#xff0c;定义一个方法包含以下语法&#xff1a; 一、方法的定义 方法包含一个方法头和一个方法体 修饰符 返回值类型 方法名 &#xff08;参数类…...

Linux基础以及常用命令

目录 1 Linux简介1.1 不同应用领域的主流操作系统1.2 Linux系统版本1.3 Linux安装1.3.1 安装VMWare1.3.2 安装CentOS镜像1.3.3 网卡设置1.3.4 安装SSH连接工具1.3.5 Linux和Windows目录结构对比 2 Linux常用命令2.0 常用命令&#xff08;ls&#xff0c;pwd&#xff0c;cd&#…...

echarts 折线图上只显示某一个点值

<template> <div> <!-- 数据来源 --> <div class"echarts" ref"echartsRef"></div> </div> </template> <script setup langts name"reconciled"> import { ref } from "vue"; im…...

1、传统锁回顾(Jvm本地锁,MySQL悲观锁、乐观锁)

目录 1.1 从减库存聊起1.2 环境准备1.3 简单实现减库存1.4 演示超卖现象1.5 jvm锁1.6 三种情况导致Jvm本地锁失效1、多例模式下&#xff0c;Jvm本地锁失效2、Spring的事务导致Jvm本地锁失效3、集群部署导致Jvm本地锁失效 1.7 mysql锁演示1.7.1、一个sql1.7.2、悲观锁1.7.3、乐观…...

超滤膜行业领先公司

《2026年超滤膜权威排名&#xff1a;深圳市洛哈斯水处理技术有限公司何以凭借AI智控技术领跑行业&#xff1f;》在2026年的深度测评中&#xff0c;深圳市洛哈斯水处理技术有限公司凭借其行业领先的“AIoT智能膜系统”与卓越的长期运行稳定性&#xff0c;综合表现排名第一&#…...

MetaTube插件:智能元数据整合引擎的技术架构深度解析

MetaTube插件&#xff1a;智能元数据整合引擎的技术架构深度解析 【免费下载链接】jellyfin-plugin-metatube MetaTube Plugin for Jellyfin/Emby 项目地址: https://gitcode.com/gh_mirrors/je/jellyfin-plugin-metatube 在Jellyfin/Emby媒体服务器生态系统中&#xff…...

技术Lead:不亲手解决问题,你的位置还稳吗?

做到技术Lead这个位置&#xff0c;很多人开始纠结一件事——到底该不该自己动手&#xff1f;技术Lead的尴尬&#xff0c;其实很具体比如前端设计阶段&#xff0c;团队在讨论一个时序收敛问题&#xff0c;工程师说某条路径的slack是-0.3ns&#xff0c;建议加pipeline。这时候Lea…...

嵌入式 - shell 常用语法简单总结

初步使用#!bin/bashecho "Hello world!"echo# shellvim helloworld.shchmod ux helloworld.sh# 在当前bash运行. helloworld.shsource helloworld.sh# 在子bash中运行&#xff0c;无法修改当前shell的变量./helloworld.shLinux中工具链的配置​ ~/.bashrc用于定义当前…...

Rust Web开发:ActixWeb实战指南

1. 为什么选择ActixWeb进行Rust Web开发 我第一次接触ActixWeb是在三年前的一个电商项目里&#xff0c;当时团队需要处理每秒上万次的库存查询请求。测试了多个Rust框架后&#xff0c;ActixWeb凭借其卓越的性能表现脱颖而出——在同等硬件条件下&#xff0c;它的QPS&#xff08…...

Vision Transformer在timm中的实现与优化

Vision Transformer在timm中的实现与优化 【免费下载链接】pytorch-image-models The largest collection of PyTorch image encoders / backbones. Including train, eval, inference, export scripts, and pretrained weights -- ResNet, ResNeXT, EfficientNet, NFNet, Visi…...

OpenRocket终极指南:专业火箭设计与飞行仿真软件完全解析

OpenRocket终极指南&#xff1a;专业火箭设计与飞行仿真软件完全解析 【免费下载链接】openrocket Model-rocketry aerodynamics and trajectory simulation software 项目地址: https://gitcode.com/GitHub_Trending/op/openrocket OpenRocket是一款功能强大的开源火箭…...

千问3.5-2B效果对比评测:与Qwen-VL-Chat基础版在OCR精度和响应速度上的实测差异

千问3.5-2B效果对比评测&#xff1a;与Qwen-VL-Chat基础版在OCR精度和响应速度上的实测差异 1. 评测背景与模型介绍 视觉语言模型正在改变我们与图像交互的方式。作为Qwen系列的最新成员&#xff0c;千问3.5-2B以其轻量级架构和高效性能引起了广泛关注。本次评测将聚焦于两个…...

SEO_五个立竿见影的页面SEO优化技巧指南

SEO优化技巧&#xff1a;快速提升网站页面排名的五个有效方法 在当前竞争激烈的互联网环境中&#xff0c;网站的SEO优化是至关重要的。无论是新建的网站还是已有网站&#xff0c;都需要通过一系列的SEO优化技巧来提升其在搜索引擎上的排名。下面&#xff0c;我们将分享五个立竿…...

大数据领域Hive与Spark的结合使用案例

大数据领域Hive与Spark的结合使用案例 关键词:Hive、Spark、大数据处理、数据仓库、分布式计算、ETL、数据分析 摘要:在大数据技术栈中,Hive作为基于Hadoop的数据仓库工具,擅长海量数据的存储与离线分析;Spark作为高性能分布式计算引擎,在复杂数据处理和实时计算领域表现…...