写在前面
知识点:
- 函数底层运行机制
- 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); 
京公网安备 11010502036488号