写在前面
知识点:
- 函数底层运行机制
- arguments
- 箭头函数
2.1.12 函数底层运行机制
- 创建函数,开辟堆内存中存储的是函数体中的代码,但按字符串存储
- 函数返回值只看return,没有就是undefined
- 每一次函数执行的目的都是把函数体代码(从字符串变成代码)执行=>形参一个新的私有栈内存
解决选项卡i问题
var navBox = document.getElementById('navBox'); var navBoxList = navBox.getElementsByTagName('div'); var newBox = document.getElementById('newBox'); var newBoxList=newBox.getElementsByTagName('li'); for(var i=0;i<newBoxList.length;i++){ //解决方法一:自定义索引 //每次循环给每个Li绑定自定义属性myIndex,属性存储当前Li索引 newBoxList[i].myIndex=i; newBoxList[i].onclick=function(i){ //this是当前点击元素 return function(){ changeTab(this.myIndex); } }; } /* 解决方法二:闭包解决法 newBoxList[i].onclick=function(i){ //this是当前点击元素 return function(){ changeTab(i); } }(i); */ // 解决方法三:ES6 let解决方案 /* 只要JS代码加载完成才能看到页面,只有看到用户页面用户才能点击 加载到循环代码 i=0 newBoxList[i].onclick=function(){ changeTab(i); };方法没有执行,点击第一个Li才执行 i++一直重复到i=3 循环结束看到页面,用户去点击了某一个选项卡,接下来开始执行绑定方法,方法中遇到一个i,但此时I已经循环结束3 */ function changeTab(Index){ for(var i=0;i<newBoxList.length;i++){ newBoxList[i].className=''; navBoxList[i].className=''; } newBoxList[Index].className='active'; navBoxList[Index].className='active'; }
2.1.13 arguments 函数内置实参集合
任意数求和(执行函数,传递N个值实现求和)
arguments:
- 类数组集合对象,集合中存储所有函数执行时,传递实参信息
- 不了是否设置形参,arguments都存在
- 不论是否设置形参,arguments都存在
- argumts.callee存储当前函数本身(不使用)
function sum(){ let total=null; for (let i=0;i<arguments.length;i++){ let item=arguments[i]; total +=item; } return total; } let total=sum(10,20,30); console.log(total); =>60
2.1.14 箭头函数
特点:简单
注意:箭头函数没有arguments
function sum(n,m){ return n+m; } let sum = (n,m) => {return n+m;} //如果函数体只有一行return可以省略return和大括号 let sum=(n,m)=>n+m; console.log(sum(10,20));
function fn(n){ return function(m){ return n+m; } } let fn = n => m => n+m;
//形参赋值默认值 function sum(n,m){ if(typeof n === undefined){ n=0; } if(typeof m === undefined){ m=0; } return n+m; } let sum=(n=0,m=0)=>n+m;
用剩余运算符获取到传递的实参集合(它是数组)
let sum =(...arg)=>{ console.log(arg); } sum(1,2,3); let sum =(...arg)=>eval)(arg.join('+')); sum(1,2,3);