[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧

简介: 本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。

【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)
https://developer.aliyun.com/article/1635464
出自【进步*于辰的博客

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

1、先言

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

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

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

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

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

2、早期笔记

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使用时诸多的“复杂”情况。所谓“存在即合理”,于是我也将它们“迁移”过来了。

3、如今笔记

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仍指向全局对象。

7:箭头函数是es6的语法,没有this的概念(指其内的this指向不应箭头函数本身而变化),其内的this指向与外层第一个非箭头函数中的this指向相同。并且,箭头函数不能实例化(即无法通过“new绑定”改变this指向),故无法访问箭头函数内的局部变量。另外,使用“显式绑定call/apply/bind())”也无法改变this指向。

最后

本篇文章的主要读者是我自己。

也就是,在文章开头我说过,我的笔记是经个人理解后“精简”的,故你可能不一定能理解它们(出于个人时间考虑,我暂不打算对它们进行举例说明和扩展)。

如果你对我做的两次笔记都一脸懵逼,请移步【启发博文】。

本文完结。

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

相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
44 0
|
24天前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
39 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
3月前
|
JavaScript 前端开发 Java
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)
|
4月前
|
存储 缓存 自然语言处理
深入理解JS | 青训营笔记
深入理解JS | 青训营笔记
41 0
|
4月前
|
JavaScript 前端开发 API
尤雨溪分享 Vue.js 10 年的发展历程,谈谈我看完后的启发和感受!!
尤雨溪分享 Vue.js 10 年的发展历程,谈谈我看完后的启发和感受!!
|
5月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
6月前
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
139 1
|
5月前
|
资源调度 前端开发
文本,vitepress的使用,如何使用vitevitepress没有config.js该怎么办?这里使用vitepress进行手动配置,参考只爭朝夕不負韶華的文章
文本,vitepress的使用,如何使用vitevitepress没有config.js该怎么办?这里使用vitepress进行手动配置,参考只爭朝夕不負韶華的文章
|
6月前
|
Web App开发 JavaScript iOS开发
技术笔记:js数组定义和方法(包含ES5新增数组方法)
技术笔记:js数组定义和方法(包含ES5新增数组方法)
|
6月前
|
JavaScript BI
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
87 0