深入理解JavaScript-开篇

简介: 深入理解JavaScript-开篇

我们站在五年工作的基础上,脑子里能想到哪些与 JavaScript 相关的关键字

类型、对象、函数、原型、原型链、继承、词法作用域、作用域链、执行上下文、执行上下文栈、this、闭包、垃圾回收、事件循环...


这些知识点之间有什么联系呢?笔者认为:

每一个知识点之间互相是有关联的,就像一座座城市,城市有城市群,大的城市群就是一个大的知识点,每个小的知识点之间也是有联系的


如果把前端知识点类比中国地图上的城市省份, JavaScript 基础就是”长三角地区“,这是中国最重要的地方之一,也是一名高级前端必备的知识点


笔者会写一个系列,从 JavaScript 是什么,到 JavaScript 由什么组成,解释语言的构成,引出数据类型。JavaScript 的数据类型由基本类型和引用类型构成,从两者的差异到如何辨别两者,引出四种辨别方法:typeof(操作符)、instanceof(运算符)、constructor(构造方法)、Object.prototype.toString.call(source) (原型方法),总结它们的优缺点,最后手写一个判断数据类型的方法——isType


有句话说:在 JavaScript 中,一切皆对象。理解了对象,就理解了 JavaScript。所以我们会以一切皆对象为话题印证下此观点是否正确


在对对象有所了解后,我们知道了 JavaScript 中的「对象」具有多种涵义,它既包括了 Object、Function、Array 等内置对象,也包括宿主对象,自定义对象


既然如此,我们就从内置构造函数 Object 讲起,从属性讲到方法,再从创建对象到拷贝对象。其中创建对象方法中的  new 、Object.create 单开一文进行阐述,拷贝对象也非一两句能说明白,所以亦会写篇文章介绍


而从 JavaScript 中的绝大多数“元素”是对象(除了null、undefined之外)为契机,思考这是为什么。原因是 JavaScript 是基于原型继承的语言,从而了解原型以及继承(虽然我们在 new 中也会提及原型)。在继承一文中,画原型链关系图时,对 Function.__proto__ === Function.prototype 此行为感到疑惑,并对原型链的源头是谁感到好奇,到底是谁在继承的源头,所以就有了JavaScript 中的始皇一文

对原型和继承有所了解后,会对它的应用感到好奇,这里以 instanceof 为例子,会写一篇instanceof——找祖籍


如此,我们讲完了 Object,接着讲 Function,说说为什么函数是一等公民,和 Object 一样,我们从属性讲到方法,并介绍了创建函数、调用函数的使用。有了这些基础后,再介绍为什么函数是一等公民。它身为一等公民不仅是因为它是对象(能赋值给变量),更因为它有函数特有的”天赋“,函数可以作为别的函数的参数、函数有返回值。除此之外,它还有函数作用域,this)、立即执行函数、arguments 等函数独有的特性


如此,我们就挨个讲解这些特性,讲到 this 时,我们会就它的用法“谁调用我,我指向谁”,衍生到 Function 原型上的三个原型方法:call/apply/bind,它们是如何实现的,又如何手写,我们单独写一篇——call、apply、bind 三大将

至于 this 为什么是动态的,而不是像作用域那样,根据所写的位置而定下的呢,要想了解此现象,就需要了解 执行上下文与调用栈,而在讲执行上下文前,需要再了解一个概念——词法环境


也就是说当我们知道了词法环境、执行上下文后,才能解释清楚 this 的经典名言,我们甚至可以对比下执行上下文与作用域。说了这么多,知道了诸多概念后,我们就可以去介绍闭包了,而由闭包衍生出来的应用,如防抖与节流、函数式编程,以及它造成的影响——垃圾回收机制 又是一个个好问题,会单独列出来讲解


如此,就讲完了 Object 和 Function,再讲Array、String,其余的内置构造函数则无需细讲


总的来说,笔者希望能一环扣一环,因为有这些那样的问题,所以才有相应的解决之道。就像如果要理解闭包,就必须要知道作用域和执行上下文,而执行上下文则是由 this 引出,而介绍它(执行上下文)又要先引出词法环境和执行代码阶段的知识点


对比一下 Function 能引出的知识点是最多的,其次是 Object,而 Array、String 能有一些常见的方法出来就不错了,你看,知识的非均衡性体现的淋漓尽致


笔者始终认为,要明白一个知识点,应该从想知道它是什么,能做什么开始,然后再去了解它的背景知识等,而不是先去了解它的背景知识,然后再告诉你它能做什么。因为我们是从需求出发,要先会做,再去了解原理


笔者心得


刚毕业那一年面试,害怕被人问:原型、原型链、闭包、执行上下文、继承...过了一年,开始问 ES6 各类问题、React/Vue,再后来,开始问手写防抖节流、深拷贝、webpack 的打包原理等,现在前端开始面算法。总之,总有人比你懂的多,总有问题会把你问住,而我们要做的,就是把基础打好

相关文章
|
11月前
|
安全 Linux 开发者
|
8月前
|
设计模式 Java 开发者
「全网最细 + 实战源码案例」设计模式——适配器模式
适配器模式(Adapter Pattern)是一种结构型设计模式,通过引入适配器类将一个类的接口转换为客户端期望的另一个接口,使原本因接口不兼容而无法协作的类能够协同工作。适配器模式分为类适配器和对象适配器两种,前者通过多重继承实现,后者通过组合方式实现,更常用。该模式适用于遗留系统改造、接口转换和第三方库集成等场景,能提高代码复用性和灵活性,但也可能增加代码复杂性和性能开销。
174 28
|
11月前
|
存储 安全 Linux
【开源指南】用二叉树实现高性能共享内存管理
本文介绍了一种使用C++实现的共享内存管理方案,通过借鉴Android property的设计思路,采用二叉树结构存储键值对,提高了数据检索效率。该方案包括设置和获取接口,支持多进程/线程安全,并提供了一个简单的测试示例验证其有效性。
445 108
|
10月前
|
机器学习/深度学习 自然语言处理 算法
词嵌入(Word Embeddings)
词嵌入(Word Embeddings)
|
11月前
|
SQL 存储 关系型数据库
SQL判断CHAR类型字段不为空的方法与技巧
在SQL查询中,判断一个CHAR类型字段是否不为空是一个常见的需求
|
NoSQL 算法 Java
接口限流是一种控制访问频率的技术
在高并发场景下,合理的接口限流、防重复提交及接口防抖机制对保障系统稳定性至关重要。本文介绍了如何利用AOP在不改变业务代码的前提下,灵活添加这些功能。具体包括:通过`@AccessLimit`注解实现接口限流,利用Redis进行计数与控制;通过`@RepeatSubmit`注解防止重复提交,确保数据一致性;通过`@AntiShake`注解实现接口防抖,提升用户体验。此外,提供了基于Redisson和Spring Cloud的实现示例。
170 5
|
安全 大数据 量子技术
量子计算机能做什么?
【8月更文挑战第5天】量子计算机能做什么?
713 2
|
文字识别 API 数据处理
印刷文字识别使用问题之对于带钢印的VIN图片如何提高识别准确率
印刷文字识别产品,通常称为OCR(Optical Character Recognition)技术,是一种将图像中的印刷或手写文字转换为机器编码文本的过程。这项技术广泛应用于多个行业和场景中,显著提升文档处理、信息提取和数据录入的效率。以下是印刷文字识别产品的一些典型使用合集。
|
存储 测试技术 虚拟化
网络之路27:IRF设备堆叠
网络之路27:IRF设备堆叠
|
C语言 Windows
C语言中的fopen与fclose函数详解
C语言中的fopen与fclose函数详解
839 1