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

一、基础杂记

1. document.write()

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

document.write

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

　　使用var声明：局部变量；

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

3. 数据类型：

　　String：字符串　　‘’ ,“”;

　　Number：数字;

　　Boolean：布尔型;

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

　　Null：空;

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

4. prompt：

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

prompt

二、函数：

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执行流程图：