写在前面

知识点:

  • 函数底层运行机制
  • 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:

  1. 类数组集合对象,集合中存储所有函数执行时,传递实参信息
  2. 不了是否设置形参,arguments都存在
  3. 不论是否设置形参,arguments都存在
  4. 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);