1.13 JavaScript4:函数和闭包
栏目: JavaScript · 发布时间: 5年前
内容简介:函数就是重复执行的代码片。JavaScript解析过程分为两个阶段,先是编译阶段,然后执行阶段,在编译阶段会将function定义的函数提前,并且将var定义的变量声明提前,将它赋值为undefined。在html行间调用的事件可以提取到javascript中调用,从而做到结构与行为分离。
函数
函数就是重复执行的代码片。
函数定义与执行
<script type="text/javascript"> // 函数定义 function aa(){ alert('hello!'); } // 函数执行 aa(); </script>
变量与函数预解析
JavaScript解析过程分为两个阶段,先是编译阶段,然后执行阶段,在编译阶段会将function定义的函数提前,并且将var定义的变量声明提前,将它赋值为undefined。
<script type="text/javascript"> aa(); // 弹出 hello! alert(bb); // 弹出 undefined function aa(){ alert('hello!'); } var bb = 123; </script>
提取行间事件
在html行间调用的事件可以提取到javascript中调用,从而做到结构与行为分离。
<!--行间事件调用函数 --> <script type="text/javascript"> function myalert(){ alert('ok!'); } </script> ...... <input type="button" name="" value="弹出" onclick="myalert()"> <!-- 提取行间事件 --> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn1'); oBtn.onclick = myalert; function myalert(){ alert('ok!'); } } </script> ...... <input type="button" name="" value="弹出" id="btn1">
匿名函数
定义的函数可以不给名称,这个叫做匿名函数,可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
<script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn1'); /* oBtn.onclick = myalert; function myalert(){ alert('ok!'); } */ // 直接将匿名函数赋值给绑定的事件 oBtn.onclick = function (){ alert('ok!'); } } </script>
函数传参
<script type="text/javascript"> function myalert(a){ alert(a); } myalert(12345); </script>
函数’return’关键字
函数中’return’关键字的作用:
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为
<script type="text/javascript"> function add(a,b){ var c = a + b; return c; alert('here!'); } var d = add(3,4); alert(d); //弹出7 </script>
封闭函数
封闭函数是javascript中匿名函数的另外一种写法,创建一个一开始就执行而不用命名的函数。
一般定义的函数和执行函数:
function changecolor(){ var oDiv = document.getElementById('div1'); oDiv.style.color = 'red'; } changecolor();
封闭函数:
(function(){ var oDiv = document.getElementById('div1'); oDiv.style.color = 'red'; })();
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function(){ var oDiv = document.getElementById('div1'); oDiv.style.color = 'red'; }()
闭包
什么是闭包
函数嵌套函数,内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制收回
function aaa(a){ var b = 5; function bbb(){ a++; b++; alert(a); alert(b); } return bbb; } var ccc = aaa(2); ccc(); ccc();
改写成封闭函数的形式:
var ccc = (function(a){ var b = 5; function bbb(){ a++; b++; alert(a); alert(b); } return bbb; })(2); ccc(); ccc();
用处
1、将一个变量长期驻扎在内存当中,可用于循环中存索引值
<script type="text/javascript"> window.onload = function(){ var aLi = document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++) { (function(i){ aLi[i].onclick = function(){ alert(i); } })(i); } } </script> ...... <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul>
2、私有变量计数器,外部无法访问,避免全局变量的污染
<script type="text/javascript"> var count = (function(){ var a = 0; function add(){ a++; return a; } return add; })() count(); count(); var nowcount = count(); alert(nowcount); </script>
-
学院 Go 语言视频主页
https://edu.csdn.net/lecturer/1928 -
扫码获取海量视频及源码 QQ群:721929980
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
人人都是产品经理
苏杰 / 电子工业出版社 / 2012-6 / 45.00元
本书为《人人都是产品经理》的升级版,是写给“1到3岁的产品经理”的书,适合刚入门的产品经理、产品规划师、需求分析师,以及对做产品感兴趣的学生,用户体验、市场运营、技术部门的朋友们,特别是互联网、软件行业。作为一名“4岁的产品经理”,作者讲述了过去3年的经历与体会,与前辈们的书不同,本书就像你走到作者身边,说“嗨,哥们!晚上有空吃个饭吗,随便聊聊做产品的事吧”,然后作者说“好啊”。 书名叫“......一起来看看 《人人都是产品经理》 这本书的介绍吧!