今天碰到一道题,里面既包含了匿名函数的知识,也包含了预编译,函数的传参(形参),感觉迷迷糊糊的,所以想着做个总结。

 var foo={n:1};
(function(foo){
console.log(foo.n);
foo.n=3;
var foo={n:2};
console.log(foo.n);
})(foo);
console.log(foo.n);

上面的代码,可以写成这样,看解释

 var foo={n:1};
(function(foo){ //此时形参和实参指向相同的内存空间,且空间的值n为1
var foo; //变量的提升,一个变量的声明优先级低于形参,so这行相当于无效
console.log(foo.n); //这里应当输出1
foo.n=3; //形参和实参的指向的内存空间发生了改变,值现在变为3
var foo={n:2}; //这行很关键,开辟了新的内存空间,n的值为2
console.log(foo.n); //由于js中的代码是自上而下执行,所以此时输出2
})(foo);
console.log(foo.n); //之前的内存空间值为3,所以输出3
结果输出 1 2 3

按照上面的思路,如果第五行和第六行换一下呢

 var foo={n:1};
(function(foo){ //此时形参和实参指向相同的内存空间,且空间的值n为1
var foo; //变量的提升,一个变量的声明优先级低于形参,so这行相当于无效
console.log(foo.n); //这里应当输出1
var foo={n:2}; //这行很关键,开辟了新的内存空间和之前的已经断开联系,n的值为2
foo.n=3; //改变了新的内存空间里面的值,值现在变为3
console.log(foo.n); //由于js中的代码是自上而下执行,所以此时输出3
})(foo);
console.log(foo.n); //之前的内存空间值为1,所以输出1
结果输出 1 3 1

ok   那接下来这个呢

  var foo={n:1};
(function(foo){ //此时形参和实参指向相同的内存空间,且空间的值n为1
var foo; //变量的提升,一个变量的声明优先级低于形参,so这行相当于无效
console.log(foo.n); //这里应当输出1
foo.n=3; //形参和实参的指向的内存空间发生了改变,值现在变为3
foo.n=2 //并没有开辟了新的内存空间,在原来的基础上修改的,n的值为2
console.log(foo.n); //由于js中的代码是自上而下执行,所以此时输出2
})(foo);
console.log(foo.n); //原始的的内存空间值经过修改变为2,所以输出2
结果输出 1 2 2

下面和上面一样了

 var foo={n:1};
(function(foo){ //此时形参和实参指向相同的内存空间,且空间的值n为1
var foo; //变量的提升,一个变量的声明优先级低于形参,so这行相当于无效
console.log(foo.n); //这里应当输出1
foo.n=2; //形参和实参的指向的内存空间发生了改变,值现在变为2
foo.n=3; //并没有开辟了新的内存空间,在原来的基础上修改的,n的值为3
console.log(foo.n); //由于js中的代码是自上而下执行,所以此时输出3
})(foo);
console.log(foo.n); //原始的内存空间的值经过修改变为3,所以输出3
结果输出 1 3 3

那下面这个呢(第五行和第六行都改变了指向,由于并不是在原来的基础上修改的,所以最后输入的值不变)

    var foo={n:1};
(function(foo){ //此时形参和实参指向相同的内存空间,且空间的值n为1
var foo; //变量的提升,一个变量的声明优先级低于形参,so这行相当于无效
console.log(foo.n); //这里应当输出1
var foo={n:2}; //开辟了新的内存空间,n的值为2
var foo={n:3}; //开辟了新的内存空间,n的值为3
console.log(foo.n); //由于js中的代码是自上而下执行,所以此时输出3
})(foo);
console.log(foo.n); //原始的内存空间的值为1,并没被有被修改,所以输出1
结果输出 1 3 1

这个就和上面的一样了

    var foo={n:1};
(function(foo){ //此时形参和实参指向相同的内存空间,且空间的值n为1
var foo; //变量的提升,一个变量的声明优先级低于形参,so这行相当于无效
console.log(foo.n); //这里应当输出1
var foo={n:3}; //开辟了新的内存空间,n的值为3
var foo={n:2}; //开辟了新的内存空间,n的值为2
console.log(foo.n); //由于js中的代码是自上而下执行,所以此时输出2
})(foo);
console.log(foo.n); //原始的内存空间并未被修改,所以输出1
结果输出 1 2 1

以上为小弟解读,如果过错还请大神指教。

js中匿名函数的更多相关文章

  1. JS中匿名函数$(function(){ })和(function(){})()的区别

    “$(function(){ });” Jquery语法的匿名函数,用于存放操作DOM对象的代码,执行其中代码时DOM对象已存在: (通过这样就可以在页面加载完成时通过ajax再异步加载一些数据) “ ...

  2. 总结下js中匿名函数的写法~好几天没写博客了。。。

    小哥最近很是心烦啊,不仅仅要继续以现任前端小白,未来前端攻城狮的身份苦逼学习,还要用剩余的时间去完成毕业设计.早知如此,当初我为毛要报考数学这么个苦逼专业....昨天一整天的时间在研究毕设,感觉代码已 ...

  3. js中匿名函数和回调函数

    匿名函数: 通过这种方式定义的函数:(没有名字的函数) 作用:当它不被赋值给变量单独使用的时候 1.将匿名函数作为参数传递给其他函数 2.定义某个匿名函数来执行某些一次性任务 var f = func ...

  4. js中匿名函数的N种写法

    匿名函数没有实际名字,也没有指针,怎么执行? 关于匿名函数写法,很发散~ +号是让函数声明转换为函数表达式.汇总一下 最常见的用法: 代码如下: (function() {  alert('water ...

  5. js中的函数,Date对象,Math对象和数组对象

    函数就是完成某个功能的一组语句,js中的函数由关键字 function + 函数名 + 一组参数定义;函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织结构更多清晰. ...

  6. JS中的函数、Bom、DOM及JS事件

    本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...

  7. node.js 中回调函数callback(转载),说的很清楚,看一遍就理解了

    最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: 复制代码 代码如下: app.use(fu ...

  8. JS中的函数、BOM和DOM操作

     一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */   // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1) ...

  9. html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结

    Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...

随机推荐

  1. MySQL5.7使用过程中遇到的问题

    Q1.MySQL无法启动服务,启动服务时提示:"本地计算机 上的 MySQL 服务启动后停止.某些服务在未由其他服务或程序使用时将自动停止." PS.解压缩的MySQL安装过程也可 ...

  2. 移动端em与rem区别

    rem与em都是相对单位,我们使用它们的目的就是为了适应各种手机屏幕. rem是根据html根节点来计算的,而em是继承父元素的字体.比如下面一个demo <!doctype html> ...

  3. C++第三篇--程序结构

    C++第三篇--程序结构 1. 初识程序结构 将类中的成员函数全部放在类外实现,类中只负责声明该函数 person.cpp #include <stdio.h> class Person{ ...

  4. Android系统--输入系统(十七)Dispatcher线程_分发dispatch

    Android系统--输入系统(十七)Dispatcher线程_分发dispatch 1. 回顾 InputRead线程从输入设备当中得到输入事件 对于读到输入事件稍作处理,比如紧急事件,来电时候按下 ...

  5. 【Spring】关于SpringMvc监听的知识点

    一,在使用Spring系列框架时,我们需要在Web.xml配置Spring的监听:ContextLoaderListener ContextLoaderListener的作用就是,在Web容器初始化时 ...

  6. swift 3.0 基础练习 面向对象 类的扩展

    要求 为NSString类添加split功能 为NSString类添加一个函数func split(splitStr: NSString)-> [NSString],split是把字符串以特定的 ...

  7. JavaScript系统学习小结——Object类型、Array类型

    今天学习JavaSript中引用变量中的Object类型和Array类型: 1. Js中大多数引用类型值都是Object类型的实例,Object类型在应用程序中存储和传输数据时,是非常理想的选择: 创 ...

  8. 使用ide编程时候 不知为何突然光标变宽,如何恢复成原有的细竖光标

    各位朋友们, 你们在编程时候有没有这样的情况: 码着码着,突然不知什么原因,光标变成这样了: 这种宽的光标,不知道怎么调都调不回去,而且网上也没有类似的问题描述 就对我们编程极其不便(因为这种光标是操 ...

  9. webpack模块解析

    前面的话 在web存在多种支持JavaScript模块化的工具(如requirejs和r.js),这些工具各有优势和限制.webpack基于从这些系统获得的经验教训,并将模块的概念应用于项目中的任何文 ...

  10. Github 开源:使用升讯威 Mapper( Sheng.Mapper)与 AutoMapper 互补,大幅提高开发效率!

    Github 地址:https://github.com/iccb1013/Sheng.Mapper 在上一篇幅中,简单介绍了 升讯威 Mapper( Sheng.Mapper)[http://www ...