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

 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. 关于locals()、globals()以及作用域的一些感悟

    示例代码 i=6def foo(): print locals() print globals() i=66 print locals() print globals()class demo: i=6 ...

  2. 禅道SQA

    背景 近期以项目质量和测试管理的角色介入了一个大型的项目中间,项目的业务测试方面重点在节点把控和风险跟进. 以往进行测试进度展示是通过bug解决进度及整体走势图来进行体现,这块手工作图太过麻烦,干脆整 ...

  3. 计算幂 51Nod 1046 A^B Mod C

    给出3个正整数A B C,求A^B Mod C.   例如,3 5 8,3^5 Mod 8 = 3. Input 3个正整数A B C,中间用空格分隔.(1 <= A,B,C <= 10^ ...

  4. java.net.UnknownHostException 异常解决方案

    1)使用hostname命令设置新的host name与/etc/hosts本机hostname一致 #hostname 本机hostname 具体可以查看:/etc/hosts和//etc/sysc ...

  5. 设计模式--单例模式(Singleton pattern)及应用

    单例模式 参考文档: 该文仅介绍spring的单例模式:spring 的单例模式 介绍原理:Spring的单例模式底层实现 参考书籍:漫谈设计模式:从面向对象开始-刘济华.pdf 1. 单例模式解析 ...

  6. UVA - 1639 -Candy

    题目链接:https://vjudge.net/problem/UVA-1639 题目大意: 有两个糖果盒,每个盒子里面有n个糖果,每天随机选一个(概率分别为p,1-p),然后吃一颗糖.直到有一天,打 ...

  7. OP查阅网站

    1)http://www.zhdba.com/mysqlops/ 2)

  8. ueditor编辑器使用总结

    ueditor使用小结 一.简介 ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.ba ...

  9. 浅谈js分页的几种方法

    一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页 更深入的去理解分页的意 ...

  10. JSP和El表达式和JSTL标签库使用

    核心标签库: <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...