arguments小结

Posted 2020-06-18

函数的属性有name,caller,length.除此之外让人耐人寻味的就是创建出来的一个隐藏对象arguments。arguments 它存储了函数在调用时候实际传入的参数，它是一个‘像数组一样的对象’称之为伪数组，可以将其当作数组来用，因为他的引用和访问方式与数组一样（但它不是数组哦）！

console.log(arguments instanceof Array);     //false

这里来引入一个arguments的使用，鉴于初步了解。

如果用户传入的时函数那么就调用，如果是字符串就打印：

function Foo(){
    for(var i=0; i<arguments.length; i++){   //循环遍历每一个传入的实参
        if(typeof arguments[i]===‘function‘ ){  //判断是否是函数
            arguments[i]();
        }else if(typeof arguments[i]===‘string‘){
            console.log(arguments[i]);
        }else{
            console.log(‘您输入的不是函数也不是字符类型~~~‘);
        }
    }
}
Foo(function(){
    console.log(‘函数‘);
});                              //函数
Foo(‘字符串‘);                   //字符串
Foo(1);                           //您输入的不是函数也不是字符类型~~~  

以上代码，调用时候传入得如果是函数那么则调用执行，如果是字符串那么则打印字符串内容，若非这两种类型，那么给出提示；

分析完上个案例，这里在引入一个，我认为比较经典的arguments案例。

1,写一个函数 J, 要求如果函数接收一个参数, 如果该参数是函数, 则将其加载到 onload 上;
2,如果传递的是 一个字符串. 如果字符串是 # 开头, 那么获得页面中 id 等于该字符串的元素;
3,如果该字符串是以. 开头, 则获得页面中 class 属性为该字符串的元素(数组)
4,如果仅仅是一个名字字符串, 则返回标签名字为该字符串的元素

function J(){
            var a = arguments;
            if(typeof a[0]===‘function‘){
                window.onload = a[0];
            }else if(typeof a[0]===‘string‘){
                var firstChar = a[0].charAt(0);//获取实参的第一个元素的第一个字节
                if(firstChar===‘#‘){
                    return document.getElementById(a[0].substr(1));//返回获取到的dom节点（substr属性是截取字符串用法）
                }else if(firstChar===‘.‘){
                    //
                }else{
                    return document.getElementsByTagName(a[0]);
                }
            }
        }
    //给dom设置样式的封装
        function addStyle(nodes,styles){
            for(var k in styles){
                for(var i =0; i<nodes.length;i++){
　　　　　　　　　nodes[i].style[k] = styles[k];
                }
            }
        }

　　J(function () {
    　　addStyle(J("div"),{
       　　 width:‘500px‘,
       　　 height:‘300px‘,
       　　 border:‘5px solid red‘})
　　});

在获取类名有兼容性问题，解决方案，下次补上。