首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript中匿名函数的困惑

函数字面量(function literal):处理事件的无名函数(nameless function)。函数字面量有时也称为匿名函数(anonymous function)。...可以在onload事件完成所有事件的初始化。 函数字面量最好只被调用一次,而且不是被开发者写的程序代码调用。创建一个函数字面量并直接指派给一个元素的事件属性,而不是创建有名称的函数并指派到它的引用。...如果在代码中不需要函数引用时,为了编写程序的效率,同时不想中规中矩为函数命名,函数字面量(匿名函数)才显得有必要。 匿名函数调用: 调用一个函数,必须有方法定位它,找到它。...,控制台报出错误:Uncaught TypeError: undefined is not a function. 匿名函数的生命周期和window.onload有内在的关系吗?...参考资料: 匿名函数和闭包http://blog.csdn.net/natineprince/article/details/4759533

1.2K70

搞明白JavaScript中的匿名函数

匿名函数顾名思义指的是没有名字的函数,在实际开发中使用的频率非常高!也是学好JS的重点。 匿名函数:没有实际名字的函数。...JavaScript中是没有块级作用域的,例如: if(1==1){//条件成立,执行if代码块语句。...如果有,出了自己的作用域,声明的变量就会立即被销毁了。...在这里简单介绍一下:闭包是可以访问在函数作用域内定义的变量的函数。若要创建一个闭包,往往都需要用到匿名函数。 2、模拟块级作用域,减少全局变量。...执行完匿名函数,存储在内存中相对应的变量会被销毁,从而节省内存。再者,在大型多人开发的项目中,使用块级作用域,会大大降低命名冲突的问题,从而避免产生灾难性的后果。

61620
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JavaScript中的匿名函数及函数的闭包

    1、匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途。匿名函数:就是没有函数名的函数。...闭包的含义:闭包说白了就是函数的嵌套,内层的函数可以使用外层函数的所有变量,即使外层函数已经执行完毕(这点涉及JavaScript作用域链)。...),在checkClosure的函数体内创建了一个变量str,在checkClosure执行完毕之后str并没有被释放,这是因为 setTimeout内的匿名函数存在这对str的引用。...(这是JavaScript语言的特性之一),并且还可以构建命名空间,以减少全局变量的使用。...4、注意 4.1 闭包允许内层函数引用父函数中的变量,但是该变量是最终值 示例六: /** * * * one * two * <li

    1.1K20

    详解JavaScript中的变量提升函数提升

    但只有声明本身会被提升,而赋值或其他运行逻辑会留在原地 javascript并不是严格的自上而下执行的语言 变量声明提升: 1....JavaScript的变量提升是针对var的,而let和const不存在变量提升这一特性(let与const具有一个临时死区的概念,后续在es6的总结中会提到) 2.通过var定义的变量,在定义语句之前就可以访问到...类似地,我们的第二个代码片段实际是按照以下流程处理的: var a; console.log(a); a = 2; 打个比方,这个过程就好像变量和函数声明从它们在代码中出现的位置被“移动” 到了最上面...a没有使用var定义,会造成zxx函数中没有变量声明,所以zxx里面访问的变量a,其实都是访问的全局变量a,a = 20 又相当于给全局变量a重新赋值20 函数声明提升 通过function声明的函数,...当前函数声明和变量声明使用同一个变量名称时,函数的优先级高于变量的优先级 console.log(zxx) // 会输出zxx定义的函数 function zxx () {

    1.5K30

    浅谈javascript中的回调函数javascript中的函数匿名函数回调函数回调函数的使用回调函数实例总结

    要理解javascript中的回调函数,首先我们就要对javascript中的函数有一定的理解,所以我们先从javascript中函数谈起,讲讲它与其他语言中的函数有什么不同。...---- javascript中的函数 在javascript中,函数也是一种data,一种数据,只不过这种数据比较特殊,它里面存的是代码,而且这种data可以被调用执行。...函数小结 现在我们javascript中的函数有以下特点: 函数也是一种data,一种数据 函数这种特殊的数据所包含的是代码 它们可以被调用执行 匿名函数 正如前文所提的, var f = function...可以和非匿名函数对比一下 function f() { return 1; } 匿名函数有种特殊的用法就是,跟其他数据data一样作为参数传递给其他函数,因为我们已经知道函数在javascript...var myarr = mutiplyByTwo(1, 2, 3, addOne); myarr 总结 我们从javascript中的函数讲起,讲了函数在javascript中和数据一样,可以赋值,删除

    2.8K20

    javascript事件监听中传递匿名函数(嵌套定义的命名函数)与命名函数的区别

    https://blog.csdn.net/wkyseo/article/details/51352229 项目中有个需求,事件第一次执行(立即执行)与后几次执行不同,但是直接传递定义好的命名函数...如果通过匿名函数内再嵌套具名函数,结果就能返回正确!...(window); 这段代码第一次打印1,之后点击打印2 此处需要理解概念:对象的引用类型和函数的闭包 解读 对象按照引用传递。...第一个fn指向匿名函数(对象),然后添加事件指向的是匿名函数(对象),你改写fn并不会改写该匿名函数(对象);第二个事件是匿名函数,里面调用fn指向的函数(形成闭包,取最后赋值的fn)。...Object{c:3},因为a, c指向同一对象,引用传递不是复制,这个例子中的b就好比fn 后记 项目中刚开始想实现此功能的时候用的是第一种方法,但是未能实现,经同事指点,需要嵌套一个匿名函数,形成闭包

    1.2K40

    由javascript中匿名函数调用写法引出的一些东东

    ,因此最终this.barbar其实就是foo.barbar,所以会弹出"undefined",如果把foo中的注释行去掉注释,就更能映证这一点 这是最近网上热传的"javascript令人费解的10件事..."中的一段代码,我在注释中加了自己的理解,再回到文中的代码,代码的本意是想让Person类动态添加对所有的属性的getXXX与setXXX方法(通过匿名函数的自动调用),而匿名函数在执行时getXXX与...为了解决这个问题,不得不在匿名函数中增加了一个参数context,并且在调用时用(function(...){}(this));把Person的上下文this传入到匿名函数中 4.闭包 关于闭包,不再做过多的学术解释...,并引用外层的变量i,形成闭包,造成变量i在该函数中共享(可以理解为三个li的onclick函数中都引用同一个变量i),而i在循环结束后,变成4,因此所有li最终点击都是弹出4 解决办法: <script...i; li.onclick = function(){ alert(this.i); } } 再回到文中的代码,同样匿名函数引用外层的变量p,形成闭包,如果不用var

    1.1K60

    JavaScript调试和优化,深入研究谷歌Chrome浏览器开发工具(一)

    这比直接在控制台中编写多行JavaScript代码要好。 您可以从源代码面板访问snippet工具。...存储为全局变量功能 如果把代码将对象记录到控制台,您可能希望从控制台引用这些变量,以便检查它们的值。不需要搜索控制台,控制台有一些内置的方法可以引用这些对象。...您可以使用$_,它引用控制台中返回的最后一个对象。 另一种方法是使用Store作为全局变量(右键单击菜单选项),将登录到控制台或从函数返回的任何对象转换为全局变量。新创建的全局变量将被称为temp1。...您可以传递字符串和其他类型的JavaScript变量(由逗号分隔),它们将把它们连接到一个字符串中,并用空格代替逗号。...您可以使用JavaScript分析器面板来查找创建的概要文件,它允许您查看函数在每次运行中执行的时间。 ?

    86850

    由浅入深学习JavaScript Debug技巧

    控制台(Console) 在使用JavaScript做开发的时候,控制台非常有用。...当使用C, C++, Java开发的时候,我们可以使用终端(terminal)来debug,控制台拥有和终端相似的功能。 错误 控制台显示JavaScript错误。 ?...; i++) { arr[i] = arr[i] * 2; } arr; 控制台本身也提供了很多有用的函数,详情参考api文档(https://developer.chrome.com/devtools...我发现对于复杂的JavaScript代码,特别是自己编写的代码和其它库有交互的时候,特别有用。 你可以再代码中通过调用debugger来开启debug。...如果你想知道makeItColor函数具体如何执行,点击进入按钮(第三个),就会跳入函数内部。如果你想跳出来,那么点击第跳出按钮(第四个)。 ? 如果想查看变量的值,可以选中并把鼠标放在上面: ?

    1.3K90

    急速 debug 实战一(浏览器-基础篇)

    DevTools 可提供许多用于检查变量值的工具。 方法 1:Scope 窗格 在某代码行暂停时,Scope 窗格会显示当前定义的局部和全局变量,以及各变量值。 其中还会显示闭包变量(如果适用)。...顾名思义,监视表达式不仅限于监视变量。 您可以将任何有效的 JavaScript 表达式存储在监视表达式中。 立即尝试: 点击 Watch 标签。 点击 Add Expression 添加表达式。...方法 3:控制台 除了查看 console.log() 消息以外,您还可以使用控制台对任意 JavaScript 语句求值。 对于调试,您可以使用控制台测试错误的潜在解决方法。...您可以将 debug() 插入您的代码(如 console.log() 语句),也可以从 DevTools 控制台中进行调用。debug() 相当于在第一行函数中设置代码行断点。...如果是从 DevTools 控制台中调用 debug(),则很难确保目标函数在范围内。 下面介绍一个策略: 在函数在范围内时设置代码行断点。 触发此断点。

    3.3K10

    使用 Chrome DevTools 调试 JavaScript

    步骤 2:用断点暂停代码 DevTools 允许您在执行过程中暂停代码,并在此时检查所有变量的值。暂停代码的工具称为断点。...如果您查看 get-started.js 中的代码,您可以看到该错误可能在 updateLabel() 函数中的某个位置。...“sum” 的值看起来很可疑。它似乎被当做一个字符串,它应该是一个数字。这可能是错误的原因。 步骤 5:检查变量值 错误的另一个常见原因是当变量或函数产生与预期不同的值。...console.log() 的另一个替代方法是控制台。可以使用控制台来评估任意的 JavaScript 语句。开发人员通常使用控制台在调试时覆盖变量值。...您可以直接在 DevTools UI 中编辑 JavaScript 代码。

    1.8K10

    匿名函数自调用_自己调用自己的函数叫

    在js中,表达式会被立即执行,也就是说,不管是引入的外部js文件还是嵌入在html文件中的js脚本,其中的表达式都会被立即执行。 函数名是一个指向函数的指针。...在JavaScript中,定义函数有常见的两种形式:函数声明和函数直接量(或者叫函数表达式)。 函数声明:采用function定义声明函数的标准写法,包括function,函数名,函数体。...如 function sum(x,y){ alert(x+y); } 函数表达式:定义一个匿名函数,并赋值给一个变量。...关于函数声明,它最重要的一个特征就是函数声明提升,意思是执行代码之前先读取函数声明。这意味着可以把函数声明放在调用它的语句之后。...当我们给匿名函数外面加上一层()的时候,匿名函数就变成了函数表达式,在JavaScript编译的时候就会被立即执行。

    2.5K20

    2024年必备:每个前端开发者都应掌握的Chrome开发工具调试技巧

    在Chrome中,profile 和 profileEnd 函数分别用于启动和停止DevTools的性能分析器。...每个Web开发者都熟悉 Object.keys 和 Object.values 方法,这些方法帮助我们从JavaScript对象中提取键和值。...断点帮助你调试JavaScript代码,而DOM检查则助你分析HTML并改进基于CSS的样式。设置断点可以通过DevTools界面或者 debugger JavaScript语句来完成。...虽然DevTools提供了多种检测浏览器事件的方法,比如设置事件断点和查看绑定在window对象上的全局事件,但如果你想直接从控制台检测和浏览Web应用事件,应该怎么做呢?...对于初学者来说,掌握如何在控制台中处理事件将是提升他们Web开发技能的关键步骤。 $_ 变量 Chrome控制台中的快捷变量和函数是调试网页应用时的强大工具。

    57110

    如何使用谷歌浏览器 Chrome 更好地调试

    每个小组的职责的简要总结: Elements:在这里可以检查和编辑 DOM 节点和样式属性。 Console:可以通过控制台查看和运行 JavaScript 代码。...想象一下,你正试图在你的 chrome 控制台中预览或读取此返回的数据,以找出在你的应用程序中不起作用的内容。该console.log()函数通常将其显示为难以阅读或分类的文本输出。...Chrome 允许你直接从控制台执行此操作,而无需使用 debug() 函数访问你的源代码。只需在控制台中调用它并将函数的名称传递给它,它就会自动将调试器注入到函数中,让你可以单步调试代码。...在控制台中调用debug(functionReference)会增加一个调试器;引用函数声明的第一行上的语句。 DevTools 还提供断点,让你逐行执行代码。...但是,这会导致你进行大量重复输入或不断地从你最喜欢的代码编辑器复制并粘贴到你的 Chrome 浏览器控制台。

    3.7K30

    JavaScript Errors 指南

    为匿名函数取名 默认情况下,匿名函数没有名字,同时在追溯栈中要么表现为空字符串要么就是Anonymous function(根据不同浏览器会有区别)。...最简单的方法就是在所有的匿名函数前面加一个函数名,甚至该函数名不会在其他任何场合使用到。...(http://mknichel.github.io/javascript-errors/javascript-errors.js:121:31) 上面给匿名函数添加姓名的方法可以保证函数名出现在追溯栈中...http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/ 将函数赋值给一个变量 浏览器通常也会使用匿名函数赋值给的变量作为函数名...,并且这个函数定义在另外一个函数内,几乎所有的浏览器都会使用被赋值的变量作为追溯帧中的函数名,但是,Firefox有所不同,在Firefox中,会使用外面的函数名加上内部的函数名(变量名)作为追溯帧中的函数名

    2K20

    Chrome DevTools 一些隐藏技巧

    按照表格打印数组 当用 JavaScript 处理大量数据时(例如创建数据可视化),从来都不是一次就能成功的,你将不可避免地去 web 控制台查看数据,一般我们熟悉的是用 console.log 命令。...在这个调色板中,你可以找到所有的快捷键、面板、控制台设置、标签、设置等。 ?...如果你想知道如何从浅色模式改为深色模式,那么可以导航到 DevTools 的右上角--点击3个竖点图标,接下来选择更多工具,然后选择设置,在设置菜单中选择首选项,最后将主题设置为暗色即可。 ?...条件断点 一般来说,使用 IDE 调试浏览器中运行的 JavaScript 是相当困难烦人的,所以,与其使用 IDE,不如直接使用 DevTools 调试器。...当你在四处寻找暂停执行过程中的错误时,你也可以考虑将可疑的变量添加到 Watch 选项卡中,这样你就可以在值变化时关注它们。要将变量添加到 Watch 中,你可以执行以下操作。 ?

    2K31
    领券