JavaScript高级程序设计学习笔记(3)

朱雀 2022-03-16 01:30 207阅读 0赞

# JavaScript高级程序设计学习笔记 #

1.对JavaScript实现各个组成部分的详尽解读  
2.对JavaScript面向对象编程的全方位阐述  
3.DOM，BOM及浏览器事件模型的透彻剖析  
4.Web应用基本数据格式JSON，XML及存取  
5.Ajax，Comet服务器端通信和基于File API的拖放式文件上传  
6.ECMAScript 5定义的最核心语言特性  
7.HTML 5涵盖的表单，媒体，Canvas（包括WebGL）  
8.Selectors、Web Workers、地理定位及跨文档传递消息等最新API  
9.离线应用及客户端存储（包括IndexedDB）  
10.维护、性能、部署相关的最佳开发实践  
11.新兴API及ECMAScript Harmony展望

# **对JavaScript实现各个组成部分的详尽解读** #

## 语句(i\`m important) ##

**1.循环语句**

--------------------

if语句  
     if语句格式如下：

if(condition){
             statement1;
     }else{
            statement2;
    }

其中condition可以为任何表达式，而且结果不一定为布尔值。ECMAScript会自动调用Boolean()转换函数将表达式结果转化为布尔值。如果condition为true，则开始执行statement1；如果condition为false，则开始执行statement2。【此处有点类似条件操作符】

do-while语句  
     do-while语句格式如下：

do{
         statement
    }while(expression);

如果expression 的结果一直为true，则循环执行statement语句，直到expression的结果为false，跳出循环，开始执行下面的语句。

while语句  
     while语句格式如下：

while(expression){
          statement;
    }

当expression语句为true的时候，循环执行statement语句，直到expression的结果为false时，跳出循环，开始执行下面的语句。

for语句  
     for语句格式如下：

for（initialization；expression；post-loop-expression）
    {
           statement；
    }

initialization表示循环变量的初始值；expression表示循环的条件，当为true的时候执行statement语句，当为false的时候挑出循环向下执行；post-loop-expression表示对于循环变量的变化（一般为i++）。for循环可以和while循环相互转化。

for-in语句  
     for-in语句是一种精确的迭代语句，用来枚举对象属性语法结构如下：

for（property in expression）{
          statement;
    }

*  过程会持续到对象中所有属性被枚举一遍为止
 *  枚举过程中没有顺序，所以输出的顺序不可预测
 *  迭代的的对象变量值为null或者undefined，for-in语句会抛出错误

<table> 
 <tbody> 
  <tr> 
   <td>循环语句</td> 
   <td>区别</td> 
  </tr> 
  <tr> 
   <td>if语句/while语句</td> 
   <td>先判断再执行<br>判断条件仅有循环条件，条件为false的时候才跳出循环</td> 
  </tr> 
  <tr> 
   <td>do-while语句</td> 
   <td>先执行再判断（至少执行一次）<br>判断条件仅有循环条件，条件为false的时候才跳出循环</td> 
  </tr> 
  <tr> 
   <td>for语句</td> 
   <td>先判断再执行<br>判断条件中有循环变量，循环条件，循环变量的变化【比较灵活】</td> 
  </tr> 
  <tr> 
   <td>for-in语句</td> 
   <td>先判断再执行<br>用来枚举对象属性【枚举】</td> 
  </tr> 
 </tbody> 
</table>

**2.label语句**

--------------------

label语句在代码中添加标签。语法如下：

label：statement

**3.break和continue语句**

--------------------

break语句：会跳出循环继续向下执行；  
     continue语句：会跳出本次循环，继续下次循环；  
     1) break:

var num=0;
    for (var i=1;i<10;i++){
          if(i%5==0){
          break;
          }
          num++;
    }
    alert(num);//4

2) continue:

var num=0;
    for (var i=1;i<10;i++){
          if(i%5==0){
          continue;
          }
          num++;
    }
    alert(num);//8

break和continue语句可以和label进行联合使用，从而返回特殊位置。【不建议过多使用】  
  
  
**4.with语句**

--------------------

with语句的作用是将作用域设定在特定的对象中。格式如下：     `with（expression）statement`  
     作用如下例：

var qs=location.search.substring(1);
    var hostName=location.hostname;
    var url=location.href;

可以使用with语句，对上面的代码进行简化：

with(location){
        var qs=search.substring(1);
        var hostName=hostname;
        var url=href;
    }

虽然with语句可以对代码进行简化，但是会导致性能下降【不推荐使用】  
  
  
**5.switch语句**

--------------------

有多个if……else……语句可以利用switch语句代替。switch语句的语法如下：

switch(expression){
         case  value:statement;
              break;
         case value:statement;
              break;
         default:statement;
    }

用expression和value进行判断，执行相应的statement的语句。

*  注意不要忘记break，除非要将两个情况进行合并；
 *  注意不要忘记default，只是最后未能找到匹配的value，则开始执行default内容
 *  ECMAscrip不同于其他语言可以在switch语句使用其他数据类型（很多语言中只能使用数值）
 *  case的值也不一定是常量也可以是变量，或者是表达式  
    learning Tips  
    switch语句在比较值的时候使用的是全等操作符，因此不会发生类型转化（例如，字符串“10”不等于10）

## 函数(i\`m very important) ##

ECMAscript中的函数使用function关键词进行声明。基本语法如下：

function functionName（arg0，arg1,arg2……）{
              statement;
    }

函数可以通过字符串进行函数的调用，后面加上圆括号和参数（多个参数利用逗号隔开）。  
     函数只执行return前面的语句，对于return后面的任何代码不会执行

**1.理解参数**

--------------------

ECMAScript函数不介意传递的参数个数和类型。由于传递的参数在内部使用数组表示，函数体内可以通过arguments对象来访问数组【注意arguments与数组类似但不同于array的实例】。

*  可以利用arguments\[0\],arguments\[1\]来进行访问参数
 *  可以通过length属性得到传递的参数的个数
 *  如果有命名参数和arguments对象同时出现，修改其中一个与之对应的也会随之改变（严格模式除外）

function sum{
         if（arguments[0]>arguments[1]）
             return (arguments[0]-arguments[1]);
         else
             return (arguments[1]-arguments[0]);
    }
    alert(sum(10,5));//5
    alert(sum(10,20));//10

**2.参数重载**

--------------------

ECMAScript无法重载，同名的函数第二个会覆盖掉第一个

--------------------

## 小结 ##

*  ECMAScript基本数据类型?以及基本类型的转换
 *  ECMAScript中的操作符有哪些？分别要注意什么？
 *  关于ECMAScript的if语句，for语句和switch语句等语句与其他语言有哪些不同？
 *  ECMAScript的函数参数与其他语言函数参数有什么不同？

--------------------

## 变量、作用域和内存问题(i\`m important) ##

**1.基本类型和引用类型的值**

--------------------

ECMAScript变量可能包括两种不同数据类型的值：基本类型值和引用类型值。

*  基本类型值：简单的数据段，包括Undefined、Null、String、Number和Boolean，这五种数据类型按值访问，可以操作在变量中的实际的值；
 *  引用类型值：由多个值构成的对象，引用类型的值是保存在内存中的对象。不同于其他语言，JavaScript不允许直接访问内存中的位置，即不能直接操作对象的内存空间。在操作对象的时候，实际上是操作对象的引用并非对象本身

动态属性

var person = new Object();
    person.name="ann";
    alert(person.name);//ann

上面的代码先创建一个对象，然后对于对象添加名为“name”的属性，再赋值。最后通过alert（）函数访问新属性。但是如果将对象改为基本类型，给基本类型添加属性，则返回undefined

复制变量值  
1)基本类型值

var num1=5;
    var num2=num1;
    num1++;
    alert(num2);//5

2)引用类型值

var num1=new Object();
    var num2=num1;
    num1.name="ann";
    alert(num2.name);//ann
    num1.name="mary";
    alert(num2.name);//mary

区别：  
     当使用基本类型值相互赋值后，第二个操作数的值与第一个操作数的值是相互独立的，可以参加任何操作而不相互影响。  
     当使用引用类型值-对象相互赋值后，第二个操作数实际上是一个指针，和第一个操作数都是引用的同一个对象，改变一个变量会影响另一个变量。

传递参数  
1）基本类型值

function sum(num) {
        return ++num;
    }
    var count=20;
    var result=sum(count);
    alert(count);//20
    alert(result);//21

2）引用类型值

function set(obj) {
        obj.name="ann";
        var num=new Object();
        num.name="mary";
    }
    var num=new Object();
    set(num);
    alert(num.name);//ann

解释：  
     对于sum来说，num为函数的局部变量。在调用函数的时候，数值会赋值给num，以便在函数中使用，函数中的变化不会影响外部变量，所以count不会被影响  
     虽然有新的对象赋值给变量，但是在函数内修改数值，但是原有引用仍未改变。实际上，函数内重写obj时，这时变量引用为局部变量，在执行完函数时自动销毁。

检测类型  
1）基本类型值

var n=null;
    var o=new Object();
    alert(n);//object
    alert(o);//object

2）引用类型值

alert(person instanceof Object);//变量person是Object吗？
    alert(color instanceof Array);//变量color是Array吗？
    alert(pattern instanceof RegExp);//变量pattern是RegExp(RegExp 对象表示正则表达式)吗？

解释：  
     利用typeof可以很容易得到数据类型，但是对于引用类型值来说，只能得到Object，但是我们需要知道它是什么类型的对象。  
     对于引用类型来说利用instanceof可以得到对于对象类型的判断，返回布尔值。如果利用instanceof来测试基本类型值，始终会得到false。

**2.执行环境及作用域**

--------------------

每个执行环境都有与之关联的的变量对象。当代码在一个环境执行时，会创建变量对象的一个作用域链。

var  num1="111";
    function first() {
        var num2="222";
        function second() {
            var num3="333";
        }
    }

上面代码总共有三个执行环境：全局环境、first()局部环境和second()局部环境。对于全局环境，只可以访问全局变量num1 。对于first()局部环境来讲可以访问num1、num2；对于second()局部环境来讲可以访问num1、num2和num3.作用域如下所示。  
![作用域描述][20190227104823277.png]  
延长作用域链  
      当执行流进入下面任何一个语句时，作用域链会得到加长：

*  try-catch语句的catch块
 *  with语句

function url(){
         var qs="true";
         with(location){
                var url = href+qs;
         }
         return url;
    }

对于with语句，在with语句接受的是location对象，包括location对象的所有属性 ，实际上是location.href。但是在with语句中可以使用function里的qs变量。

延长作用域链

for(var i =0;i<10;i++){
        sum=i+sum;
    }
    alert(i);

不同于其他语言的块级，当循环结束后，for语句初始的变量销毁。ECMAScript在循环结束后也可以继续使用由for循环创造的变量i.  
1)声明变量  
     如果初始化变量时没有使用var声明，该变量会自动添加到全局环境。

function add（num1，num2）{
        var sum=num1+num2；
        return sum；
    }
    var result=add（10,20）；
    alert（sum）；//由于sum并非有效变量，因此会导致错误

思考:如果将第二行换为`sum=num1+num2`是否正确？  
2）查询标识符

var color="blue";
    function getColor(){
         return color;
    }
    alert("getColor");

调用函数getColor()时引用变量color。开始搜索的getColor()变量对象，查找是否存在变量color。在没有找到的情况下，继续向上搜索，此时来到全局继续搜索，在这里找到color，搜索结束。搜索过程如下：  
![搜索过程][20190227202338811.png]  
           思考:如果在第三行加上`var color=“red”`输出什么？

## 垃圾收集 ##

JavaScript有自动垃圾收集机制，不同于C语言和C++，开发人员不用手工跟踪内存的使用情况，执行环境会自动管理。垃圾收集器会按照一定的时间间隔找出不用的变量，然后释放变量占用的内存，周期性的执行这个操作。  
     JavaScript对于垃圾的收集机制主要有两种策略：标记清除和引用计数。  
     优化内存占用，使页面获得更好的性能，就是执行中的代码只保存必要数据。一旦数据不再有用，可以将值设置为null来释放引用，这种做法叫解除引用。但并非自动收回该值所占内存。其真正作用是让值脱离执行环境，以便垃圾收集器下次周期内回收。

--------------------

## 小结 ##

*  ECMAScript分为基本类型和引用类型，基本类型和引用类型的区别？怎么确定某个值的基本类型？怎么确定某个值的引用类型？
 *  ECMAScript中的函数执行环境和全局环境有何不同？（作用域链）
 *  如果在ECMAScript中的某个函数中没有找到相应的变量，怎么办？
 *  简述ECMAScript的垃圾收集机制？怎么能更好减少性能提高性能？

--------------------

[20190227104823277.png]: /images/20220316/4cfe9ab3f4e24ee5b9d4374bb5a9ff29.png
[20190227202338811.png]: /images/20220316/dbc41640535f4ad783e7abba888df4e9.png