JavaScript的函数中this的指向

news2024/10/7 2:27:31

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。

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

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

相关文章

简要介绍 | 走向自然的身份认证:步态识别技术简介

注1:本文系“简要介绍”系列之一,仅从概念上对步态识别进行非常简要的介绍,不适合用于深入和详细的了解。 走向自然的身份认证:步态识别技术简介 Gait Recognition Based on Deep Learning: A Survey | ACM Computing Surveys 背景…

一文谈谈Git

"And if forever lasts till now Alright" 为什么要有git? 想象一下,现如今你的老师同时叫你和张三,各自写一份下半年的学习计划交给他。 可是你的老师是一个极其"较真"的人,发现你俩写的学习计划太"水&…

【弹力设计篇】聊聊异步通讯设计

为什么需要异步设计 刚开始参加工作,发现有一些API设计中回落数据之后,然后将数据写入到消息队列中,当时很是不理解为什么要这么做,直到后边系统学习消息队列之后才发现原来这其实就是异步处理,当流量很多的时候&…

一张表中几列字段以不同的条件规则去统计计数展示实现思路设计

今天在写一个业务的时候,遇到这样一个需求 一、需求描述 一张表中其中几列字段需要以不同的条件规则去统计计数,求实现方式 因为项目业务涉及隐私,我就想了一个类似的情景 二、情景描述 有一张月考成绩表,包含学生和他的各科…

区间预测 | MATLAB实现QRBiGRU双向门控循环单元分位数回归多输入单输出区间预测

区间预测 | MATLAB实现QRBiGRU双向门控循环单元分位数回归多输入单输出区间预测 目录 区间预测 | MATLAB实现QRBiGRU双向门控循环单元分位数回归多输入单输出区间预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍 MATLAB实现QRBiGRU双向门控循环单元分位数回归…

EXCEL,如何比较2个表里的数据差异(使用数据透视表)

目录 1 问题: 需要比较如下2个表的内容差异 1.1 原始数据喝问题 1.2 提前总结 2 使用EXCEL公式方法 2.1 新增辅助列: 辅助index 2.2 具体公式 配合条件格式 使用 3 数据透视表方法 3.1 新增辅助列: 辅助index 3.2 需要先打开 数据透视表向导 …

基于CNN卷积神经网络的调制信号识别算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 1. 卷积神经网络(CNN) 2. 调制信号识别 3.实现过程 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022A 3.部分核心程序 % 构建调制类型…

支付宝短视频平台创作分成激励项目

没想到支付宝也开通了中视频计划,这波羊毛算是蒿定了,最近啊,马爸爸火速上线了支付宝创作分成计划,明显就是抄的抖音中视频计划,目前还在内测阶段,补贴的力度非常大,错过的话就只能拍大腿了&…

Prometheus 的应用服务发现及黑河部署等

目录 promtool检查语法 部署Prometheus Server 检查语法是否规范 部署node-exporter 部署Consul 直接请求API进行服务注册 使用register命令注册服务(建议使用) 单个和多个注册,多个后面多加了s 在Prometheus上做consul的服务发现 部署…

windows安装linux

https://www.cnblogs.com/liuqingzheng/p/16271895.html 咱们安装linux系统是centos7 准备工作: 安装软件:vmware -------虚拟机 官网下载地址:下载 VMware Workstation Pro | CN 也可以从这里面下载 链接:https://pan.bai…

MySQL优化(面试)

文章目录 通信优化查询缓存语法解析及查询优化器查询优化器的策略 性能优化建议数据类型优化索引优化 优化关联查询优化limit分页对于varchar end mysql查询过程: 客户端向MySQL服务器发送一条查询请求服务器首先检查查询缓存,如果命中缓存,则立刻返回存…

行车遥控接线图

这个一般只有电工才会用。 主要是 【共线和总电】让人疑惑。 这图实际就是PLC的梯形图。 共电:接主电源。【它串联10A保险丝,再到继电器】 总电:它是所有继电器的公共端。【共电的继电器吸合,共电和总电就直通了。】共电的继电器…

Io进、线程——进程的基础

进程的基础 进程是计算机中最基本的执行单位,是程序在操作系统中的一次执行过程。每个进程都有自己的地址空间、数据栈、程序计数器等,相互之间独立运行,互不干扰。进程间的通信通过特定的机制来实现,进程的创建和撤销由操作系统…

详解Mybatis之动态sql问题

编译软件:IntelliJ IDEA 2019.2.4 x64 操作系统:win10 x64 位 家庭版 Maven版本:apache-maven-3.6.3 Mybatis版本:3.5.6 文章目录 一. 在sql映射文件中如何写注释?二. 什么是动态sql?三. 动态sql常用标签有…

Vue项目如何生成树形目录结构

文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、有兴趣的可以关注一手。 前言 项目的目录结构清晰、可以帮助我们更快理顺项目的整体构成。在写文档之类的时候也比较方便。生成树形目录的方式有多种,我这里简单介绍其中一种较为简单的实现 过…

CSP 2021入门级 第一轮 题目讲解

A: a进栈,直接出栈;b进栈,直接出栈;c进栈,直接出栈;d进栈,直接出栈;e进栈,直接出栈。 B:全进栈后全出栈。 C:a和b先进栈,然后直接出…

【雕爷学编程】MicroPython动手做(09)——零基础学MaixPy之人脸识别2

自己打包kfpkg,试着整了好几次,都是无法烧录,只好不做第七步了,直接把前面获得的人脸识别模型烧录了 烧录完成后,打开IDE串口,确认开发板Maixpy固件的版本,好像是前期的稳定版本V0.4.0 第九步&a…

idea中创建请求基本操作

文章目录 说明效果创建GET请求没有参数带有参数带有环境变量带有动态参数 说明 首先通过###三个井号键来分开每个请求体,然后请求url和header参数是紧紧挨着的,请求参数不管是POST的body传参还是GET的parameter传参,都是要换行的,…

Java版本spring cloud + spring boot 电子招标采购系统源码

营造全面规范安全的电子招投标环境,促进招投标市场健康可持续发展 传统采购模式面临的挑战 一、立项管理 1、招标立项申请 功能点:招标类项目立项申请入口,用户可以保存为草稿,提交。 2、非招标立项申请 功能点:非招标…

《MySQL》第十二篇 数据类型

目录 一. 整数类型二. 浮点类型三. 日期和时间类型四. 字符串类型五. 枚举值类型六. 二进制类型七. 小结 MySQL 支持多种数据类型,学习好数据类型,才能更好的学习 MySQL 表的设计,让表的设计更加合理。 一. 整数类型 类型大小SIGNED(有符号)…