首页 > 编程语言 >[JavaScript]“复杂”的 this

[JavaScript]“复杂”的 this

时间:2024-07-01 11:09:22浏览次数:26  
标签:调用 函数 指向 复杂 对象 JavaScript 笔记 fun

【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)
https://www.cnblogs.com/cnb-yuchen/p/18277656
出自【进步*于辰的博客

参考笔记二,P6.1;笔记三,P72、P73.1。

先言

我很早就知晓JS的这个知识点——this的重要性,并特意系统学习、理解并有所笔记,但限于平日用得少,对其的理解慢慢淡化。

前段时间打算复习一下,一翻阅笔记“懵逼”,因为我的笔记是经个人理解后“精简”的,若后来有所淡忘再去看必然难免一些地方不理解,无妨,再去系统学一遍。

你肯定会问:“你明知this这个知识点的重要性,平日怎么会少用,进而淡忘?” 有句话你肯定听过,“面试造航母,开发拧螺丝”。(PS:这次不是为了面试,而是出于工作需要,有必要巩固一些JS基础)

启发博文:《js中this究竟指向哪里?现在终于搞定了!》(转发)。

我觉得这位哥们总结得很全面,解决了我所有的疑惑。我也有所笔记,特作此文。当然,不是做一个“搬运工”(PS:那样没意义)。

前面我说过,我的笔记是经个人理解后“精简”的,故你可能不一定能理解它们(出于个人时间考虑,我暂不打算对它们进行举例说明和扩展)。如果你一脸懵逼,还是移步【启发博文】吧。

早期笔记

1this指向类似引用,this.xx即访问调用它的对象的xx属性,此时this指向调用它的对象。(注:所谓“调用”,不是指仅“写出来”,而是“访问”)

2:当函数中有this时,this一定指向函数的上一级对象。访问变量时(this.xx),若函数中存在此变量声明(this.xx = xx),则访问该变量,否则访问函数的上一级对象的xx属性。此时,this指向函数的上一级对象,而不是函数。

3this的指向在调用时确定,函数的确可以实例化,但本身不是对象,故this不会指向它。

4:函数可作为变量传递,但函数不是对象,故若要访问函数的局部变量,需实例化。

5:若函数的返回值是对象(对象或函数),则this指向该对象,否则指向此函数的实例(返回值无效)。特例:若函数返回undefinednull,尽管null也是对象,但this仍指向此函数实例(实例化会改变this指向)。

以上就是我早期学习this时所作的笔记,这样怎会让人不“懵逼”。如今看来,虽然有点“抽象”,但经我核对,这些笔记本身是无误的,正好应对this使用时诸多的“复杂”情况。所谓“存在即合理”,于是我也将它们“迁移”过来了。

如今笔记

1:JS规定:由于this一定指向对象,故即便this所指向的对象中不存在属性athis.a返回的是undefined,而非报错。

2:对象定义中的this一定指向该对象,如:使用字面量定义对象的属性的属性值为函数引用,函数中的this

3:this也应遵循“词法作用域”。

4this指向调用者(对象)。若函数引用作为对象属性,如:字面量、构造函数(this.fun = fun),则函数内的this指向该对象;若函数调用语句作为对象属性,如:字面量、构造函数(this.fun = fun),则函数内的this指向全局对象。

5:假设对象obj1依赖obj2(字面量定义),调用obj1.obj2.fun()同样遵循 第4点,可理解为“就近原则”。

6:在全局作用域下定义的函数若在全局作用域下调用,函数内的this一定指向全局对象。有三种方法可改变this指向(显式绑定):

  1. fun.call(obj, arg1, ...)
  2. fun.apply(obj, [arg1, ...])
  3. fun.bind(obj, arg1, ...)

其中,前2个在指定this指向的同时调用,而bind()只作相应绑定,并未调用,其返回作绑定后的“新函数”,故需再调用(newFun())。

再调用时也可指定实参。若调用bind()时未指定全部实参,再指定的实参可作为“候补”,否则,再指定实参无效(不会覆盖)。

注意

  1. arg1, ...[arg1, ...]是固定格式。其中,调用apply()时,即便只有一个形参,也必须是列表。
  2. obj必须是对象才有效(改变this指向),若obj是函数,则this仍指向全局对象。

重申一遍:如果你仍然觉得一脸懵逼,还是移步【启发博文】吧。

本文完结。

上一篇:[JavaScript]作用域的“生产者”——词法作用域

标签:调用,函数,指向,复杂,对象,JavaScript,笔记,fun
From: https://www.cnblogs.com/cnb-yuchen/p/18277656

相关文章

  • 【JavaScript脚本宇宙】打造完美用户体验:必备JS图形库指南
    探索顶尖JavaScript图形库:从jsPlumb到mxGraph前言在现代的Web开发中,交互式图形和数据可视化库成为了不可或缺的工具。这些库不仅提供了丰富的功能,还大大简化了开发人员的工作流程。本文将介绍和比较六个流行的JavaScript图形和数据可视化库:jsPlumb、GoJS、draw2d、Cytosca......
  • 【JavaScript脚本宇宙】加速您的网站:图像优化工具和库的终极指南
    别让大图拖垮你的应用:如何正确优化图像前言在数字时代,图像是我们日常生活中不可或缺的一部分。然而,随着图像数量的增加和分辨率的提高,它们也占据了越来越多的存储空间和带宽。为了解决这个问题,开发人员可以使用各种图像优化工具和技术来减小图像文件的大小,同时保持其质量......
  • 【JavaScript脚本宇宙】精通前端开发:六大热门CSS框架详解
    前端开发的利器:深入了解六大CSS框架前言在现代Web开发中,选择适合的前端框架和工具包是构建高效、响应式和美观的网站或应用程序的关键。本文将详细介绍六个广受欢迎的CSS框架:Bootstrap、Bulma、TailwindCSS、Foundation、Materialize和SemanticUI。每个框架都有其独特的......
  • 这个大纲涵盖了从基础到高级的 Log Parser 使用技巧和实践,帮助用户全面掌握这一强大的
    LogParser是一个功能强大的工具,用于处理和分析各种日志文件和数据源。以下是一个初级使用教程的大纲,帮助你快速入门和理解其基本功能和用法:1. 介绍和安装什么是LogParser?LogParser是一种强大的命令行工具,用于从多种日志文件、事件日志、CSV文件以及其他结构化数据......
  • 如何刻画复杂事件
    前言复杂事件的刻画✍️[网摘整理]设\(A\),\(B\)是试验\(E\)的随机事件,深入体会用基本事件的和或积的运算来刻画复杂事件,并熟练掌握:①\(A\)发生:\(A=AB+A\bar{B}\);②只有\(A\)发生:\(A\bar{B}\);③\(A\),\(B\)恰有一个发生:\(A\bar{B}\)+\(\bar{A}B\);④\(A\),\(B\)同时发......
  • JavaScript发送带附件的电子邮件
    consttransporter=nodemailer.createTransport({host:"smtp.qq.com",//SMTP服务器地址port:465,//SMTP端口,对于SSL使用465secure:true,//对端口465使用“true”,对所有其他端口使用“false”auth:{user:"发件人邮箱",//发件人邮箱pass:"......
  • Javascript高级程序设计(第四版)--学习记录之基本引用类型
    DateDate类型将日期保存为自协调世界时间1970年1月1日午夜至今所经过的毫秒数。创建日期对象letnow=newDate()Date.parse()方法接收一个表示日期的字符串参数,尝试将这个字符串转换为表示该日期的毫秒数。lettime=newDate(Date.parse("May24,2024"));Date.now()......
  • 【JavaScript脚本宇宙】浏览器中的文件系统:深入了解最受欢迎的JavaScript库
    超越传统存储:探索创新的浏览器文件系统解决方案前言在现代的网页开发中,文件系统和文件操作是不可或缺的一部分。无论是上传图片、下载文档还是在浏览器中保存离线数据,我们都需要与文件系统进行交互。为了简化这些任务并提供更好的用户体验,有许多JavaScript库被开发出来,以......
  • JavaScript第十二讲:DOM编程“创建,删除,替换,插入节点”
    目录1.创建节点2.删除节点3.替换节点4.插入节点使用appendChild()使用insertBefore()深入解析与注意事项1.创建节点在HTMLDOM中,我们通常使用JavaScript的document.createElement()方法来创建元素节点,使用document.createTextNode()方法来创建文本节点。示例......
  • 库分表后复杂查询的应对之道:基于DTS实时性ES宽表构建技术实践
    1问题域业务发展的初期,我们的数据库架构往往是单库单表,外加读写分离来快速的支撑业务,随着用户量和订单量的增加,数据库的计算和存储往往会成为我们系统的瓶颈,业界的实践多数采用分而治之的思想:分库分表,通过分库分表应对存系统读写性能瓶颈和存储瓶颈;分库分表帮我们解决问题的同时......