JavaScript学习小结
通过对JavaScript高级程序设计一书的学习，我对这门脚本语言有了进一步的了解，特写下这几篇博文，总结一下自己的收获。
第一、了解了JavaScript的背景。
它最初是Netscape公司为了在客户端对表单进行简单验证，减轻对服务器的资源消耗而开发的一种客户端语言。而后出现了多个不同的版本，JavaScript的标准化问题提上了议事日程。1997年，ECMA-262标准诞生，它以JavaScript1.1为蓝本定义了一种名为ECMAScript（发音为“ek-ma-script”）的新脚本语言。
值得注意的是，ECMAScript与Web浏览器没有依赖关系，它提供了核心语言功能。Web浏览器只是ECMAScript实现可能的宿主环境之一。我们现在所说的JavaScript是ECMAScript在Web浏览器环境中扩展后的产物，扩展的内容有两部分，一部分是BOM（Browser Object Model浏览器对象模型，提供了与浏览器交互的方法和接口），另一部分是DOM（Document Object Model文档对象模型，提供了访问和操作网页内容的方法和接口）。
第二，对JavaScript中的数据类型有了比较清晰系统的认识。
常说，JavaScript是宽松数据类型的语言，这里的“宽松”，我理解的就是在预编译时不会对声明的变量进行类型检查，对变量一视同仁（使用function声明的函数对象稍有不同）。但是，在执行过程中对变量进行赋值时，就涉及到了变量的存储，这样就把数据值分成了两类，存储在栈内存中的简单数据类型（也成为“基本数据类型”）和存储在堆内存中的引用类型，简单数据类型按值访问，引用类型按引用访问，这一点和Java是一样的。
【简单数据类型】
简单数据类型有5种：undefined、null、number、boolean、string。
在变量声明但未赋值时，其类型即为undefined。null表示一个空对象指针。另外，得知undefined其实是由null类型派生出来的，在使用“==”对两者进行判断时是返回true的，但使用“===”进行逻辑判断时返回false。两者的相似点是，它们都是只有一个值的类型。区别在于，对一个变量显示赋值为undefined是没有意义的，但显示赋值为null却有意义，表示该变量准备用来存放引用类型。
只能用 === 运算来测试某个值是否是未定义的，因为 == 运算符认为 undefined 值等价于 null。 注释：null 表示无值，而 undefined 表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性。
number类型表示整数和浮点数。比较常用的有这样几个函数，isNaN()和Number()、parseInt()、parseFloat()。
isNaN()是用来判断是参数值是不是非数字（is Not a Number ?），如果参数值不能转换为数值，那么返回true，返回数字则表示参数值是数字或者能够转换为数值。后三个函数都是用来进行数值转换的。
创建 Boolean 对象的语法：
new Boolean(value); //构造函数 Boolean(value); //转换函数
参数
参数 value 由布尔对象存放的值或者要转换成布尔值的值。
返回值
当作为一个构造函数（带有运算符 new）调用时，Boolean() 将把它的参数转换成一个布尔值，并且返回一个包含该值的 Boolean 对象。
如果作为一个函数（不带有运算符 new）调用时，Boolean() 只将把它的参数转换成一个原始的布尔值，并且返回这个值。
注释：如果省略 value 参数，或者设置为 0、-0、null、""、false、undefined 或 NaN，则该对象设置为 false。否则设置为 true（即使 value 参数是字符串 "false"）。
string类型用于表示由零或多个16为Unicode字符组成的字符序列，即字符串。有三点需要注意：字符串类型采用单引号、双引号表示都行，但前后需要一致；调用字符串的length属性得到的值可能不准确（如果包含转义序列时）；比较常用的是两个字符串转换函数toString()和String()。
【引用类型】
引用类型就是指对象，它是一组无序属性的集合，其属性可以包含简单数据类型、对象或者函数。该类型类似于Java中的类。Object类型是引用类型的基础类型，其他所有类型都从Object继承了基本的行为。就连我们熟悉的函数，在JavaScript中也是继承了Object类型。
①对象的属性
对象的属性可以分为两类：数据属性和访问器属性（我们常用的是数据属性）。属性本身的各种特征是由属性的特性的决定的。
下边是一个例子，可以用来更好地理解数据属性和访问器的特性。
- //name、_age、sayHi三个属性都是数据属性
- var person = {
- //name和sayHi属性的configurable、enumerable、writable三个特性值为true
- name:"wang",
- sayHi:function(){
- alert("hi");
- }
- };
- Object.defineProperty(person,"_age",{
- //该属性的configurable和enumerable两特性值为false
- writable:true,
- value:12
- });
- //age属性是访问器属性
- Object.defineProperty(person,"age",{
- //该属性的configurable和enumerable两特性值为false，set特性值为undefined
- get:function(){
- return this._age+1;
- }
- });
- alert(person._age);//在读取数据属性时，会返回其value特性值，结果是12
- alert(person.age);//在读取访问器属性时，会调用其get特性指向的函数，结果返回13
- //另外，对数据属性进行赋值时，改变的是该数据属性的value特性值；和对访问器属性进行赋值时，会调用其set特性指向的函数
- //访问属性的特性调用此方法
- var descriptor = Object.getOwnPropertyDescriptor(person,"age");
- alert(descriptor.writable);
//name、_age、sayHi三个属性都是数据属性
var person = {
//name和sayHi属性的configurable、enumerable、writable三个特性值为true
name:"wang",
sayHi:function(){
alert("hi");
}
};
Object.defineProperty(person,"_age",{
//该属性的configurable和enumerable两特性值为false
writable:true,
value:12
});
//age属性是访问器属性
Object.defineProperty(person,"age",{
//该属性的configurable和enumerable两特性值为false，set特性值为undefined
get:function(){
return this._age+1;
}
});
alert(person._age);//在读取数据属性时，会返回其value特性值，结果是12
alert(person.age);//在读取访问器属性时，会调用其get特性指向的函数，结果返回13
//另外，对数据属性进行赋值时，改变的是该数据属性的value特性值；和对访问器属性进行赋值时，会调用其set特性指向的函数
//访问属性的特性调用此方法
var descriptor = Object.getOwnPropertyDescriptor(person,"age");
alert(descriptor.writable);
上边例子的Object.defineProperty可以定义为一个Object.defineProperties 。
- var person = {};
- Object.defineProperties(person,{
- name:{
- value:"wang"
- },
- sayHi:{
- value:new Function("alert('hi');")
- },
- _age:{
- writable:true,
- value:12
- },
- age:{
- get:function(){
- return this._age+1;
- }
- }
- });
var person = {};
Object.defineProperties(person,{
name:{
value:"wang"
},
sayHi:{
value:new Function("alert('hi');")
},
_age:{
writable:true,
value:12
},
age:{
get:function(){
return this._age+1;
}
}
});
我们可以从例子中看出调用Object.defineProperties 函数时，需要两个参数，第一个参数是一个表示对象的变量，第二个参数是一个采用对象字面量形式的对象。
②JavaScript面向对象的设计
特别需要注意的是，其实现方式与Java中的类不同。在没有类的情况下，JavaScript主要是通过构造函数（还有一种创建对象的方式是对象字面量）来创建对象的，是通过原型链来实现类型的继承的。
我觉得，原型链在面向对象的设计中最重要，以下边的代码为例来说明原型链的概念。
function Person(){
this.name = "zhang";
this.age = 1;
}
Person.prototype.sayHi = function(){
alert("hi~");
};
var p1 = new Person();
p1.name = "wang";
var p2 = new Person();
p2.job = "IT";
alert(p1.name);//wang
alert(p2.name);//zhang
p1.sayHi();//hi~
p2.sayHi();//hi~
通过下图可以了解原型链，虚线串连起来的红线就是一条原型链。之所以用虚线，是因为不能通过代码直接访问。
在访问对象属性时既然会其原型链进行搜索，那么如何判断一个对象的属性是存在与本地还是存在于原型链中呢？
原来在基础类型Object的原型对象中存在有hasOwnProperty属性（该属性是一个函数），其他对象都共享了该方法。调用对象的hasOwnProperty方法，将要判断的属性名作为参数传入，就能返回属性是否存在与对象本地。那么怎么判断属性是否存在于原型中呢？in操作符能判断出属性在原型链中是否能找到，无论该属性存在于实例中还是原型中。可以将in操作符与hasOwnProperty函数结合使用，即可判断出属性是否存在于原型中了。
//判断属性是否存在于原型中
function hasPrototypeProperty(object, name){
return (name in object) && (!object.hasOwnProperty(name));
}
理解了原型链，我们就容易理解new操作符的作用了。在例子中有var p1 = new Person();这样的语句使用了new操作符，结合指针关系图，我们可以认为，在执行这行代码时，是先隐式创建了一个空对象this，然后对this对象添加属性，最后再隐式地返回这个this对象给p1。
另外，如果构造函数的代码中已经显式地返回了对象这时用new操作符来调用改构造函数，那么返回的将不是隐式创建的新对象（这个新对象还存在于内存中），而是这个显式的对象。如果构造函数中的代码中显式地返回了简单类型的数据，则没有影响，即还是会将隐式创建的this对象返回的。如将Person()的代码改为
function Person(){
var o = {};
this.name = "zhang";
this.age = 1;
o.name = "li";
return o;
}
再执行var p1 = new Person(); 那么p1.name的值将为"li"，而不是"zhang"。内存中会有一个对象，name属性值为"zhang"，age属性值为1的对象。特别注意的是，这个时候执行var p1 = new Person(); 与执行var p1 = Person();两者返回的对象是相同的，但后者会把name属性和age属性添加给全局对象window。
③几个典型的引用类型
继承自Object类型的，比较典型的有这么几个类型。
【Array类型】
1.首先数组有两种方式，使用构造函数和数组字面量（使用中括号）。
2.JavaScript中数组的length属性和java中不同，是可以对其进行赋值的，并且没有数组下标越界的概念。
3.Array类型提供了一系列方法
| Array类型的方法 |
|
| 方法类别 |
具体的方法说明 |
| 转换方法 |
join()将数组转换为字符串，将传入的字符串作为分隔符，默认以逗号分割 |
| 栈方法 |
可将数组看成栈来使用，提供了push和pop方法 |
| 队列方法 |
可将数组看成队列类使用，提供了unshift和shift方法（pop和push方法同上） |
| 重排序方法 |
反转数组项的reverse方法、对数组项进行排序的sort方法（可传入排序策略） |
| 操作方法 |
并入新数组项的concat方法、截取掉部分数组项的slice方法、可在指定位置插入新数组项的splice方法 |
| 位置方法 |
用于检索目标元素在数组中的索引位置的indexOf方法和lastIndexOf方法 |
| 迭代方法 |
起检测作用的every和some方法，起过滤作用的filter方法和map方法（map方法是将每个数组元素执行后返回的新元素组成一个新数组），起执行作用的forEach方法。 迭代方法都有一个函数作为参数，方法起的作用不同，那么函数的返回值也不同。 |
| 缩小方法 |
reduce和reduceRight方法。迭代数组中的所有项，构建一个最终返回值。 |
【Date类型】
1.Date类型的构造函数不传参数时，自动获得当前日期和时间；如果想根据特定的日期和时间创建日期对象，必须传入表示该日期的毫秒数。
2.Date类型有两个重要方法：Date.parse()和Date.UTC()，它们都是用来返回一个表示日期的毫秒数。需要注意的是，这两个方法是属于构造函数这个对象的，而不是Date类型的实例对象，相当于java中类的静态方法。
3.在ECMAScript5中，支持Date.now()，用来返回当前时间的毫秒数。这个方法可以用来分析前台js代码的执行效率。
4.使用toDateString()和toTimeString()能以特定于的格式显示日期和时间。
5.Date类型还有一些方法可以直接获取和设置日期值中特定的部分。
【RegExp类型】
该类型用来支持正则表达式的。
1.三种模式：g表示全局模式，i表示不区分大小写，m表示多行模式
2.两种方式用来检测正则表达式。
test:检查字符串是否与给出的正则表达式模式相匹配，如果是则返回 true，否则就返回 false
var expression = / pattern / flags;
if(expression.test(text)){...}
match:使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回
function MatchDemo(){
var s = "The rain in Spain falls mainly in the plain";
var re = /(a)in/ig; // 创建正则表达式模式
var r = s.match(re); // 尝试去匹配搜索字符串
document.write(r); //输出结果：ain,ain,ain,ain
}
【Function类型】
1.函数实际是对象，属于引用类型,函数名是指针（引用）。
2.函数可以用任意多个参数来调用，如果参数不够，那么缺少的参数就用undefined代替。
3.函数声明提升：解析器在向执行环境中加载数据时，会率先读取函数声明，并使其在执行任何代码之前可用。
4.函数的两个内部属性：this表示函数据以执行的环境对象，arguments表示函数实际参数的类数组对象。它本身又有自己的属性，length属性表示参数的数量，callee属性表示当前的函数（这一属性常用与递归）。
5.函数的属性：caller属性只能在函数内部调用，表示调用本函数的函数，在全局作用域中调用该函数会返回null；另外一个重要的属性是prototype属性，该属性指向函数的原型对象。在函数对象创建时该属性就会自动指向原型对象。
6.函数的方法:apply()、call()，这两个方法都是用来设置函数内部属性this从而扩展函数作用域的(让函数在指定的作用域中执行)，只不过apply()扩展函数作用域时是以（类）数组方式接受函数的参数，而call()扩展函数作用域时需要将函数参数一一列举出来传递。另外，在ECMAScript5中还定义了bind()方法，它与前边两者的区别是它只是将函数的this值绑定到传给bind的参数，如varbindFun = fun.bind(obj); 只有在调用了绑定后返回的函数引用才会执行，即 需要执行代码bindFun();
【三个包装类型Boolean类型、Number类型、String类型】
三个包装类型是和boolean、number、string三个基本类型相对应的。<SPAN style="FONT-SIZE: 18px">就像java中的int与Integer之间的关系。不过最大的区别是，隐式地创建了相应的包装类型。只是寿命很短，只存在于一行代码的执行瞬间（这个瞬间我们可以使用简单类型的字符串、数字，直接调用其包装类型的方法），然后立即就被销毁了。Boolean类型没啥用。
String类型有哪些方法呢？有字符方法（charAt/charCodeAt）、字符串操作方法(substring/slice/concat/trim)、字符串位置方法(indexOf/lastIndexOf)、大小写转换、模式匹配方法等
Number类型有哪些方法呢？有toFixed方法用来对小数进行四舍五入，有toExponential()方法进行指数表示，有toPrecision()方法来保留指定数目的有效数字。
【两个单体内置对象Global对象和Math对象】在所有的代码执行之前，作用域中就已经存在两个内置对象：Global和Math。在大多数ECMAScript的实现中都不能直接访问Global对象，不过在JavaScript中window对象担任有此角色。Math对象提供了很多属性和方法，辅助完成复杂的数学计算任务。在使用IE浏览器进行测试时，发现了ie中Global对象不是Object类型，而是DispHTMLWindow2的，感到奇怪，先存疑吧。
④类型识别问题
简单地说来，对于简单类型的判断可以使用typeof操作符，对于引用类型的判断，可以使用instanceof操作符来判断。http://blog.csdn.net/wangchenggong1988/article/details/8131579
第三、对JavaScript的预编译、作用域、闭包等概念有了初步的认识。
JavaScript代码的执行是有预编译和执行两个阶段的。在预编译阶段，对于使用var声明的变量都先赋以undefined，对于使用function关键字声明的函数对象，则是怎么声明，就怎么定义。在执行阶段，再对变量进行赋值。如果某行代码对已经使用function关键字声明过函数对象又使用var进行了赋值，那么执行到此处时，先前的函数定义就会被此处的定义覆盖。
- fun();//hi
- var fun = function(){
- alert("hello");
- };
- function fun(){
- alert("hi");
- }
- fun();//hello
fun();//hi
var fun = function(){
alert("hello");
};
function fun(){
alert("hi");
}
fun();//hello
作用域该如何理解？
作用域就是变量或函数能被访问的范围。说一个变量或函数拥有全局作用域，意思就是说，它能在全局范围内被访问。JavaScript中作用域只有两种：全局作用域和函数作用域，没有块作用域。
作用域链如何理解？
作用域链是在调用函数时才有的概念。函数在调用时，其内部可能还有对别的函数的调用，如何实现对不同层次的函数体内定义的变量进行有序地访问呢？这就出现了作用域链。
简单地说，不同层次的函数作用域都用一个对象来代表，把这些对象的指针按顺序罗列出来就是作用域链。
在搜索标识符时，就是从作用域的前端向后一级一级单向搜索，如果找到，就停止返回。
在此推荐一篇比较好的文章介绍了JavaScript的作用域和作用域链：http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html