学习JavaScript必须知道的10个难点,你都知道吗?

2023-11-07

立即执行函数

立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是创建函数的同时立即执行。它没有绑定任何事件,也无需等待任何异步操作:

(function() { // 代码// ...})();

function(){…}是一个匿名函数,包围它的一对括号将其转换为一个表达式,紧跟其后的一对括号调用了这个函数。立即执行函数也可以理解为立即调用一个匿名函数。立即执行函数最常见的应用场景就是:将var变量的作用域限制于你们函数内,这样可以避免命名冲突。

闭包

对于闭包(closure),当外部函数返回之后,内部函数依然可以访问外部函数的变量。

学习JavaScript必须知道的10个难点,你都知道吗?

代码中,外部函数f1只执行了一次,变量N设为0,并将内部函数f2赋值给了变量result。由于外部函数f1已经执行完毕,其内部变量N应该在内存中被清除,然而事实并不是这样:我们每次调用result的时候,发现变量N一直在内存中,并且在累加。为什么呢?这就是闭包的神奇之处了!

使用闭包定义私有变量

通常,JavaScript开发者使用下划线作为私有变量的前缀。但是实际上,这些变量依然可以被访问和修改,并非真正的私有变量。这时,使用闭包可以定义真正的私有变量:

学习JavaScript必须知道的10个难点,你都知道吗?

代码中,对象p的的name属性为私有属性,使用p.name不能直接访问。

prototype

每个JavaScript构造函数都有一个prototype属性,用于设置所有实例对象需要共享的属性和方法。prototype属性不能列举。JavaScript仅支持通过prototype属性进行继承属性和方法。

学习JavaScript必须知道的10个难点,你都知道吗?

代码中,xy都是构造函数Rectangle创建的对象实例,它们通过prototype继承了getDimensions方法。

模块化

JavaScript并非模块化编程语言,至少ES6落地之前都不是。然而对于一个复杂的Web应用,模块化编程是一个最基本的要求。这时,可以使用立即执行函数来实现模块化,正如很多JS库比如jQuery以及我们Fundebug都是这样实现的。

学习JavaScript必须知道的10个难点,你都知道吗?

所谓模块化,就是根据需要控制模块内属性与方法的可访问性,即私有或者公开。在代码中,module为一个独立的模块,N为其私有属性,print为其私有方法,decription为其公有属性,add为其共有方法。

变量提升

JavaScript会将所有变量和函数声明移动到它的作用域的最前面,这就是所谓的变量提升(Hoisting)。也就是说,无论你在什么地方声明变量和函数,解释器都会将它们移动到作用域的最前面。因此我们可以先使用变量和函数,而后声明它们。

但是,仅仅是变量声明被提升了,而变量赋值不会被提升。如果你不明白这一点,有时则会出错:

学习JavaScript必须知道的10个难点,你都知道吗?

为了避免BUG,开发者应该在每个作用域开始时声明变量和函数。

柯里化

柯里化,即Currying,可以是函数变得更加灵活。我们可以一次性传入多个参数调用它;也可以只传入一部分参数来调用它,让它返回一个函数去处理剩下的参数。

学习JavaScript必须知道的10个难点,你都知道吗?

代码中,我们可以一次性传入2个1作为参数add(1)(1),也可以传入1个参数之后获取add1add10函数,这样使用起来非常灵活。

apply, call与bind方法

JavaScript开发者有必要理解applycallbind方法的不同点。它们的共同点是第一个参数都是this,即函数运行时依赖的上下文。

三者之中,call方法是最简单的,它等价于指定this值调用函数:

学习JavaScript必须知道的10个难点,你都知道吗?

apply方法与call方法类似。两者唯一的不同点在于,apply方法使用数组指定参数,而call方法每个参数单独需要指定:

  • apply(thisArg, [argsArray])
  • call(thisArg, arg1, arg2, …)

学习JavaScript必须知道的10个难点,你都知道吗?

使用bind方法,可以为函数绑定this值,然后作为一个新的函数返回:

学习JavaScript必须知道的10个难点,你都知道吗?

Memoization

Memoization用于优化比较耗时的计算,通过将计算结果缓存到内存中,这样对于同样的输入值,下次只需要中内存中读取结果。

学习JavaScript必须知道的10个难点,你都知道吗?

函数重载

所谓函数重载(method overloading),就是函数名称一样,但是输入输出不一样。或者说,允许某个函数有各种不同输入,根据不同的输入,返回不同的结果。凭直觉,函数重载可以通过if...else或者switch实现,这就不去管它了。jQuery之父John Resig提出了一个非常巧(bian)妙(tai)的方法,利用了闭包。

从效果上来说,people对象的find方法允许3种不同的输入: 0个参数时,返回所有人名;1个参数时,根据firstName查找人名并返回;2个参数时,根据完整的名称查找人名并返回。

难点在于,people.find只能绑定一个函数,那它为何可以处理3种不同的输入呢?它不可能同时绑定3个函数find0,find1find2啊!这里的关键在于old属性。

addMethod函数的调用顺序可知,people.find最终绑定的是find2函数。然而,在绑定find2时,oldfind1;同理,绑定find1时,oldfind0。3个函数find0,find1find2就这样通过闭包链接起来了。

根据addMethod的逻辑,当f.lengtharguments.length不匹配时,就会去调用old,直到匹配为止。

学习JavaScript必须知道的10个难点,你都知道吗?

学习JavaScript必须知道的10个难点,你都知道吗?

学习JavaScript必须知道的10个难点,你都知道吗?

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

学习JavaScript必须知道的10个难点,你都知道吗? 的相关文章

  • Jquery获取选中的复选框

    您好 我想获取页面中选定复选框的列表 实际上我真正需要的是获取复选框旁边的元素的文本 该元素是一个 html 元素 li 代码如下 但它不起作用 这是我当前的 jQuery document ready function target cl
  • Angular UI 模式的范围问题

    我无法理解 使用角度 UI 模式的范围 虽然这里不是很明显 但我已经正确设置了模块和所有内容 据我所知 但这些代码示例尤其是我发现错误的地方 index html 其中重要部分 div class btn group div
  • 使用本地存储在从另一个表保存的 HTML TABLE 中打印 JSON,以便我在另一个页面上打印我的表

    在我的作业中 我必须使用用户输入中的数据并将数据保存在本地存储中 我必须以水平表格式将这些数据从本地存储打印到其他页面 为此 我编写了用于用户输入并将数据保存在本地存储中的代码 div p p div
  • 使用 Angular 指令禁用文本选择

    我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择 我有该函数的 JavaScript 代码 function clearSelection if document sele
  • 如何使用 Playwright 使用选择器查找框架 (iframe)

    我有一个小问题 无法找到使用 Microsoft Playwright 框架的答案 根据您可以使用以下代码获取 iframe const frame page frame frame login 但是如何使用选择器来查找 iframe 并与
  • nodejs (libuv) 事件循环是否在一个阶段(队列)中执行所有回调,然后再进入下一阶段或以循环方式运行?

    我正在研究 Node js 中 libuv 提供的事件循环 我遇到了关注 Deepal Jayasekara 的博客 https blog insiderattack net event loop and the big picture n
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • 本地推送通知到在应用程序内运行 JS 代码的 Win8 Live Tile

    我正在尝试将更新发送到我的应用程序的磁贴 当应用程序运行时 这可以正常工作 例如 当用户单击按钮时 我可以轻松地将磁贴更新通知发送到磁贴 我无法解决的是当应用程序无法运行时如何更新磁贴 我找到的唯一选择是使用以下命令从远程 Web 服务器拉
  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • IE 中的 XPath 查询使用从零开始的索引,但 W3C 规范是从一开始的。我应该如何处理差异?

    问题 我正在转换目前仅适用于 Internet Explorer 的相对较大的 Javascript 代码 以便使其也适用于其他浏览器 由于代码广泛使用 XPath 我们做了一些兼容性功能以使事情变得更容易 function selectN
  • 如何使用 Javascript 设置查询字符串

    有没有办法使用 javascript 设置查询字符串的值 我的页面有一个过滤器列表 单击该列表时 它将更改右侧的页内结果窗格 我正在尝试更新 url 的查询字符串值 因此如果用户离开页面 然后单击 后退 按钮 他们将返回到最后一个过滤器选择
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求
  • 使用 Enzyme 测试 `React.createRef` api

    我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • vue中属性key的作用(了解diff),为什么不建议index作为key

    1 官方文档有关key的说明 key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法 在新旧 nodes 对比时辨识 VNodes 如果不使用 key Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改 复用
  • 一篇搞定,Kettle详细教程

    文章目录 第一章 Kettle概述 1 1 Kettle发展历程 1 2 Kettle简介 1 3 Kettle相关俗语 1 4 Kettle设计与组成 1 5 Kettle功能模块 1 6 Kettle的执行 Transformation
  • OPT3001光强传感器驱动实现(STM32F407)

    上面是我的微信和QQ群 欢迎新朋友的加入 写了个光强传感器的代码 产品特点 精密光学滤波以匹配人眼 拒绝IR gt 99 典型值 自动满量程设定功能简化了软件 并确保正确的配置 0 01勒克斯至83K勒克斯 23位有效动态范围 自动增益范围
  • 批量汇总nmon结果文件Excel数据

    1 原由 在使用nmon监控服务器资源以后 因为服务器较多 生成了几十个结果文件 现在需要统计每个文件中cpu 内存 disk等平均值 最大值信息 太多表了 就写了个Python脚本 以后可能用的上 先记录一下 nmon生成的Excel中
  • Xml外部实体注入漏洞(XXE)与防护

    Xml外部实体注入 XXE 除了json外 xml也是一种常用的数据传输格式 对xml的解析有以下几种常用的方式 DOM SAX JDOM DOM4J StAX等 然而这几种解析方式都可能会出现外部实体注入漏洞 如微信支付的回调就出现过 见
  • 电脑启机时出\windows\system32\drivers\bootsafe64.sys什么

    开机时出现如下故障解决办法 用老毛桃制作PE启动盘 把C WINDOWS system32 drivers下bootsafe64 sys删除还有一个kavbootc sys删除 重启即可 此问题就出在金山的产品给系统加入的这个文件 它不知出
  • 注释转换(C的多行注释 转换为C++的单行注释)

    目录 题目描述 AnnotationConvert h 状态划分 AnnotationConvert c 处理每个字符 main c 测试代码 Makefile 编译 test in 待测试数据 test out 输出 题目描述 把C的多行
  • 2019年安徽省大数据与人工智能应用赛总结---本科组

    前言 2019年安徽省大数据与人工智能决赛于10月13日在安徽省职业经济管理学院举办 现场赛共计90支队伍 经过4个小时的激烈追逐 我们组获得了22名的不错成绩 荣获省级二等奖 严格意义上说 这是我第一次参加省级比赛 因为缺少比赛经验 所以
  • mysql Initial client character set can be forced via the ‘characterEncoding‘ property.问题

    是数据库版本不一致导致的问题 1查看本地是数据库版本 删除旧包 2在配置文件pom xml文件中修改为对应的版本 3 更新为新的数据连接包 参考https blog csdn net qq 37077976 article details
  • 业务敏捷 SOA从概念到实践迈出的一大步

    2007年5月30号 在北京西四环的世纪金源大酒店宴会厅里 一场关于中国SOA最佳实践的技术大会在这里举行 从Gartner首度提出SOA这个概念到现在已经超过了十个年头 在这十年发展的演变中 SOA的内涵发生了多次的变化 从ESB Web
  • layui使用初步入门

    目录 布局元素 字体图标 按钮 表单 数据表格 弹出层 layui官方地址 layui是模块化框架 这表示你想实现它的某个功能 可以选择不全部引入 只要引入一个一个相关的模块文件即可 引入的方式有两种 一种是将之当成独立组件引入 如 另一种
  • 面试准备1

    上海银行 目录 1 java io 字节流 字符流 使用场景 你了解java的流吗 怎么用流打开一个大文件 2 java序列化 什么时候会用到 必问 3 java集合类 哪些是线程安全的 为什么它们是线程安全的 4 String a a 创
  • leetcode 150-200题-java版(按顺序,不分专题)

    leetcode 150 200题 java版 152 乘积最大子数组 160 相交链表 167 两数之和 输入有序数组 168 Excel表列名称 169 多数元素 172 阶乘后的0 174 地下城游戏 188 买卖股票的最佳时机 4
  • 在学校,你需要知道的8种思维导图的类型及其工作方式

    思维导图是一种学习方法 它可以将学习者的思维和抽象的思想以具体的视觉形象化 具体来说 思维导图可以帮助学习者有效地组织他们的想法和信息 此外 学习者可以更容易地将他们的信息碎片连接起来 这可以提高他们的理解能力 这可以提高他们的理解能力 通
  • Springboot系列(二十二):如何纯文本转成.csv格式文件?

    一 前言 不知道大家有咩有遇到这么个需求 给你一长串文本 要求你能导成excel格式展示数据 一时间我陷入了沉思 如果要常规转excel 最明显的一点就是固定表头名 然而并不是 这表头名是动态给的 连字段名都不相同 这可如何是好 我突然想到
  • error @achrinza/node-ipc@9.2.2: The engine “node“ is incompatible with this module. Expected version

    解决方法三 看报错信息 版本不兼容 这个最好解决了 输入这个命令 该命令是自动补充兼容所报的错误 yarn config set ignore engines true 成功 可以
  • gtest在使用中出现错误:error: undefined reference to ‘testing::internal::EqFailure(char const*, char const*,

    如题 业务需要编写了一个C的API库 顺带写了一个gtest测试用例 但是编译的时候出现题目中的错误 折腾了半天以为是gtest的问题 结果发现是自己CMakelist txt的问题 因为Gtest支持的最低版本是Cxx 14版本 所以只要
  • TCP/IP协议二十一:HTTPS/SSL协议详解(1)加密原理

    TCP IP协议二十一 HTTPS SSL协议详解 1 加密原理 1 加密历史 对称加密算法 1 1 加密 1 2 密钥 1 3 对称加密算法 2 非对称加密算法 2 1 RSA算法 2 1 1 RSA 非对称加密原理 2 1 2 RSA通
  • Rust 近乎宗教般信仰的案例

    Rust 近乎宗教般信仰的案例 亚历山大 西多罗夫 众所周知 Rust 社区对 Rust 非常热情 有些人甚至责怪我们偶尔表现得像一个邪教 恐怕我不会打消这个印象 因为在这篇文章将证明 Rust 使您成为一个更好的工程师 更好的管理者和更好
  • 学习JavaScript必须知道的10个难点,你都知道吗?

    立即执行函数 立即执行函数 即Immediately Invoked Function Expression IIFE 正如它的名字 就是创建函数的同时立即执行 它没有绑定任何事件 也无需等待任何异步操作 function 代码 funct