【JS】this指向

news2024/11/28 19:35:36

一、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) //obj

        function 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) //obj
        function 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); //window
    new x(); //强行指向实例之后的对象foo
    x.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); //window
    return a-b;
})
setInterval(function(){
    console.log(this); //window
})

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

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

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

相关文章

从中序和后序遍历序列构造二叉树

注意&#xff1a;该解法是基于二叉树中的值不存在重复所写的。 代码如下&#xff0c;可开袋即食 class Solution {private Map<Integer,Integer> map;public TreeNode buildTree(int[] inorder, int[] postorder) {map new HashMap<>();for(int i 0; i < in…

Mysql数据库 6.SQL语言 分组、分页查询

分组查询—group by 分组——就是将数据表中的记录按照指定的类进行分组 关键字——group by 语法 语法中加[]的是可有可无的&#xff0c;group by一般和having一起使用 select 分组字段/聚合函数 from 表名 [where 条件] group by 分组列名 [having 条件] [order by …

3DEXPERIENCE云端项目管理小工具--Project Planner项目策划者角色

云端3DEXPERIENCE平台提供了一个协作环境&#xff0c;使企业和个人能够以全新的方式实现创新。它将人员、创意、数据和解决方案连接到一个始终在线且可用的协作和交互环境中&#xff0c;可以帮助您的企业提高执行力、生产率并加速创新。 3DEXPERIENCE中的Project Planner项目策…

操作系统 day02(特征和发展历程)

一&#xff0c;操作系统的特征 并发和并行 共享 并发和共享互为存在条件 虚拟 异步 综上所述&#xff1a; 二&#xff0c;操作系统的发展历程

基于图神经网络的联邦学习跨企业推荐

Federated Learning-Based Cross-Enterprise Recommendation With Graph Neural Networks 论文试图解决什么问题 该论文试图解决跨企业推荐系统中存在的数据共享和用户隐私保护的问题。在许多小型和中型企业中&#xff0c;由于资源有限&#xff0c;无法提供足够的数据来进行大…

FreeRTOS_信号量之优先级翻转

目录 1. 优先级翻转 2. 优先级翻转实验 2.1 实验目的 2.2 实验设计 2.3 实验程序 2.4 现象 1. 优先级翻转 在使用二值信号量的时候会遇到一个很常见的问题——优先级翻转。优先级翻转在可剥夺内核中是非常常见的&#xff0c;在实时系统中不允许出现这种现象&#xff0c;这…

代码随想录第五十七天|● 392.判断子序列 ● 115.不同的子序列

392.判断子序列 题目&#xff1a; 给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如&#xff0c;"ace"是&qu…

VueX环境的搭建

一、安装VueX npm i vuex // Vue3安装该版本 npm i vuex3 // Vue2安装该版本 因为我使用的是Vue2&#xff0c;所以安装的是3版本 二、配置VueX文件 在src目录下创建store文件夹&#xff0c;再创建index.js 在index.js中配置如下代码&#xff1a; // VueX配置文件/…

Android广播BroadcastReceiver

BroadcastReceiver组件 BroadcastReceiver是Android中的一个组件&#xff0c;用于接收和处理系统广播或应用内广播。它可以监听系统事件或应用内自定义的广播&#xff0c;并在接收到广播时执行相应的操作。 广播是一种用于在应用组件之间传递消息的机制。通过发送广播&#x…

一个小技巧,显著提升大模型推理能力!加州大学提出MAF多反馈框架

作者 | 谢年年 最近&#xff0c;多篇文章《GPT-4的推理能力非常有限&#xff0c;有两篇论文为证》、《DeepMind&#xff1a;无法自我纠正推理&#xff0c;除非提前得知正确答案》指出大模型在推理任务中似乎没有自我改进的能力。即在无任何外部反馈的情况下无法通过自我纠正的形…

Vue3.0 toRef toRefs :VCA模式

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

会声会影2023输出文件太大怎么办

会声会影2023是一款专业的视频编辑软件&#xff0c;它由于简单易学的操作被众人所喜爱。在会声会影中编辑好的视频一般以渲染的形式导出保存&#xff0c;但是有时会出现输出文件太大的情况&#xff0c;这到底是什么原因呢&#xff1f;下面由我带大家一起来了解会声会影输出文件…

每天学习都很累,该怎么办?

中考淘汰一批人&#xff0c;高考又淘汰一批人&#xff0c;能杀进大学的&#xff0c;都知道高考的累。好不容易进了大学&#xff0c;却发现仍有打卡、作业、考试。 加上每天满满的课表&#xff0c;只是看看就让人心累。 为了奖学金或升学就业&#xff0c;又得去卷绩点、卷比赛、…

【Linux】Linux+Nginx部署项目(负载均衡动静分离)

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Linux的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.Nginx负载均衡 1.什么是负载均衡 2.实…

AIGC驱动,商业翻新,拓世法宝AI智能直播一体机,绘就商业革命新篇章

迈入数字新纪元&#xff0c;AIGC技术掀起了全球范围内的内容创作革命。这种借人工智能之力突破创造力边界的技术&#xff0c;已将内容生成的门槛降至前所未有的低点。AIGC凭借其惊艳的内容生成能力&#xff0c;收获了众人的瞩目。这不是一瞬间的激情释放&#xff0c;而是新时代…

UML类图关系

1.依赖 依赖关系由箭头表示&#xff0c;含义为A类在类中用到了B类&#xff0c;如B类作为A类的属性、参数、返回值等都属于依赖关系。 2.泛化&#xff08;继承&#xff09; 泛化用三角箭头和直线表示&#xff0c;extend。 3.实现 实现用三角箭头和虚线表示&#xff0c;在…

订水商城实战教程07-搜索

目录 1 创建数据源2 首页搜索功能3 创建搜索页面4 搭建搜索结果页面总结 上一篇我们讲解了店铺信息的展示功能&#xff0c;本篇讲解一下搜索功能。通常小程序在首页都配置了搜索的功能&#xff0c;输入关键词进行检索&#xff0c;可以在结果页上进行选购。同时还记录了用户的搜…

博客系统自动化测试项目实践

文章目录 一.测试需求分析1.功能分析2.非功能分析 二.制定测试方案&#xff08;计划 策略&#xff09;三.编写测试用例四.执行自动化测试用例五.编写测试报告六.项目总结 一.测试需求分析 1.功能分析 通过功能测试需求分析 2.非功能分析 非功能分析主要从:界面,性能,安全性,…

jmeter性能测试如何实现分布式部署

jmeter什么要做分布式部署&#xff1f; jmeter是运行在JVM虚拟机上的&#xff0c;当模拟大量并发时&#xff0c;对运行机器的性能/网络负载会很大。 此时就需要使用jmeter的分布式部署功能&#xff0c;实现多台被控机器同时并发访问被测系统。 原理图&#xff1a; 准备工作&…

小型取暖器上亚马逊美国站UL1278标准如何办理?

小型取暖器上亚马逊美国站UL1278标准如何办理&#xff1f; 小型取暖器上亚马逊美国站UL1278标准如何办理&#xff1f; 冬季马上就要来临&#xff0c;随着气温一天一天的下降&#xff0c;取暖器就是这个冬季必不可少的好物了&#xff0c;试想一下冬天一家人围着取暖器&#xf…