上书房之JavaScript(Part1)

作者: 上书房_张强 | 来源:发表于2017-02-14 17:34 被阅读306次

第一章 JavaScript概述

1.1 什么是JavaScript

JavaScript是一种具有面向对象能力、解释型的客户端脚本设计语言。JavaScript不需要再一个语言环境下运行，而只需要支持它的浏览器即可。它的主要目的是验证发往服务器的数据、增加Web互动、加强用户体验。

1.2 JavaScript的特点

松散性
JavaScript语言核心与C、C++、Java相似，比如条件判断、循环、运算符等，但它却是一种松散类型的语言，也就是说，它的变量不必具有一个明确的类型。
对象属性
JavaScript中的对象把属性名映射为任意的属性值，类似于哈希表或关联数组。
继承机制
JavaScript中的面向对象继承机制是基于原型的，这和C++以及Java中的集成大不相同。

1.3 JavaScript的历史

1995年，Netscape（网景）公司为解决类似于“向服务器提交数据之前验证”的问题，与Sun公司联手开发一个名为LiveScript的脚本语言，后期为了营销便利，更名为JavaScript。之后随着互联网的普及浏览器的发展，Firefox、Google Chrome、Safari等主流的浏览器对JavaScript的支持也达到了极致，使得JavaScript得到了飞速的发展，如今JavaScript已是各种浏览器默认支持的脚本语言。

第二章 JavaScript使用

JavaScript 必需嵌入到 HTML 文档，才能被浏览器解释和执行。将 JavaScript 脚本嵌入到 HTML 文档中有3种标准方法：

2.1 通过 <script> 标签嵌入

通过 <script> 标签嵌入JavaScript代码时，必需将代码放在 <script> 和 </script> 标记对之间。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        document.write("这是通过<script>标签嵌入的代码");
    </script>
    <body>
        
    </body>
</html>

浏览器载入HTML文档时，会识别 <script> 标签，执行其中的 JavaScript 代码，然后将结果返回并在浏览器窗口显示。

2.2 引入外部脚本

当网页功能比较复杂，或通用代码（每个页面都是用）较多时，直接在 <script> 标签中嵌入 JavaScript 代码会导致网页杂乱，不易管理。这时候，我们希望能将JavaScript代码保存在单独的文件中，使用时再嵌入到 HTML 文档。
可以通过 <script> 标签的 src 属性可引入外部文件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script src="../script/demo.js"></script>
    <body>
        
    </body>
</html>

引入外部脚本，能够很轻松的让多个页面使用相同的 JavaScript 代码。外部脚本一般会被浏览器保存在缓存文件中，用户再次访问网页时，无需重新载入，加快了网页打开速度。

2.3 在 HTML 属性中直接嵌入

在 HTML 属性中嵌入 JavaScript 代码主要是针对 JavaScript 事件。JavaScript 事件是指用户对网页进行操作时，网页做出相应的响应。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <button onclick="alert('你点击了按钮！')">点击我</button>
    </body>
</html>

第三章语法、关键保留字及变量

3.1 语法构成

区分大小写
JavaScript语言是区分大小写的，text和Text表示不同的两个变量。
标识符
标识符就是指变量、属性的名字，或者函数的参数。标识符可以是可以格式规则组合起来的一个或多个字符。

第一个字符必须是一个字母、下划线或者$符
其他字符可以是字母、下划线、$符或者数字
不能把关键字、保留字、true、false和null作为标识符

注释
JavaScript使用C语言的注释风格，分为单行注释和多行注释。
单行注释以 // 开头
多行注释以 /* 开始，以 */ 结尾
字面量
所谓字面量，就是指程序中直接显示出来的数据值。例如：
100 //数据字面量
“张强” //字符串字面量
false //布尔值字面量
null //对象字面量
{x:1, y:2} //对象字面量表达式
[1,2,3,4,5] //数组字面量表达式

3.2 关键字保留字

JavaScript描述了一组具有特定用途的关键字和保留字，一般用于控制语句的开始或结束，或用于执行特定的操作等，这些关键字和保留字不能用作标识符。

关键字保留字

3.3 变量

JavaScript变量是松散型的，所谓松散类型就是用来保存任何数据的类型。定义变量时要使用var操作符（var是关键字），后面跟一个变量名（变量名是标识符）。
var name;
alert(name); //undefined
var name = “Johnny”;
alert(name); //Johnny
变量是一个可以改变的标识符，声明并赋值后，可以改变它的值。

第四章数据类型

JavaScript有5种简单的数据类型：Undefined、Null、Boolean、Number、String。还有一种复杂数据类型——object。JavaScript不支持任何创建自定义类型的机制。所有值都是以上6种数据类型之一。

4.1 Typeof操作符

typeof操作符是用来检测变量的数据类型，对于值或者变量使用typeof操作符会返回如下字符串：

变量定义	typeof操作符	返回值
var x;	typeof(x);	undefined
var x = 1;	typeof(x);	number
var x = true;	typeof(x);	boolean
var x = “johnny”;	typeof(x);	string
var x = new object();	typeof(x);	object

4.2 Undefined类型

Undefined是一种特殊的数据类型，指的已声明但没有赋值的变量对应的类型。Undefined类型主要目的是为了作比较，引入Undefined类型是为了区分空对象与未初始化的变量，所以，未初始化的变量与根据不存在的变量是不一样的。
实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var sex;
        document.write(sex);
        document.write(college);
    </script>
    <body>
        
    </body>
</html>

PS: 在实际项目中，声明一个变量的时候，就必须初始化。

    <script>
        var customerName = "";  //字符串变量的初始值一般为空
        var total = 0;  //数字类型的初始值一般为0
        var success = false;    //布尔值类型的初始值一般的false
        var car = null; //对象类型的初始值一般为null；
    </script>

4.3 Null类型

Null类型是一个只有一个值的数据类型，即特殊值null，他表示一个空对象引用。当时用typeof检测null时，返回值为object。
如果定义的变量将来准备用于保存对象，那么最好在定义变量的时候将其初始化为null。这样，当检查null值就知道变量是否已经分配了对象引用了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var car = null;
        if(car != null){
            document.write("对象已赋值");
        }else{
            document.write("对象尚未初始化");
        }
    </script>
    <body>
        
    </body>
</html>

4.4 Boolean类型

Boolean类型有两个值：true和false。它用于条件判断时使用。
实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var success = true;
        if(success){
            document.write("submit success.");
        }else{
            document.write("submit failed.");
        }
        
        var x = 3;
        var y = 3;
        if(x === y){
            document.write("x is equal to y.");
        }else{
            document.write("x is not equal to y.");
        }
    </script>
    <body>
        
    </body>
</html>

4.5 Number类型

Number类型包含两中数值，整数和浮点数。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var total = 100;
        var score = 90.5;
         document.write(typeof(total));
         document.write(typeof(score));
    </script>
    <body>
        
    </body>
</html>

判断是否为数字类型——isNaN
精确到小数点后几位——toFixed()
转为字符串类型——toString()

4.6 String类型

String类型用于表示由零或多个字符组成的字符序列，即字符串。字符串可以由双引号（""）或单引号（''）表示。
var customerName = "Johnny";
var customerName = 'Johnny';
String类型包含了一些特殊的字符字面量，也叫转义字符。

字面量	含义
\n	换行
\t	制表
\b	空格
\r	回车
\f	进纸
\	斜杠
'	单引号
"	双引号

JavaScript中的字符串是不可改变的，字符串一旦被创建，它的值就不能在被修改。如果要修改一个字符串变量的值，首先要销毁原来的字符串，然后再新创建一个字符串来填充该变量。
使用toString()方法可将数字类型的值转为字符串类型。

4.7 Object类型

JavaScript中的对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。在第八章中，我们会用专门的章节来介绍JavaScript的对象类型。

第五章运算符

5.1 什么是表达式

表达式是JavaScript中的一个“短语”，解释器会通过计算把它转换成一个值。表达式分为简单表达式和复杂表达式，简单表达式就是字面量或者变量名；复杂表达式是通过合并简单的表达式来创建的一种表达式。

简单表达式	说明
5.96	数值字面量
'Lee'	字符串字面量
True	布尔值字面量
null	空值字面量
{x:1, y:2}	对象字面量、对象表达式
[1,2,3]	数组字面量、数组表达式
function(n) {return x+y;}	函数字面量、函数表达式
box	变量

复杂表达式	说明
box + 5.96	加法运算的表达式
typeof(box)	查看数据类型的表达式
box > 8	逻辑运算表达式

通过上面的叙述，我们得知，单一的字面量和组合字面量的运算符都可称为表达式。

5.2 一元运算符

只能操作一个值的运算符叫做一元运算符。
递增++和递减--
var count = 10;
count++; //相当于count = count + 1;
count--; //相当于count = count - 1;
前置和后置的区别
var count = 10;
++count; //相当于count = count + 1;
--count; //相当于count = count - 1;
var result1 = count++; //先赋值，后自增
var result2 = ++count; //先自增，后赋值
前置和后置的区别
var count = 10;

5.3 算术运算符

JavaScript定义了5个算术运算符，加、减、乘、除、求模(取余)。如果在算术运算的值不是数值，那么后台会先使用Number()转型函数将其转换为数值(隐式转换)。
（1）加法
var x= 1 + 2;
（2）减法
var x = 2 - 1;
（3）乘法
var x = 2 * 1;
（4）除法
var x = 6 / 3;
（5）求模
var x = 6 % 3;

5.4 关系运算符

用于进行比较的运算符称作为关系运算符，JavaScript中有8中关系运算符：小于(<)、大于(>)、小于等于(<=)、大于等于(>=)、相等(==)、不等(!=)、恒等(===)、不恒等(!==)。
和其他运算符一样，当关系运算符操作非数值时要遵循一下规则：

两个操作数都是数值，则数值比较
两个操作数都是字符串，则比较两个字符串对应的字符编码值
两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较
两个操作数有一个是对象，则先调用valueOf()方法或toString()方法，再用结果比较

相等(==)和恒等(===)的区别：
相等(==)：值相等即可
恒等(===)：值和类型必须都相同
不等(!=)：值不相同即可
不恒等(!==)：值或类型不相等

5.5 逻辑运算符

逻辑运算符通常用于布尔值的操作，一般和关系运算符配合使用，有三个逻辑运算符：逻辑与(&&)、逻辑或(||)、逻辑非(!)。
（1）逻辑与(&&)
var result = (5 > 4) && (4 > 3); //true，两边都为true，返回true

第一个操作数	第二个操作数	结果
true	true	true
true	false	false
false	true	false
false	false	false
（2）逻辑与
var box = (9 > 7)		(7 > 8); //true，两边只要有一边是true，返回true
第一个操作数	第二个操作数	结果
-----------	-----------	----
true	true	true
true	false	true
false	true	true
false	false	false

（3）逻辑非(!)
逻辑非运算符可以用于任何值。无论这个值是什么数据类型，这个运算符都会返回一个布尔值。它的流程是：先将这个值转换成布尔值，然后取反，规则如下：

操作数是一个对象，返回false；
操作数是一个空字符串，返回true；
操作数是一个非空字符串，返回false；
操作数是数值0，返回true；
操作数是任意非0数值(包括Infinity)，false；
操作数是null，返回true；
操作数是NaN，返回true；
操作数是undefined，返回true；

5.6 赋值运算符

赋值运算符用等于号(=)表示，就是把右边的值赋给左边的变量。

var box = 100;  //把100赋值给box变量

复合赋值运算符通过x=的形式表示，x表示算术运算符。

var box = 100;
box = box +100;  //200，自己本身再加100

这种情况可以改写为：

var box = 100;
box += 100;  //200，+=代替box+100

除了这种+=加/赋运算符，还有其他的几种如下：

乘/赋(*=)
除/赋(/=)
模/赋(%=)
加/赋(+=)
减/赋(-=)

5.7 其他运算符

（1）字符串运算符
字符串运算符只有一个，即："+"。它的作用是将两个字符串相加。
规则：至少一个操作数是字符串即可。

var x = '100' + '100';  //100100
var y = '100' + 100;        //100100
var z = 100 + 100;      //200

（2）三元运算符
三元条件运算符其实就是后面将要学到的if语句的简写形式。

var x = 5 > 4 ? 'Y' : 'N';

第六章流程控制

6.1 if语句

if 语句即条件判断语句，一共有三种格式：
（1） if (条件表达式) 语句;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var age = 18;
        if(age >= 18){
            alert("成年人。");
        }
    </script>
    <body>
        
    </body>
</html>

（2） if (条件表达式) {语句;} else {语句;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var age = 18;
        if(age >= 18){
            alert("成年人。");
        }else{
            alert("未成年人。");
        }
    </script>
    <body>
        
    </body>
</html>

（3） if (条件表达式) {语句;} else if (条件表达式) {语句;} ... else {语句;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var score = 90;
        if(score >= 85){
            alert("优秀");
        }else if(score >= 75){
            alert("良好");
        }else if(score >= 60){
            alert("及格");
        }else{
            alert("不及格");
        }
    </script>
    <body>
        
    </body>
</html>

6.2 switch语句

switch语句是多重条件判断，用于多个值相等的比较。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var day = new Date().getDay();
        switch(day){
            case 0:
                alert("Today is Sunday");
                break;
            case 1:
                alert("Today is Monday");
                break;
            case 2:
                alert("Today is Tuesday");
                break;
            case 3:
                alert("Today is Wednesday");
                break;
            case 4:
                alert("Today is Thursday");
                break;
            case 5:
                alert("Today is Friday");
                break;
            case 6:
                alert("Today is Saturday");
                break;  
            default:
                alert("error");
                break;
        }
    </script>
    <body>
        
    </body>
</html>

6.3 do...while语句

do...while语句是一种先运行，后判断的循环语句。也就是说，不管条件是否满足，至少先运行一次循环体。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var x = 10;
        do{
            alert(x);
            x++;
        }while(x <= 5)
    </script>
    <body>
        
    </body>
</html>

6.4 while语句

while语句是一种先判断，后运行的循环语句。也就是说，必须满足条件了之后，方可运行循环体。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var x = 10;
        while(x <= 5){
            alert("x");
            x++;
        }
    </script>
    <body>
        
    </body>
</html>

6.5 for语句

for语句也是一种先判断，后运行的循环语句。但它具有在执行循环之前初始变量和定义循环后要执行代码的能力。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        for(var i=0; i<5; i++){
            alert(i);
        }
    </script>
    <body>
        
    </body>
</html>

6.6 for...in语句

for...in语句是一种精准的迭代语句，可以用来枚举对象的属性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var car = {
            "名称": "奔驰",
            "型号": "GLC300",
            "颜色": "白色"
        };
        for(var p in car){
            alert(p);
        }
    </script>
    <body>
        
    </body>
</html>

6.7 break和continue语句

break和continue语句用于在循环中精确地控制代码的执行。其中，break语句会立即退出循环，强制继续执行循环体后面的语句。而continue语句退出当前循环，继续后面的循环。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        for(var i=0; i<10; i++){
            document.write(i+"<br>");
            if(i === 5){
                document.write("退出循环"+"<br>");
                break;
            }
        }
        document.write("循环执行完成");
    </script>
    <body>
        
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        for(var i=0; i<10; i++){
            if(i === 5){
                document.write("跳过本次循环"+"<br>");
                continue;
            }
            document.write(i+"<br>");
        }
        document.write("循环执行完成");
    </script>
    <body>
        
    </body>
</html>

第七章函数

函数是定义一次但却可以调用或执行任意多次的一段JS代码。函数有时会有参数，即函数被调用时指定了值的局部变量。函数常常使用这些参数来计算一个返回值，这个值也成为函数调用表达式的值。

7.1 函数声明

函数对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。JavaScript中的函数使用function关键字来声明，后跟一组参数以及函数体。

    <script>
        function showMessage(){
            alert("shwo message function be called.");
        }
        showMessage();
    </script>

    <script>
        function showMessage(name, age){
            alert("Your name:" + name + ", age:" + age);
        }
        showMessage("Johnny",30);
    </script>

7.2 return返回值

带参数和不带参数的函数，都没有定义返回值，而是调用后直接执行的。实际上，任何函数都可以通过return语句跟后面的要返回的值来实现返回值。

    <script>
        function getMessage(){
            return "shwo message function be called.";
        }
        
        var msg = getMessage();
        alert(msg);
    </script>

    <script>
        function getMessage(name, age){
            return "Your name:" + name + ", age:" + age;
        }
        
        var msg = getMessage("Johnny",30);
        alert(msg);
    </script>

return语句还有一个功能就是退出当前函数，注意和break的区别（break用在循环和switch分支语句里）。

    <script>
        function getMessage(name, age){
            if(name === "马云"){
                return "哇塞，阿里巴巴创始人，首富啊！"+ "年龄:" + age;
            }
            return "你的名字: " + name + ", 年龄: " + age;
        }
        
        var msg = getMessage("马云",50);
        alert(msg);
    </script>

7.3 arguments对象

JavaScript函数可以不定义参数，可以在函数体内可以通过arguments对象来接收传递进来的参数（不常用）。

    <script>
        function getMessage(){
            if(arguments[0] === "马云"){
                return "哇塞，阿里巴巴创始人，首富啊！"+ "年龄:" + arguments[1];
            }
            return "你的名字: " + arguments[0] + ", 年龄: " + arguments[1];
        }
        
        var msg = getMessage("张强",30);
        alert(msg);
    </script>

第八章对象和数组

JavaScript对象，其实就是一种类型，即引用类型。而对象的值就是引用类型的实例。在JavaScript中引用类型是一种数据结构，用于将数据和功能组织在一起。它也常被称为类，但JavaScript中却没有这种东西。虽然JavaScript是一门面向对象的语言，却不具备传统面向对象语言所支持的类和接口等基本结构。
JavaScript中所有的类型都是对象。

8.1 Object对象

到目前为止，我们使用的引用类型最多的可能就是Object类型了。虽然Object的实例不具备多少功能，但对于在应用程序中的存储和传输数据而言，它确实是非常理想的选择。JavaScript 中的所有事物都是对象：字符串、数值、数组、函数等等，此外，JavaScript 允许自定义对象。

8.1.1 创建Object

创建Object类型有三种方式。
（1）使用new运算符创建Object

<script>
  var car = new Object();       //使用new方式创建对象
  car.name = "Mercedes Benz";   //创建属性字段
  car.model = "GLC 300";        //创建属性字段
  car.color = "White";      //创建属性字段
</script>

（2）使用字面量方式创建Object

<script>
  var car = {
    name: "Mercedes Benz",
    model: "GLC 300",
    color: "White"
  };
</script>

<script>
  var car = {
    "name": "Mercedes Benz", //属性字段也可以使用字符串形式
    "model": "GLC 300",
    "color": "White"
  };
</script>

<script>
  var car = {}; //使用字面量及传统赋值方式，字面量声明为空对象
  car.name = "Mercedes Benz";
  car.model = "GLC 300";
  car.color = "White";
</script>

（3）使用构造函数方式

<script>
  function car(name, model, color){
    this.name = name;
    this.model = model;
    this.color = color;
  }
</script>

8.1.2 定义Object属性

JavaScript可以为对象定义三种类型的属性：私有属性、实例属性和类属性。
（1）私有属性的定义
私有属性只能在构造函数内部定义与使用。

<script>
  function car(name, model, color){
    this.name = name;
    this.model = model;
    this.color = color;
    
    var msg = "品牌：" + car.name + "\n型号：" + car.model + "\n颜色：" + car.color;
  }
  var car = new car("Mercedes Benz", "GLC 300", "White");
  alert("您的爱车：" + car.name + "\n型号：" + car.model + "\n颜色：" + car.color);
  alert(car.showMsg()); //undefined
</script>

（2）实例属性的定义
实例属性定义，也存在两种方式：prototype方式（原型方式）和this方式。实例属性必须通过对象的实例进行引用
prototype方式（原型方式）：functionName.prototype.propertyName=value;

<script>
  function car(name, model, color){
    car.prototype.name = name;
    car.prototype.model = model;
    car.prototype.color = color;
  }
  var car = new car("Mercedes Benz", "GLC 300", "White");
  alert("您的爱车：" + car.name + "\n型号：" + car.model + "\n颜色：" + car.color);
</script>

this方式：this.propertyName=value;

<script>
  function car(name, model, color){
    this.name = name;
    this.model = model;
    this.color = color;
  }
  var car = new car("Mercedes Benz", "GLC 300", "White");
  alert("您的爱车：" + car.name + "\n型号：" + car.model + "\n颜色：" + car.color);
</script>

（3）类属性的定义
类属性可以直接通过类名进行引用。

<script>
  function car(){};
  car.name = "Mercedes Benz";
  car.model = "GLC 300";
  car.color = "White";
  alert("您的爱车：" + car.name + "\n型号：" + car.model + "\n颜色：" + car.color);
</script>

8.1.3 取得Object的属性

取得Object属性值也有两种方式：
（1）使用.运算符（常用）

<script>
  var car = {}; //使用字面量及传统赋值方式，字面量声明为空对象
  car.name = "Mercedes Benz";
  car.model = "GLC 300";
  car.color = "White";
  alert("您的爱车：" + car.name + "\n型号：" + car.model + "\n颜色：" + car.color);
</script>

<script>
  function car(name, model, color){
    this.name = name;
    this.model = model;
    this.color = color;
  }
  var car = new car("Mercedes Benz", "GLC 300", "White");
  alert("您的爱车：" + car.name + "\n型号：" + car.model + "\n颜色：" + car.color);
</script>

（2）使用[ ]运算符

<script>
  var car = {}; //使用字面量及传统赋值方式，字面量声明为空对象
  car.name = "Mercedes Benz";
  car.model = "GLC 300";
  car.color = "White";

  alert("您的爱车：" + car["name"] + "\n型号：" + car["model"] + "\n颜色：" + car["color"]);
</script>

8.1.4 创建Object的方法

JS中可以为对象定义三种类型的方法：私有方法、实例方法和类方法，与Java类似：
 私有方法只能在对象内部使用
 实例方法必须在对象实例化后才能使用
 类方法可以直接通过类名去使用
（1）私有方法
私有方法必须在构造函数体内定义，而且只能在构造函数体内使用。

<script>
  function car(name, model, color){
    this.name = name;
    this.model = model;
    this.color = color;
    
    function getCar(){
      return "品牌：" + name + "\n型号：" + model + "\n颜色：" + color;
    }
    this.carInfo = getCar();
  }
  
  var carObj = new car("Mercedes Benz", "GLC 300", "White");
  alert(carObj.carInfo);
</script>

（2）实例方法
实例方法必须在对象实例化后才能使用。定义实例方法有两种方式：prototype方式（原型方式）和this方式。
prototype方式（原型方式）

<script>
  function car(name, model, color){
    car.prototype.name = name;
    car.prototype.model = model;
    car.prototype.color = color;
    
    car.prototype.getCarInfo = function(){
      return "品牌：" + name + "\n型号：" + model + "\n颜色：" + color;
    }
  }
  var car = new car("Mercedes Benz", "GLC 300", "White");
  alert(car.getCarInfo());
</script>

this方式

<script>
  function car(name, model, color){
    this.name = name;
    this.model = model;
    this.color = color;
    
    this.getCarInfo = function(){
      return "品牌：" + name + "\n型号：" + model + "\n颜色：" + color;
    }
  }
  var car = new car("Mercedes Benz", "GLC 300", "White");
  alert(car.getCarInfo());
</script>

（3）类方法
类方法需要在构造函数外面定义，可以直接通过构造函数名对其进行引用。

<script>
  function car(){};
  car.getCarInfo = function(name, model, color){
    return "品牌：" + name + "\n型号：" + model + "\n颜色：" + color;
  }
  
  alert(car.getCarInfo("Mercedes Benz", "GLC 300", "White"));
</script>

8.2 Array数组

除了Object类型之外，Array类型是JavaScript最常用的类型。而且JavaScript中的Array类型和其他语言中的数组有着很大的区别。虽然数组都是有序排列，但JavaScript中的数组每个元素可以保存任何类型。JavaScript中数组的大小也是可以调整的。

8.2.1 创建数组

创建Array类型有两种方式：第一种是new运算符，第二种是字面量。
（1）使用new关键字创建数组

<script>
  var car = new Array();    //创建了一个数组
  var car = new Array(10);  //创建一个包含10个元素的数组
  var car = new Array("Mercedes Benz","BMW","LAND ROVER","Audi");   //创建一个数组并分配好了元素
</script>

（2）使用字面量创建数组

<script>
  var car = []; //创建了一个数组
  var car = ["Mercedes Benz","BMW","LAND ROVER","Audi"];    //创建一个数组并分配好了元素
</script>

8.2.2 读取数组

读取数组可使用索引下标来读取数组的值。

<script>
  var car = new Array("Mercedes Benz","BMW","LAND ROVER","Audi");
  for(var i=0; i<car.length; i++){
    document.write(car[i]+"<br/>");
  }
</script>

8.2.3 数组中的方法

如上面所说，数组也是一种对象，所以也具有很多内置的方法。
（1）栈方法
JavaScript数组提供了一种让数组的行为类似于其他数据结构的方法。也就是说，可以让数组像栈一样，可以限制插入和删除项的数据结构。栈是一种数据结构(后进先出)，也就是说最新添加的元素最早被移除。而栈中元素的插入(或叫推入)和移除(或叫弹出)，只发生在一个位置——栈的顶部。JavaScript为数组专门提供了push()和pop()方法。

数组

push()方法可以接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后数组的长度。而pop()方法则从数组末尾移除最后一个元素，减少数组的length值，然后返回移除的元素。

<script>
  var car = new Array("Mercedes Benz","BMW","LAND ROVER","Audi");
  car.push("Ford");
  alert(car.join('|'));
  car.pop();
  alert(car.join('|'));
</script>

（2）队列方法
栈方法是后进先出，而队列方法是先进先出。队列在数组的末端添加元素，从数组的前端移除元素。通过push()向数组末端添加一个元素，然后通过shift()方法从数组前端移除一个元素。

<script>
  var car = new Array("Mercedes Benz","BMW","LAND ROVER","Audi");
  car.push("Ford");
  alert(car.join('|'));
  car.shift();
  alert(car.join('|'));
</script>

JavaScript还为数组提供了一个unshift()方法，它和shift()方法的功能完全相反。unshift()方法为数组的前端添加一个元素。

<script>
  var car = new Array("Mercedes Benz","BMW","LAND ROVER","Audi");
  car.unshift("Ford");
  alert(car.join('|'));
  car.shift();
</script>

注意：IE浏览器对unshift()方法总是返回undefined而不是数组的新长度
（3）排序方法

<script>
  var car = new Array(2,4,5,1,3,10);
  alert(car.sort(function(a,b){
    return a-b; //升序
  }));
  
  alert(car.sort(function(a,b){
    return b-a; //降序
  }));
</script>

第九章 Function类型

在JavaScript中，Function(函数)类型实际上是对象。每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针。

9.1 函数的声明

（1）普通函数的声明

<script>
  function sum(num1, num2){
    return num1 + num2;
  }
</script>

（2）使用变量初始化函数

<script>
  var sum = function(num1, num2){
    return num1 + num2;
  }
</script>

9.2 作为值的函数

JavaScript中的函数名本身就是变量，所以函数也可以作为值来使用。也就是说，不仅可以像传递参数一样把一个函数传递给另一个函数，而且可以将一个函数作为另一个函数的结果返回。

<script>
  function getResult(sum, num){
    return sum(num);
  }
  
  function sum(num){
    return num + 10;
  }
  
  var result = getResult(sum, 10); //将sum函数作为参数传递给getResult函数
  alert(result);
</script>

9.3 函数内部属性

在函数内部，有两个特殊的对象：arguments和this。arguments是一个类数组对象，包含着传入函数中的所有参数，主要用途是保存函数参数。但这个对象还有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。

<script>
  function recursion(num) {
    if (num <= 1) {
      return 1;
    } else {
      return num * recursion(num-1); //一个简单的递归
    }
  }
  
  var result = recursion(5);
  alert(result);
</script>

<script>
  function recursion(num) {
    if (num <= 1) {
      return 1;
    } else {
      return num * arguments.callee(num-1);
    }
  }
  
  var result = recursion(5);
  alert(result);
</script>

function sum(num1, num2, num3){
  alert(arguments.length);
  return num1 + num2 + num3;
}

函数内部另一个特殊对象是this，其行为与Java和C#中的this大致相似。换句话说，this引用的是函数据以执行操作的对象，或者说函数调用语句所处的那个作用域。PS：当在全局作用域中调用函数时，this对象引用的就是window。

<script>
  window.color = "red";
  var car = {
    brand: "Mercedes Benz",
    color: "white",
    drive: function(){
      alert(this.brand + " " + this.color + " is driving."); //这里的color引用的是具备的color
    }
  };
  
  car.drive();
  alert(this.color); //这个color属性引用的是全局的color
</script>

<script>
  window.color = "red";
  window.brand = "BMW";
  var car = {
    brand: "Mercedes Benz",
    color: "white"
  };
  
  function drive () {
    alert(this.brand + " " + this.color + " is driving.");
  }
  drive(); //这里的color和brand属性引用的是全局的color和brand
  car.drive = drive;
  car.drive(); //这里的color和brand属性引用的是局部的color和brand
</script>