js作用域

函数声明和函数表达式

1. 函数声明会提前，而函数表达式则不会，只会提前变量。
2. 函数表达式就是一条语句，就相当于，定义了一个变量，这个变量的值是一个函数。函数声明则就是一块区域。

---

变量和函数的声明前置

变量声明提前

console.log(a)  //undefined
var a=1;
console.log(a)   //1
等价于:
var a;
console.log(a)  
a=1
此时的变量a的声明会提前，但是赋值不会。

函数声明提前:函数声明的会自动的提前在代码前面，但是在变量声明的后面，同名的话会覆盖相应的变量。

sayname("hcc")   //hcc
var sayname="hello"
function sayname(name){
     console.log(name)  
}
等价于:
var sayname;
function sayname(name){
     console.log(name)  
}
sayname("hcc")   //hcc
sayname="hello"

---

arguments是什么

1. arguments类数组对象，不是数组，因为它除了有数组的length属性，其他都没有，但是可以进行相互的转换。
2. 它不是函数内部的属性。
3. 它和形参没有具体联系，接受的是函数实参传递的数。
4. argumens只在函数内部有效，在函数外部调用 arguments 对象会出现一个错误。

arguments转换成数组

1. Array.prototype.slice.call(arguments);运用数组原型自带的slice()方法不推荐，会影响js优化。

        function sayname(name,age,sex){
            console.log(arguments instanceof Array);
            var arguments_array = Array.prototype.slice.call(arguments);
            console.log(arguments_array instanceof Array);
            console.log(arguments_array.push()); //3
        }
        sayname("hcc",24,'男');

2. 定义个新的数组接受arguments的值

        function say(name,age,sex){
            var a=[];
            for (var i in arguments){
                a[i]=arguments[i];
            }
            console.log(a instanceof Array);
            console.log(a.push()); 
        }
        say("hcc",24,'男');

---

函数的重载

函数不存在重载，只存在覆盖，同名的函数后面的会覆盖前面的函数。但是可以变相的实现函数的重载。通过传入的参数的不同，arguments的值实现重载。

        function sum(){
            if(arguments.length === 2){
                console.log( arguments[0]+arguments[1] )
                return 
            }
            if(arguments.length === 3){
                console.log( arguments[0]+arguments[1]+arguments[2]  )
                return 
            }
        }
        sum(1,2);
        sum(1,2,3);

---

立即执行函数

1. 实现自身的作用域，立即调用后释放，实现简单的封装
2. 内部的变量不会影响到外部的变量，也不会受到外面函数的影响。

闭包中立即执行函数的运用

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    li{
        list-style-type: none;
        border:  1px solid #f00;
    }

js部分，点击li获取相应的索引

        var lilist =document.getElementsByTagName('li');
        for(var i=0; i<lilist.length;i++){
            (function(n){
                lilist[n].onclick=function(){
            
                alert(n);
            }
            })(i)
        } 

---

函数的作用于链

当函数被调用的时候，会出现一个作用域链，连接相应的上下文。
官方定义是:执行此函数时会创建一个称为“运行期上下文(execution context)”的内部对象,运行期上下文定义了函数执行时的环境。每个运行期上下文都有自己的作用域链，用于标识符解析，当运行期上下文被创建时，而它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。

代码分析

        var a=1;
        var c=3
        function fn(){
            var b=2;
            var c;
            console.log(a); //1
            console.log(c); //undefined
            function fn2(){
                var b=1;
                console.log(b); //1
            }
            fn2();
            console.log(b); //2
        }
        fn()

模型图

1.png
2.png