jstl 获取 javascript 定义的变量_前端开发大牛完整总结出了JavaScript 难点 +最新web前端开发教程...

f4f6ef3f39df83b46c7436f920418ad0.png

1. 立即执行函数

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

d9cbebec63b5963116e224d231c67669.png

立即执行函数

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

2. 闭包

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

0bca1bfcdaf90961409cff8e54f6fab1.png

闭包

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

3. 使用闭包定义私有变量

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

49f65a7a0e8fda234aeb79100d2bbde0.png

使用闭包定义私有变量

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

4. prototype

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

335f0597d8138fffb5fd30c0e1e87d96.png

prototype

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

5. 模块化

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

20064466cb74af74d88866879d93c597.png

模块化

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

6. 变量提升

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

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

db0595a50a8114e1d841965a4d204fa0.png

变量提升

上面的代码等价于下面的代码:

faacbd47d78a3f394db12bd2984bf4d4.png

变量提升

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

7. 柯里化

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

d3d57127e0964da821ab96e8f82a32ac.png

柯里化

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

8. apply, call与bind方法

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

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

3d6685f72f995d8e043a19a2ccd02fc5.png

call 方法

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

  • apply(thisArg, [argsArray])
  • call(thisArg, arg1, arg2, …)
5f3ca8f8d805cdc08475f1ba89bd9e8e.png

apply方法

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

d44512ea381699eaece9fb532b42c786.png

使用bind方法

9. Memoization

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

b453451b3870746ee82f0439a65a377e.png

Memoization

代码中,第2次计算fibonacci(100)则只需要在内存中直接读取结果。

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,直到匹配为止。

7e61c154b259435da73de0a772740e54.png

最后,学习吧,小伙伴,小编为大家准备了JavaScript基础阶段的视频教程,希望可以帮到大家!

bad6e4b4fdea25bf7560787fe905a72c.png
257a63251f7f2c50f446997a717a5804.png

_javascript_01_历史介绍和学习流程

_javascript_02_名词介绍和简单入门

_javascript_03_代码注释和代码风格

_javascript_04_引入js文件

javascript_05_变量的声明方式

_javascript_06_全局变量与局部变量

_javascript_07_探索变量的类型

_javascript_08_算数运算符

_javascript_09_关系运算符

_javascript_10_逻辑运算符

_javascript_11_逻辑运算符if

_javascript_12_逻辑运算符switch

_javascript_13_循环语句for

_javascript_14_循环语句while

_javascript_15_九九乘法表

_javascript_16_函数的声明

_javascript_17_数组的声明和长度

_javascript_18_数组的常见方法

_javascript_19_函数的重载

_javascript_20_事件机制和常见事件

获取方式:转发此文+关注 并 私信小编关键词 “ 学习web ”,即可免费获取哦!

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

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

相关文章

MySQL 5.6.20-enterprise-commercial的参数文件位置问题

今天在折腾MySQL的参数文件时,突然发现MySQL 5.6.20-enterprise-commercial-advanced-log这个版本数据库的参数文件my.cnf的位置有点奇怪,如下所示: [rootDB-Server ~]# mysql --help | grep my.cnforder of preference, my.cnf, $MYSQL_TCP_…

最害怕的是,不知道想要什么

生活在现在的时代,你要是出去吹牛说你与世无争,你看破红尘,你就想开心上班啥也不图,别人要不以为你是一个傻子,要不就以为你是一个家财万贯的主,特别是现在,从2015年开始,房价像吃了…

c语言gcc汇编文件,[汇编]gcc生成汇编.s文件 $ gcc -Og -S sum.c /$ gcc -Og -S -masm=intel sum.c 与 反汇编 objdump...

目录- C语言源码文件:sum.c- gcc 生成的汇编语言文件 sum.sx86-64 AT&T 语法格式x86-64 Intel格式- 反汇编 objdump3.1 输出 AT&T格式 objdump -d sum3.2 输出 Intel格式 objdump -M intel -d sumC语言源码文件:sum.c加法:c a b#in…

diff算法_详解 React 16 的 Diff 策略

这是我 Deep In React 系列的第二篇文章,如果还没有读过的强烈建议你先读前一篇:详谈 React Fiber 架构(1)。前言我相信在看这篇文章的读者一般都已经了解过 React 16 以前的 Diff 算法了,这个算法也算是 React 跨时代或者说最有影响力的一点…

实力剖析一个经典笔试题

昨天群里有个同学发了这样一个题目过来&#xff0c;这个题目应该是嵌入式笔试经典题目了&#xff0c;如果是校招的话&#xff0c;笔试不考这个题目&#xff0c;都觉得有点说不过去。#include <stdio.h>int main() {int a[5] {1,2,3,4,5};int *ptr1 (int *)(&a 1);i…

点击开启此虚拟机时,出现“该虚拟机似乎正在使用中”问题

VMware是常用的虚拟机工具&#xff0c;受到广大群众的喜爱&#xff0c;有用户在意外断电或非正常关机&#xff08;直接关掉进程&#xff09;出现VMware虚拟机无法启动的情况&#xff0c;接下来让我们看看如何解决这一问题。 1.点击我的计算机的windows 10*64后弹出对话框&#…

get请求可以传body吗_都9102年了,GET和POST的区别掌握了没有?

1 前言最近看了一些同学的面经&#xff0c;发现无论什么技术岗位&#xff0c;还是会问到 get 和 post 的区别&#xff0c;而搜索出来的答案并不能让我们装得一手好逼&#xff0c;那就让我们从 HTTP 报文的角度来撸一波&#xff0c;从而搞明白他们的区别。2 标准答案在开撸之前吗…

玩转 Rockchip 的开发板,这些信息你要知道

RK 的处理器Rockchip 在江湖中简称 RK&#xff0c;是一家总部坐落于福建福州的 SOC 设计公司。RK 基于 Arm cortex-A 内核设计的一系列 SOC &#xff0c;宛如苍穹中一颗颗明星&#xff0c;在国内外的产业界和极客手中闪闪发光&#xff0c;其受欢迎程度超过了很多人的想象。登录…

htmlcss实例小项目_小程序websocket心跳库——websocket-heartbeat-miniprogram

前言在16年的时候因为项目接触到websocket&#xff0c;而后对心跳重连做了一次总结&#xff0c;写了篇博客&#xff0c;而后18年对之前github上的demo代码进行了再次开发和开源&#xff0c;最终封装成库。如下&#xff1a;博客&#xff1a;https://www.cnblogs.com/1wen/p/5808…

C语言,画吃豆人剖析

接上一篇文章&#xff0c;很多人还是搞不清楚ptr1[-1]是怎么回事&#xff0c;可以看看这篇文章&#xff0c;看完的同学还是多转发的&#xff0c;让更多的人看到。一道90%都会做错的指针题偶然的一次机会在知乎上看到这个代码&#xff0c;里面涉及的C语言点我觉得很酷&#xff0…

mit数据集_DriveSeg:动态驾驶场景分割数据集

【导读】麻省理工学院和丰田发布DriveSeg数据集以加速自动驾驶研究&#xff0c;DriveSeg包含许多常见道路对象的精确像素级表示&#xff0c;并通过连续视频驾驶场景的镜头。我们如何训练自动驾驶模型&#xff0c;以加深对周围世界的认识&#xff1f;计算机能否从过去的经验中学…

没有长夜痛哭的人,不足以谈人生

早上骑电动车上班了&#xff0c;之前已经连续开车上班有一段时间&#xff0c;每天出公司交停车费心都在滴血&#xff0c;活了30年了&#xff0c;想不到我还是这样穷&#xff0c;我总是觉得明天是最好的一天&#xff0c;即使过得不是十分如意&#xff0c;但是我遇到困难的时候总…

android ne调试工具,Android调试工具adb的正确使用方式

引言&#xff1a;通常在使用Eclipse进行Android应用开发的时候&#xff0c;我们可以使用Eclipse自带的工具来完成调试和查看输出日志的操作&#xff0c;但是假如在当前电脑并没有配置适用于Android开发的Eclipse版本的情况下&#xff0c;想要查看Android设备运行应用或者游戏时…

为什么使用模板

C模板编程是泛型编程的实现方式&#xff0c;因为C中的类型都是强类型。所以导致每个变量都有一种相应的类型。这样就会出现一个弊端&#xff0c;就是相同一个算法针对不同类型的參数&#xff0c;就要实现多个版本号&#xff0c;这样岂不是非常麻烦。那么&#xff0c;C中是否会有…

eltable刷新整个表格方法_利用SSAS实现PBI报表增量刷新

欢迎访问我的博客网站阅读最新BI文章对于经常处理大量数据且其Power BI报表不需要每次都刷新整个数据集的用户而言&#xff0c;增量刷新一直都是个问题&#xff0c;特别是对于那些没有条件使用Premium空间的用户以及在本地报表服务器发布报表的用户。一个稳定可靠的方法是利用S…

我和Git的第一次

我第一次接触Git应该是在2010年&#xff0c;我那年买了第一块Linux开发板&#xff0c;是友善之臂的mini2440&#xff0c;就是这个开发板打开了我Linux的大门&#xff0c;价格是499&#xff0c;我两个月的生活费。如果说到了Linux&#xff0c;不说Git就有点说不过去了&#xff0…

创建线程的方式_创建线程有几种不同的方式?

方式可以用来创建线程1&#xff09;继承Thread类2&#xff09;实现Runnable接口3&#xff09;应用程序可以适用Executor框架来创建线程池实现了Runnable接口这种方式更受欢迎&#xff0c;因为这不需要继承Thread类。在应用设计中已经继承了别的对象的情况下&#xff0c;这需要多…

内存屏障,先看这篇文章

刚看到这个词的时候&#xff0c;我以为是白内障&#xff0c;然后查了很多资料&#xff0c;才理解内存屏障是干嘛的&#xff0c;我就不像很多其他文章说得那么多了&#xff0c;我希望我说得简单一些&#xff0c;让大家看了我的文章都知道这个是怎么回事。说到内存屏障&#xff0…

SpringMVC原理及非注解配置详解

如需转发请标明出处&#xff1a;http://www.cnblogs.com/gudu1/p/7222556.html 1. Spring介绍 Spring MVC是Spring提供的一个强大而灵活的web框架。借助于注解&#xff0c;Spring MVC提供了几乎是POJO的开发模式&#xff0c;使得控制器的开发和测试更加简单。 这些控制器一般不…

ftp 追加远程文件_远程办公彻底火了,高效办公,拒绝卡顿,远程利器你选对了么?...

远程办公的同时肯定会应用到公司的内部系统了&#xff0c;比如OA、ERP等系统&#xff0c;当然为了提高远程办公人员的工作效率&#xff0c;实现资源共享最大化&#xff0c;企业FTP服务的应用也是必不可少。无论是员工出差还是修改&#xff0c;一旦涉及文件的应用&#xff0c;通…