5天揭秘js高级技术-第一天

一、基础杂记

1. document.write()

<script type="text/javascript">
    document.write('<h2>我爱你</h2>');
</script>

2. 变量必须声明才能使用：

　　使用var声明：局部变量；

　　没有使用var声明：全局变量；

3. 数据类型：

　　String：字符串　　‘’ ,“”;

　　Number：数字;

　　Boolean：布尔型;

　　Undefined：未定义，只是声明了变量，但没有赋值;

　　Null：空;

　　Object：对象(数组，函数等);

 4. prompt：

var num=prompt("请输入：");//弹出输入对话框，并将输入值传递给num；
alert(num);

 二、函数：

 1. 引用传递实例：

//按引用传递的对象函数实例：
var p1=new Object();
function display(obj){
    obj.name='lisi';
}
p1.name='zhangsan';
display(p1);
alert(p1.name);//结果：'lisi'

 2. 匿名函数：

　　1）函数名就是首地址；

    <script type="text/javascript">
        //匿名函数
        var i=0;
        function display(){
            alert('hello!');
        }
        i=display();//变量i的值为函数的返回值，且立刻执行display这个函数，'()'有立刻执行的作用；
        i=display;//变量i指向了这个函数的首地址；
        i();
    </script>

 　　2）匿名函数演变：

        var j=function display1(){//此时的display名称已经没有意义；
            alert('nihao!');
        }
        j();
        var k=function(){
            alert('nihao!');
        };
        k();

 　　3）自调用匿名函数：

<script type="text/javascript">
//没有任何变量指向这个函数的首地址；
//用()将函数括起来，相当于得到函数的收地址，后面的()相当于立即执行这个函数；
//自调用匿名函数也可以传递参数
    (function(index){
        alert('hello,js：'+index);
    })(10);

</script>
//结果：10；    

 　　这种写法的好处：可以避免代码库中的函数重命名的问题，并且以上代码只会在运行时执行一次，一般用作初始化工作；

3. 全局变量和局部变量：

　　在函数内部定义（用var定义，如果没有用var定义，也是全局的变量）的变量是局部变量，否则是全局变量；

    <script type="text/javascript">
        var i=1;//全局
        j=2;//全局
        function play(){
            var k=3;//局部
            p=4;//全局
        }
        play();
        alert(p);//结果：4
    </script>

 　　为什么没有var定义的变量就是全局的呢？

　　是因为，在js中，如果某个变量没有var声明，会自动到上一层作用域中区找这个变量的声明语句，如果找到，就使用，如果没有找到，继续向上查找，一直查找到全局作用域为止，如果全局作用域中仍然没有这个变量的 声明语句，那么会自动在全局作用域进行声明，这个就是js中的作用域链；

4. 作用域链：内部作用域访问外部作用域；（外部作用域访问内部作用域：闭包）

    <script type="text/javascript">
        var i=1;
        function fn1(){
            var i=10;
            function fn2(){
                i=100;
                function fn3(){
                    i=1000;
                }
                fn3();
            }
            fn2();
        }
        fn1();
        alert(i);//结果：1
    </script>

 5. arugments的使用：

　　在一个函数内部，可以使用arguments属性，它表示函数的形参列表，它是以数组形式体现的；

　　如果定义时，参数个数不确定，可以通过arguments这个属性来保存所有实参；

 

<script type="text/javascript">
        function display(){
            //没有定义形参，那么所有形参会自动存放到arguments这个属性数组中；
            for(var i=0;i<arguments.length;i++){
                document.write(arguments[i]+',');
            }

        }
        display('lisi','zhangsan','wangwu');//结果：'lisi','zhangsan','wangwu'
</script>

五、js的执行过程

　　js中的script是分段执行的；

　　执行过程：

　　　　1）读取第一个代码段

　　　　2）编译：

　　　　　　声明变量，声明函数，语法检查，语义检查，代码优化...

　　　　　　var i=10;

　　　　　　var i;

　　　　3）执行

　　　　4）读取第二个代码段

　　　　5）编译

　　　　6）执行

　　　　.........

　　　　结束

    <script type="text/javascript">
        //错误：i is not defined
        alert(i);
    </script>
    <script type="text/javascript">
        //弹出：undefined
        //原因：首先编译，这是已经声明了变量j，这时它是undefined,接下来是执行alert，此时，j还没有赋值，所以...
        alert(j);
        var j=10;
        //弹出：10
        //原因：此时j应经赋值；
        alert(j);
    </script>

六、js中的常见错误：

　　编译错误和运行错误。

　　1. 两种错误导致的结果：相同点

　　（错误后面的js语句都不会有效果）

    <script type="text/javascript">
        alert(n);
        alert("hello");
    </script>
    <script type="text/javascript">
        var n=10;
        alert(n;
        alert("hello");
    </script>

　　2.不同点：

　　　　运行错误代码段会弹出"hello1"，因为执行完第2行，执行第3行时出错；

　　　　编译错误代码段不会弹出"hello2"，因为编译过程就已经出错，就不会执行改代码段了；

    <script type="text/javascript">
        alert("hello1");
        alert(m);//运行错误
    </script>
    <script type="text/javascript">
        alert("hello2");
        var n=10;
        alert(n;//编译错误
    </script>

 　　总结：

　　　　编译时，如果发生错误，那么当前代码段会停止执行，而执行后面代码段的内容；

　　　　运行时，如果发生错误，但前面的代码已经执行完毕，所以不会影响前面的内容；

　　　　无论是哪种错误，不会影响后面的代码段的执行；

 

    <script type="text/javascript">
        alert(i);//运行错误
        var first=10;
        function play(){
            alert("play");
        }
    </script>
    <script type="text/javascript">
        alert(first);
        play();
    </script>

　　结果：弹出undefined，弹出play；

    <script type="text/javascript">
        var first=10;
        function play(){
            alert("play");
        }
        alert(i;　　//编译错误

    </script>
    <script type="text/javascript">
        alert(first);
        play();
    </script>

　　结果：什么也没弹出；

　　总结：如果代码段中出现编译错误，那么该代码段中所有已经声明的全部无效；

　　JS执行流程图：