【JS】this指向

一、this指向的四种规则

1.默认绑定规则

对象指向,比较的是引用地址。

console.log(this === window);      //true
console.log({} === {});     //false
//函数的独立调用
function test(){console.log(this === window);     //true
}
test();

2.隐式绑定规则

谁调用就指向谁。

let a = 0;
let obj = {a:2,foo:function(){console.log(this) //obj}}
obj.foo();

这里foo.function是obj对象里面的foo属性,是一个函数。当我们用对象的属性的方式调用这个方法的时候,那么this指向obj。

但如果foo写的是箭头函数,this就指向window了。

let a = 0;
let obj = {a:2,foo:() => {console.log(this) //window or global object}}
obj.foo();

那么下面两个this是否相同呢?

这两个this自然不是同一个this,因为不同函数执行产生不同的AO,所以每个函数有自己的this指向,但指向有可能相同(由当前执行方式决定)。

这里的相同说的是指向对象是同一个,但是他们的函数内部是不相等的,地址不同。

let a = 0;
let obj = {a:2,foo:function(){console.log(this) //objfunction test(){console.log(this); //window}test(); //独立调用就指向window}}
obj.foo(); //这里是obj调用

下面这里立即执行我们要看执行环境,指向相应的全局对象。

这里立即执行函数全都指向window,因为这里是浏览器环境。

let a = 0;
let obj = {a:2,foo:function(){console.log(this) //obj//立即执行函数全都指向window(function(){ console.log(this); //window})()}}
obj.foo();

闭包:闭包就是内层函数引用外层函数的变量。当函数调用的时候,导致内部新函数被定义,并抛出内部被定义的新函数。

作用:延长变量的声明周期。

let a = 0;
let obj = {a:2,foo:function(){console.log(this) //objfunction test(){console.log(this); //window}return test;}}
obj.foo()(); //调用的时候依旧是独立调用相当于test()

隐式丢失

变量赋值

当方法被赋值的时候存在一种例外的现象,它调用了却没有指向它,管这种现象叫隐式丢失。其实本质还是看函数怎么执行的就可以了。也可以去看一下=赋值的原理。

我们知道this指向是在函数执行时产生的。而下面这段代码中是先将obj对象的属性赋值给b,然后再执行的。所以这里foo只是把只想空间的地址赋给b了,但是空间里的this指向没有任何改变。

let a = 0;
function foo(){console.log(this)
}
let obj = {a:2,foo:foo
}
obj.foo();  //obj 对象调用
let b = obj.foo;
b();    //window 独立调用
let c = foo;
c();    //window 独立调用
foo();  //window 独立调用
参数赋值

函数传参过程就是变量赋值,应为js只有按值传递,那么这就也会考虑到隐式丢失的问题。

let a = 0;
function foo(){console.log(this);
}
function b(x){x();    //window
}
let obj={a:2,foo:foo
}
//预编译的过程中,实参被赋值为形参。(值的拷贝的过程,浅拷贝)
b(obj.foo);

父函数有能力决定子函数的this指向。

new 把函数当做构造函数执行,this指向实例。

let a = 0;
function foo(){console.log(this);
}
function b(x){x(obj); //windownew x(); //强行指向实例之后的对象foox.bind(obj)(); //强行指向obj
}//api 接口中指明的//回调函数:父函数,子函数
var arr = [1,2,3];
arr.forEach(function(item, idx, arr){console.log(this); //window
},this)
arr.sort(function(a, b){console.log(this); //windowreturn a-b;
})
setInterval(function(){console.log(this); //window
})let obj={a:2,foo:foo
}
//预编译的过程中,实参被赋值为形参。(值的拷贝的过程,浅拷贝)
b(obj.foo);

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

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

相关文章

CCS3列表和超链接样式

在默认状态下,超链接文本显示为蓝色、下画线效果,当鼠标指针移过超链接时显示为手形,访问过的超链接文本显示为紫色;而列表项目默认会缩进显示,并在左侧显示项目符号。在网页设计中,一般可以根据需要重新定…

linux驱动开发环境搭建

使用的是parallel 创建的ubuntu 16.04 ubuntu20.04虚拟机 源码准备 # 先查看本机版本 $ uname -r 5.15.0-86-generic# 搜索相关源码 $ sudo apt-cache search linux-source [sudo] password for showme: linux-source - Linux kernel source with Ubuntu patches linux-sourc…

初出茅庐的小李博客之STCW15408AS单片机串口1使用记录

STCW15408AS单片机串口1使用记录 资源介绍: STC15W401AS系列单片机是STC生产的单时钟/机器周期(1T)的单片机,是宽电压/高可靠/低功耗/超强抗干扰的新一代8051单片机,采用STC第九代加密技术,无法解密, 代码完全兼容传…

【c++|opencv】二、灰度变换和空间滤波---2.直方图和均衡化

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 图像直方图、直方图均衡化 1. 图像直方图 #include <iostream> #include <opencv2/opencv.hpp>using namespace cv; using namespace std;…

基于SC-LeGO-LOAM的建图和ndt_localizer的定位

link 基于SC-LeGO-LOAM的建图和ndt_localizer的定位 链接: link. SC-LeGO-LOAM 链接: link. ndt_localizer 将建图和定位两部分分开&#xff0c;利用SC-LeGO-LOAM进行建图&#xff0c;相比于LeGO-LOAM&#xff0c;其采用了Scan Context方法&#xff0c;对点云地图进行闭环检测和…

生产制造业如何进行进销存管理?建议收藏!

进销存是什么&#xff1f;生产制造业如何进行进销存管理&#xff1f;制造进销存都能为企业提供什么&#xff1f;进销存管理系统的优势&#xff1f;本文将带大家深入浅出的聊聊制造进销存&#xff0c;全面剖析制造进销存的前世今生&#xff0c;并且为大家提供2023年十大制造进销…

antd5上传图片显示405解决

antd5上传图片&#xff0c;默认使用上传方式会调用本地的接口。 405 Method Not Allowed 状态码 405 Method Not Allowed 表明服务器禁止了使用当前 HTTP 方法的请求。 Upload {...props}beforeUpload{(file) > {//自定义上传图片的逻辑//最后返回falsereturn false }} &…

MTK联发科天玑9000旗舰5G移动平台处理器_MT6983芯片定制开发

MT6983天玑9000采用台积电4纳米工艺制程&#xff0c;CPU采用“134”三丛集Armv9架构&#xff0c;APU性能提升&#xff0c;ISP处理速度提升&#xff0c;最高支持3.2亿像素摄像头&#xff0c;采用Mali-G710十核GPU&#xff0c;搭载R16 5G调制解调器。 MT6983天玑9000芯片基本概…

Linux网络基础2 -- 应用层相关

一、协议 引例&#xff1a;编写一个网络版的计算器 1.1 约定方案&#xff1a;“序列化” 和 “反序列化” 方案一&#xff1a;客户端发送形如“11”的字符串&#xff0c;再去解析其中的数字和计算字符&#xff0c;并且设限&#xff08;如数字和运算符之间没有空格; 运算符只…

[EFI]asus strix b760-i 13900F电脑 Hackintosh 黑苹果efi引导文件

硬件型号驱动情况主板 asus strix b760-i 处理器 I9 13900F 已驱动内存crucial ddr5-5200 64gb(32gb*2)(overclock 5600)已驱动硬盘 WD black sn850 500g*2 已驱动显卡rx570已驱动声卡Realtek ALCS1220A已驱动网卡Intel I225-V 2.5 Gigabit Ethernet已驱动无线网卡蓝牙Fevi T91…

SQLITE3 函数接口

简述 sqlite3 接口的核心元素: 两大对象&#xff0c;八大函数&#xff1b; 其中两个对象指的是: sqlite3 数据库连接对象 数据库的连接句柄(数据库的文件描述符) 代表你打开的那个 sqlite3 的数据库文件,后序对数据库的操作都需要用到这个对象 sqlite3_stmt SQL 语句对象…

本地模拟,服务器下载文件

题目要求&#xff1a; 编写客户端程序和服务器端程序客户端可以输入一个音乐 文件名&#xff0c;比如 美丽中国&#xff0c;服务端 收到音乐后&#xff0c;可以给客户端返回这个音乐文件&#xff0c;如果服务器没有这个文件&#xff0c;返回一个默认的音乐即可客户端收到文件后…

redis加入window服务及删除

1、命令redis-server.exe --service-install redis.windows.conf&#xff0c;在服务中可配置自动启动 删除redis服务&#xff0c;先停止redis服务运行&#xff0c;管理员cmd模式&#xff0c;sc delete "redis" ,

python捕获异常和scapy模块的利用

Python捕获异常 ​ 当程序运行时&#xff0c;因为遇到未知的错误而导致中止运行&#xff0c;便会出现Traceback 消息&#xff0c;打印异常。异常即是一个事件&#xff0c;该事件会在程序执行过程中发生&#xff0c;影响程序的正常执行。一般情况下&#xff0c;在Python 无法正…

node使用fs模块(四)—— 文件夹的使用(创建、读取、删除)

文章目录 前言一、文件的创建1.参数2.基本使用 二、文件的读取1.参数2.读取文件的基本使用3.读取文件的递归使用&#xff08;option中添加recursive为true&#xff09; 三、文件的删除1. 参数2. 基本使用&#xff08;删除文件夹&#xff09;3. 递归删除文件夹 前言 创建、读取…

Vue3.0 toRef toRefs :VCA模式

简介 作用&#xff1a; 创建一个ref对象&#xff0c;其value值指向另一个对象中的某个属性 语法&#xff1a; const name toRef(person, name) 应用&#xff1a; 要将响应式对象中的某个属性单独供应给外部使用时 扩展&#xff1a; toRefs与toRef功能一致&#xff0c;但可…

Java while 和do while 循环

循环是程序中的重要流程结构之一。循环语句能够使程序代码重复执行&#xff0c;适用于需要重复一段代码直到满足特定条件为止的情况。 所有流行的编程语言中都有循环语句。Java 中采用的循环语句与C语言中的循环语句相似&#xff0c;主要有 while、do-while 和 for。 另外 Ja…

LabVIEW开发双目立体系统猪重估算

LabVIEW开发双目立体系统猪重估算 动物的活重是各种研究中的重要参考&#xff0c;例如动物生长&#xff0c;饲料转化率&#xff0c;健康状况和疾病发生。生长中的动物的体重为保持它们处于适当的营养和环境水平提供了一个有价值的参数或指标。动物的利润通常与收入和成本之间的…

idea集成测试插件替代postman

idea集成测试插件替代postman 兄弟萌&#xff0c;你再测试接口是否无bug是否流畅的时候是否还在使用“postman”来回切换进行测试呢&#xff1f; 页面切换进行测试&#xff0c;有没有感觉很麻烦呢&#xff1f; 打开postman&#xff0c;输入接口地址&#xff0c;有没有感觉很麻烦…

《AI时代架构师修炼之道:ChatGPT让架构师插上翅膀》

本专注于帮助架构师在AI时代 实现晋级、提高效率的图书 书中介绍了如何使用 ChatGPT 来完成架构设计的各个环节 并通过实战案例展示了ChatGPT在实际架构设计中的应用方法 关键点 1.架构设计新模式&#xff1a;让架构设计更高效、更快捷、更完美。 2.全流程解析&#xff1a;涵盖…