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语句会抛出错误

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

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……）{
s
4000
tatement;
}

     函数可以通过字符串进行函数的调用，后面加上圆括号和参数（多个参数利用逗号隔开）。
     函数只执行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.作用域如下所示。

延长作用域链
      当执行流进入下面任何一个语句时，作用域链会得到加长：

• 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，搜索结束。搜索过程如下：

           思考:如果在第三行加上

var color=“red”

输出什么？

垃圾收集

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

小结

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