深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域

匿名函数：没有实际名字的函数。

匿名函数的作用：

1、通过匿名函数可以实现闭包，关于闭包在后面的文章中会重点讲解。在这里简单介绍一下：闭包是可以访问在函数作用域内定义的变量的函数。若要创建一个闭包，往往都需要用到匿名函数。
2、模拟块级作用域，减少全局变量。执行完匿名函数，存储在内存中相对应的变量会被销毁，从而节省内存。再者，在大型多人开发的项目中，使用块级作用域，会大大降低命名冲突的问题，从而避免产生灾难性的后果。自此开发者再也不必担心搞乱全局作用域了。

本章节重点给大家介绍JavaScript 中的匿名函数((function() {})();)与变量的作用域，具体内容如下所示：

以前都是直接用前端框架Bootstrap，突然想看看Javascript，发现javascript是个非常有趣的东西，这里把刚碰到的一个小问题的理解做下笔录（废话不多说，上代码）。

/**
 * Example 1
 */
var localvar = "local var";
console.log(localvar);//local var
/**
 * Example 2
 */
console.log(x === undefined); // true
var x = 3;
/**
 * Example 3
 */
var myvar = "my value";
//Test01
//will return a value of undefined
(function() {
 console.log(myvar); // undefined
 var myvar = "local value";
 console.log(myvar); // local value
})();
console.log(myvar);//my value
//Test02
(function myFunction(){
 console.log(myvar);//my value
})();
//Test03
var test = new function(){
 console.log(myvar);//my value
};

解释如下：

(1).JavaScript 变量的特别之处是，你可以引用稍后声明的变量而不会引发异常。这一概念称为变量声明提升(hoisting)；

(2).JavaScript 变量感觉上是被“提升”或移到了函数或语句的顶部。然而提升后的变量将返回 undefined 值。

(3).在使用或引用某个变量之后进行声明和初始化操作，这个被提升的引用仍将得到 undefined 值。

(4).这里Example 3中Test01是这次问题的关键，Test01和Test02是很相似的(至少我看着很相似)。但是最后输出结果不能用（1）、（2）、（3）来解释

　　经过查看官方API文档发现，在匿名函数(function() {})();的使用中形成了闭包（重点，不清楚的可以查阅闭包的概念，闭包概念还是好理解的）；

　　由于闭包的存在，全局变量自然无法访问（闭包的一个重要原因就是为了避免访问全局变量），故Test01 function中第一句输出结果为undefined。

总结原因：匿名函数(function() {})();是一个特殊的闭包写法。

总结

以上所述是小编给大家介绍的JavaScript 中的匿名函数((function() {})();)与变量的作用域，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JavaScript 匿名函数（anonymous function）与闭包（closure）

    引入 匿名函数 闭包 变量作用域 函数外部访问函数内部的局部变量 用闭包实现私有成员 引入 闭包是用匿名函数来实现.闭包就是一个受到保护的变量空间,由内嵌函数生成."保护变量"的思想在几乎所有的编程语言中都能看到. 先看下 JavaScript 作用域: JavaScript 具有函数级的作用域.这意味着,不能在函数外部访问定义在函数内部的变量. JavaScript 的作用域又是词法性质的(lexically scoped).这意味着,函数运行在定义它的作用域中,而不是在调用它的作用

  • 深入理解JS中的Function.prototype.bind()方法

    深入理解JS中的Function.prototype.bind()方法

    前言 对于函数绑定(Function binding)很有可能是大家在使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其实就是 Function.prototype.bind() ,只是你有可能仍然没有意识到这点. 第一次遇到这个问题的时候,你可能倾向于将this设置到一个变量上,这样你可以在改变了上下文之后继续引用到它. 一. bind的语法 bind() 方法的主要作用就是将函数绑定至某个对象,bind(

  • Javascript自执行匿名函数(function() { })()的原理浅析

    函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数指没有指定函数名或指针的函数,自执行匿名函数只是其中一种,下文中称这种函数为:自执行函数 下面是一个最常见的自执行函数: // 传统匿名函数 (function() { alert('hello'); })(); 这段代码的执行效果就是在页面再载入时弹出:"hello" 是什么促使它自动执行的?,来看下面的代码 // 在传统写法上去掉小括号,并在前面加上运算符 ~,!,+,- ~function(){

  • 浅析JS中对函数function的理解(基础篇)

    正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念: var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐 Function的构造函数可以接收任意数量的参

  • 深入浅析JS Function()构造函数

    js中function对象是一个令人着迷的东西,但由于他太过于灵活,常常令人迷惑. 先给大家看个代码片段. var scope="global"; function constructFunction(){ var scope="local"; return new Function(" return scope"); } constructFunction()(); function constructFunction2(){ var scop

  • 深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域

    匿名函数:没有实际名字的函数. 匿名函数的作用: 1.通过匿名函数可以实现闭包,关于闭包在后面的文章中会重点讲解.在这里简单介绍一下:闭包是可以访问在函数作用域内定义的变量的函数.若要创建一个闭包,往往都需要用到匿名函数. 2.模拟块级作用域,减少全局变量.执行完匿名函数,存储在内存中相对应的变量会被销毁,从而节省内存.再者,在大型多人开发的项目中,使用块级作用域,会大大降低命名冲突的问题,从而避免产生灾难性的后果.自此开发者再也不必担心搞乱全局作用域了. 本章节重点给大家介绍JavaScrip

  • 理解javascript中的回调函数(callback)

    最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: 复制代码 代码如下: app.use(function(req, res, next) {     var err = new Error('Not Found');     err.status = 404;     next(err); }); app是对象,use是方法,方法的参数是一个带参的匿名函数,函数体直接在后面给出了.这段代码

  • Javascript中的匿名函数与封装介绍

    迷惑了一会儿不同JS库的封装后,终于有了点头绪.大致就是: 复制代码 代码如下: 创建一个自调用匿名函数,设计参数window,并传入window对象. 而这个过程的目的则是, 复制代码 代码如下: 使得自身的代码不会被其他代码污染,同时也可以不污染其他代码. jQuery 封装 于是找了个早期版本的jQuery,版本号是1.7.1里面的封装代码大致是下面这样的 复制代码 代码如下: (function( window, undefined ) { var jQuery = (function(

  • 深入理解JavaScript中的箭头函数

    从一开始箭头就是 JavaScript 的一部分,在第一个 JavaScript 中就建议将内联的脚本代码包裹在 HTML 的注释中,这可以防止那些不支持 JavaScript 的浏览器错误滴将你的代码显示为明文.你也许写过下面这样的代码: <script language="javascript"> <!-- document.bgColor = "brown"; // red // --> </script> <scri

  • 深入理解javascript中的立即执行函数(function(){…})()

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( function(){-} )()和( function (){-} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此.要理解立即执行函数,需要先理解一些函数的基本概念.

  • 深入理解Javascript中的自执行匿名函数

    格式: (function(){ //代码 })(); 解释:这是相当优雅的代码(如果你首次看见可能会一头雾水:)),包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数. 来个带参数的例子: (function(arg){ alert(arg+100); })(20); // 这个例子返回120. 回来看看jquery的插件编写 (function($) { // Code goes here })(jQuery

  • AJAX入门之深入理解JavaScript中的函数

    概述 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解.JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递.在继续讲述之前,先看一下函数的使用语法: function func1(-){-}var func2=function(-){-};var func3=function func4(-){-};var func5=new Function()

  • 理解 javascript 中的函数表达式与函数声明

    理解 javascript 中的函数表达式与函数声明

    常用闭包的同学肯定很清楚下面一段代码: //通常的闭包写法 (function () { ... }()) 那么我们的问题来了,为什么要在 function () {...}() 之外用圆括号包裹呢?解答这个问题,就需要我们理解 Javascript 中函数表达式与函数声明的概念. 函数定义带来的错误 虽然 function () {...} 看上去像是一个函数声明,但是由于没有函数名,它的本质其实是一个函数表达式.我们看下规范中对于函数声明与函数表达式的定义: 可以看出来,函数声明是必须带有函

  • 理解与使用JavaScript中的回调函数

    概述 在JavaScript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被"存储"在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因为函数是第一类对象,我们可以在JavaScript使用回调函数.在下面的文章中,我们将学到关于回调函数的方方面面.回调函数可能是在JavaScript中使用最多的函数式编程技巧,虽然在字面上看起来它们一直一小段JavaScript或者jQuery代码,但是对于许多开发者来说它任然是一

随机推荐