js中匿名函数
今天碰到一道题,里面既包含了匿名函数的知识,也包含了预编译,函数的传参(形参),感觉迷迷糊糊的,所以想着做个总结。
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中匿名函数的更多相关文章
- JS中匿名函数$(function(){ })和(function(){})()的区别
“$(function(){ });” Jquery语法的匿名函数,用于存放操作DOM对象的代码,执行其中代码时DOM对象已存在: (通过这样就可以在页面加载完成时通过ajax再异步加载一些数据) “ ...
- 总结下js中匿名函数的写法~好几天没写博客了。。。
小哥最近很是心烦啊,不仅仅要继续以现任前端小白,未来前端攻城狮的身份苦逼学习,还要用剩余的时间去完成毕业设计.早知如此,当初我为毛要报考数学这么个苦逼专业....昨天一整天的时间在研究毕设,感觉代码已 ...
- js中匿名函数和回调函数
匿名函数: 通过这种方式定义的函数:(没有名字的函数) 作用:当它不被赋值给变量单独使用的时候 1.将匿名函数作为参数传递给其他函数 2.定义某个匿名函数来执行某些一次性任务 var f = func ...
- js中匿名函数的N种写法
匿名函数没有实际名字,也没有指针,怎么执行? 关于匿名函数写法,很发散~ +号是让函数声明转换为函数表达式.汇总一下 最常见的用法: 代码如下: (function() { alert('water ...
- js中的函数,Date对象,Math对象和数组对象
函数就是完成某个功能的一组语句,js中的函数由关键字 function + 函数名 + 一组参数定义;函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织结构更多清晰. ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- node.js 中回调函数callback(转载),说的很清楚,看一遍就理解了
最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: 复制代码 代码如下: app.use(fu ...
- JS中的函数、BOM和DOM操作
一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */ // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1) ...
- html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结
Day27 html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...
随机推荐
- Java工程师的终极书单
本份Java工程师的终极书单只在专业的Java技术博客–天天编码上发布,没有授权任何网站与个人转载. 坚持阅读好书是学习Java技术的好方式.但是,市面上与Java技术相关的书籍可谓数不胜数,如何从这 ...
- Vue.js之深入浅出
介绍引言 Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上 ...
- npm介绍与cnpm介绍
npm介绍 说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等) 使用npm安装插件:命令提示符执行npm instal ...
- python函数(3):装饰器
昨天学了很多函数方面的概念和知识其中有一个闭包的函数.很多人都对闭包的作用不是很清楚,今天我们就来认识一个新的知识点装饰器.它就是闭包函数的一个经典应用. 预习: 编写装饰器,为多个函数加上认证的功能 ...
- PHP通过phpmailer批量发送邮件功能
前端页面代码: 注意:目前发送人使用的qq邮箱支持的不是特别友好.建议使用网易 新浪 163等其他邮箱. 需要用到phpmailer包 下载地址:https://sourceforge.net/pro ...
- PHPsthdy+xdebug
PHPsthdy下载后查看phpinfo后会发现没有xdebug这一项: 1.phpStudy集成了XDebug扩展,所以不用单独下载XDebug. 2.打开XDebug扩展:右击PHPstudy的图 ...
- vue.js移动端app实战2:首页
貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects, 简 ...
- setInterval()的时间参数无法随参数的变化而变化
2017-04-18 写了个随机抽奖的小案例,打算随机跳动十次,每次变化的时间越来越长,也就是跳动的速度越来越慢,结果发现setInterval的时间参数并不会随着变化. <!--案例的结构如下 ...
- ASP.NET Core MVC Tag Helpers 介绍
简介 Tag Helpers 提供了在视图中更改和增强现有HTML元素的功能.将它们添加到视图中,会经过Razor模板引擎处理并创建一个HTML,之后再返回给浏览器.有一些Tag Helpers,其实 ...
- 关于Web.config的debug和release.config文件
使用Web.Config Transformation配置灵活的配置文件 发布Asp.net程序的时候,开发环境和发布环境的Web.Config往往不同,比如connectionstring等.如果常 ...