JavaScript笔记

1 JavaScript 基础

HTML定义了网页的基本内容，CSS3为网页加上了华美的服装，而JavaScript则是来控制网页的行为。

1.1 JavaScript 简介

JavaScript 是一种直译式脚本语言（代码不进行预编译），是一种动态类型、弱类型、基于原型的语言，内置支持类型，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。

页面中使用 JavaScript 的方法

1．HTML 标签中内嵌 JavaScript

<button onclick="JavaScript:alert('Hello JavaScript！')">点我</button>

2．HTML 页面中直接使用 JavaScript

<script type="text/javascript">
// JavaScript 代码
</script>

3．引用外部 JavaScript 文件

<script language="JavaScript" src=" JavaScript 文件路径"></script>

注意：
页面中 JavaScript 代码与引用 JavaScript 代码可以嵌入到 HTML 页面的任何位置，但是位置不同会影响到 JavaScript 代码的执行顺序。
例如，<script>在 body 前面，会在页面加载之前执行 JavaScript 代码。
页面中 JavaScript 代码使用 type="text/javascript"或 language= "JavaScript"引用外部的JavaScript 文件，但是这两个属性都可以省略不写。
引用外部 JavaScript 文件的<script></script>标签必须成对出现，且标签内部不能有任何代码。

1.2 JavaScript 变量

变量是学习一门语言的基础，JavaScript 中有六种基本数据类型。由于 JavaScript 又是一门弱类型的语言，所以在声明变量的时候不需要声明变量的数据类型，统一使用 var 关键字声明。变量的具体类型取决于变量所赋值的类型。

1.2.1 变量的声明

变量就是程序中用于存储数据的容器，JavaScript 中的变量可以直接存放一个值，也可存放一个表达式。变量有三种声明方式：

1. 使用 var 声明的变量
   使用 var 声明的变量只在当前函数作用域有效，在其他作用域无法使用。

var width1 = 10;

2. 不使用 var，直接赋值声明变量
   在 JavaScript 中，声明变量也可以不使用 var 关键字，直接通过赋值声明变量。但是这种声明变量的方式默认为全局变量，在整个 JavaScript 文件中都有效。

width = 11;

3. 同一声明语句同时声明多个变量
   变量之间用英文逗号分隔，但是每个变量需要单独进行赋值。例如，在下面的式子中，只有 c 的值为 1，a 和 b 均为 undefined（未定义）。

var a,b,c=1;
// 但是下列写法，a、b、c 的值都为 1，代码如下： 
var a=1,b=1,c=1;

1.2.2 注意事项与命名规范

1. 声明变量的注意事项

1）JavaScript 中所有变量类型声明均使用 var 关键字。变量的具体数据类型取决于给变
量赋值的类型。例如：

// 都是使用 var 声明的变量，变量 a 为数字，变量 b 为字符串
var a = 10;
var b = "杰瑞教育";

2）同一变量可以进行多次不同赋值，每次重新赋值时会修改变量的数据类型。例如：

// 变量 a 在声明时为整形，但是在第二次赋值时成了字符串
var a= 10;
a = "杰瑞教育";

3）变量可以使用 var 声明，也可以直接声明。区别是不使用 var，默认为全局变量。代
码示例如下：

  <script type="text/javascript">
    /*声明一个函数，目前稍作了解*/
    !(function func() {
      var a = 1; // 函数中使用 var 声明变量 a
      b = 1; // 函数中不用 var 声明变量 b
    })();
    /* console.log 控制台打印语句 */
    console.log(b); // b 不用 var 声明为全局变量，函数外可以访问
    console.log(a); // a 使用 var 声明为局部变量，只能在函数中使用，函数外访问报错
  </script>

4）同一变量名可以多次用 var 声明，但是并没有任何含义，也不会报错。第二次之后的声明只会被理解为赋值。例如：

// 同一变量 a，多次使用 var 声明，不会报错，但是没有任何含义
var a = 10;
var a = "13";

2. 变量的命名规范

1）变量名只能由字母、数字、下画线、$ 组成，且开头不能是数字。
2）变量区分大小写，大写字母与小写字母为不同变量。
3）变量名命名要符合两大法则之一。
① 小驼峰法则：变量首字母为小写，之后每个单词首字母大写（常用）。
② 匈牙利命名法：变量所有字母都小写，单词之间用下画线分隔。
例如：
helloJavaScript 正确写法（小驼峰法则）√
hello_java_script 正确写法（匈牙利命名法）√
hellojavascript 错误写法×
4）在给变量命名时应该做到“见名知意”，尽量使用能看懂含义的单词，而不要用没有任何语义的字母或符号。
5）变量命名不能使用 JavaScript 中的关键字，如 NaN、Undefined 等。
注意：命名规范基本通用，所有程序员在命名时都会遵守这样的规则

3. 变量的数据类型

JavaScript 拥有很多数据类型，但是基本数据类型只有六种：

• 字符串（string）
• 数字（number）
• 布尔（boolean）
• 未赋值（undefined）
• 空对象指针（null)
• 对象（Object）

内建对象，宿主对象，自定义对象
使用 typeof 运算符来确定 JavaScript 变量的数据类型。（直接当作方法使用即可，会在后面详细解释）
注：

• NaN 的数据类型是 数值
• 数组 的数据类型是 对象
• 日期 的数据类型是 对象
• null 的数据类型是 对象
• 未定义变量 的数据类型是 undefined
• 未赋值变量 的数据类型也是 undefined
  无法使用 typeof 去判断 JavaScript 对象是否是数组（或日期）。

1.3 JavaScript 中的变量函数

1.3.1 Number：将变量转为数值类型

1. 字符串类型转数值
   1）字符串为纯数值字符串，会转为对应的数字。
   2）字符串为空字符串时，会转为 0。
   3）字符串包含其他非数字字符时，不能转换。
2. 布尔 Boolean 类型转数值
   1）true 转换为 1。
   2）false 转换为 0。
3. Null 与 Undefined 转数值
   1）Null 转换为 0。
   2）Undefined 转换为 NaN
4. Object 类型转数值
   先调用 ValueOf 方法，确定函数是否有返回值，再根据上述各种情况判断，

1.3.2 isNaN：检测变量是否为 NaN

isNaN 函数的作用是判断一个变量或常量是否为 NaN（非数值）。使用 isNaN 进行判断时，会尝试使用 Number()函数进行转换，如果能转换为数字，则不是非数值，结果为false。

1. 纯数字字符串，检测结果为 false
2. 空字符串，检测结果为 false
3. 包含其他字符，检测结果为 true
4. 布尔类型，检测结果为 false

1.3.3 parseInt：将字符串转为整型

parseInt 函数的作用是将字符串类型转为整数数值类型，即 parseInt 函数可解析一个字符串，并返回一个整数。

1. 空字符串
   不能转换空字符串，输出 NaN。
2. 纯数值字符串
   可以进行转换，但转化小数时，会直接抹掉小数点，不进行四舍五入。
3. 包含其他字符的字符串
   截取第一个非数值字符前的数值部分进行输出。
   注意：parseInt 函数只能转换 String 类型，对 Boolean、null、Undefined 进行转换结果均为 NaN。

1.3.4 parseFloat：将字符串转为浮点型

parseFloat 函数的作用是将字符串转为小数数值类型，使用方式同 parseInt 类似，唯一不同的是，在转化整数字符串时，保留整数。但是，当转化包含小数点的字符串时，保留小数点。
注意：parseFloat 同样也是只能转换 String 类型，对 Boolean、null、Undefined 进行转换结果均为 NaN。

1.3.5 typeof：变量类型检测

typeof 函数是 JavaScript 中非常常用的一个函数，它的主要作用是用来检测一个变量的数据类型，传入一个变量，返回变量所属的数据类型。一般分为以下几种情况：
1）未定义：数据类型为 Undefined。
2）数值：数据类型为 Number。
3）字符串：数据类型为 String。
4）True / False：数据类型为 Boolean。
5）Null /对象：数据类型为 Object。
6）函数：数据类型为 function。
为了方便使用，JavaScript 在语法上为 typeof 函数提供了两种常用写法，分别是函数写
法和指令写法。

// 1）函数写法：需要保留()，变量通过()传入。
typeof("jredu"); // 函数调用方式需要将变量通过函数后面的()传入
// 2）指令写法：可以省略()，直接将变量紧跟 typeof。
typeof "jredu"; // 指令调用方式可以省略()，直接将变量紧跟 typeof

1.4 JavaScript 中的输入输出

1.4.1 document.write：文档中打印输出

在 JavaScript 中，document.write()方法常用来网页向文档中输出内容。document.write()输出语句将“()”中的内容打印在浏览器中，使用时需注意，除变量或常量以外的任何内容，打印时必须放到"“中，变量或常量必须到”"外。
1．基本语法
document.write(“输出内容”);
2．拼接字符串
当打印输出的内容同时由多部分组成时，每部分用“+”符号链接。

var str="你好" ;
document.write(str+" "+"world"); /* 在网页中输出的结果为：你好 world */

注意：拼接字符串，用加号"+"；字符串用双引号""包裹起来。
还可以通过 document.write()方法来输出 html 标签，也可以将 CSS 样式写入到标签中，注意书写格式，及引号之间的转义。

1.4. 2 alert：浏览器弹窗输出

JavaScript 的 alert 函数是专门用来弹窗显示的，它带有一个“确定”按钮。浏览器的 alert()弹窗警告，()中的语句的使用方式与 document.write()括号中的相同。

1.4. 3 prompt ：浏览器弹窗输入

弹窗输入提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后单击“确认”或“取消”按钮才能继续操纵。如果用户单击“确认”按钮，那么返回值为输入的值。如果用户单击“取消”按钮，那么返回值为 null。
基本语法如下：

prompt("请输入您的年龄：","20 岁");

prompt 包含两部分参数：第一部分是输入框上面的提示信息，可选；第二部分是输入框里面的默认信息，可选。两部分之间用逗号分隔，只写一部分时，默认为提示信息。
注意：弹窗默认接收输入的内容，为字符串 String 格式。
还可以定义变量来接收输入内容，例如

var name = prompt("请输入您的名字：")

单击“确定”按钮，name 赋值为所输入的字符串；单击“取消”按钮，变量 name 赋值为 null。

1.4. 4 confirm：浏览器弹窗确认

当用户进行手动操作时，浏览器弹窗确认可以一定程度上避免用户误删操作造成的数据丢失。比如数据的删除操作，当用户单击“删除”按钮时，会弹出一个确定对话框，如果用户单击“确定”按钮，执行删除操作；如果用户单击“取消”按钮，则不执行删除操作。

1.4.5 JavaScript 中的注释

JavaScript 中的注释有两种方式，一种是单行注释；另一种是多行注释。使用注释有助
于提高代码可读性，可以方便调试。
1、单行注释
以//开头，可以单独一行，也可以放在代码后，在同一行中。
2、多行注释
以 /* 开始，以 */ 结尾，经常用来对一个函数或语句块进行解释说明。
3、文档注释
以 ‘/**’ 开始，以 */ 结尾，使用上与多行注释类似，但是功能比多行注释强大。当在一个函数上方使用文档注释声明时，调用函数时可以看到注释内容。
使用文档注释后，通过调用函数，可以看到注释内容。

2 BOM 与 DOM

2.1 BOM（浏览器对象模型）

浏览器对象模型（Browser Object Model，BOM）使 JavaScript 有能力与浏览器“对话”。由于现代浏览器几乎实现了 JavaScript 交互性方面的相同方法和属性，所以常被认为BOM 的方法和属性。BOM 由多个对象组成，其中代表浏览器窗口的 window 对象是 BOM的顶层对象，其他对象都是该对象的子对象，

2.1. 1 BOM对象

window：—— 代表整个浏览器的窗口，也是网页的全局变量
Navigator：—— 代表当前浏览器的信息，通过该对象可以识别不同的浏览器
userAgent() —— 获取浏览器的类型 /firefox/火狐、 /chrome/谷歌、 /msie/IE浏览器
History：—— 代表浏览器的历史记录，不能获取具体的历史记录，只能操作浏览器向前或向后翻页，且只在当次访问时有效
1、length —— 属性，可以获取到当成访问的链接数量
2、back() —— 可以用来退回上一个页面，作用和浏览器的回退按钮一样
3、forward() —— 可以跳转到下一个页面，作用和浏览器的前进按钮一样
Location：—— 代表当前浏览器的地址栏信息
1、assign() —— 用来跳转到其他的页面，作用和直接修改 location 一样
2、reload() —— 用于重新加载页面，作用和刷新按钮一样，传递一个true强制刷新页面
3、replace() —— 使用新页面代替当前页面，不会产生历史记录，无法回退
Screen：—— 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

2.1.2 window 对象的常用方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

window对象手册

2.2 DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型。Document 对象使用户可以从脚
本中对 HTML 页面中的所有元素进行访问。另外，Document 对象是 window 对象的一部
分，可通过 window.document 属性对其进行访问。

2.2.1 DOM 树结构

DOM 节点分为三大类：元素节点、文本节点、属性节点。其中，元素节点又叫标签节点，指文档中的各种 HTML 标签；文本节点和属性节点为元素节点的两个子节点，分别表示标签中的文字和标签的属性。通过 getElement 系列方法，可以取到元素节点。

2.2.2 DOM 查询

一、通过document对象调用，获取元素节点
1、getElementById() ——通过id属性获取一个元素节点对象
2、getElementsByTagName() ——通过标签名获取一组元素节点对象
3、getElementsByName() ——通过name属性获取一组元素节点对象
注：querySelector() ——根据一个CSS选择器来查询一个元素节点对象(适用于IE8)
——如果满足条件的元素有多个，仅能查询满足条件的第一个元素
querySelectorAll() ——与querySelector()类似，但会将所查询的元素封入一个数组中
二、通过具体的元素节点调用，获取元素节点的子节点
1、getElementsByTagName() ——方法，返回当前节点的指定标 签名后代节点
2、childNodes ——属性，表示当前节点的所有子节点（包括空白文本）
3、firstChild ——属性，表示当前节点的第一个子节点（包括空白文本）
4、lastChild ——属性，表示当前节点的最后一个子节点（包括空白文本）
5、children ——属性，表示当前元素的所有子元素（）
三、通过具体节点的调用，获取父节点和兄弟节点
1、parentNode ——属性，表示当前节点的父节点
2、previousSibling ——属性，表示当前节点的前一个兄弟的节点
3、nextSibling ——属性，表示当前节点的后一个兄弟节点
获取样式的方法：
getComputedStyle(要获取的样式元素 ，null )[样式名]
currentStyle[样式名]（IE8的方法）

3 JavaScript 事件

事件是由访问 Web 页面的用户引起的一系列操作，比如用户敲击键盘或按下鼠标按键时，或者鼠标移到某个位置时，都会产生事件。

3.1 JavaScript 的事件

JavaScript 中，事件是一个非常重要的概念。由于 JavaScript 是一门基于事件的语
言，所以 JavaScript 中的很多操作都离不开事件的支持。比如之前提到的 onclick 就是一种鼠
标事件，而 JavaScript 中的事件共分为鼠标事件、键盘事件、HTML 事件三大类。

3.1.1 鼠标事件

鼠标事件，顾名思义就是需要通过鼠标进行触发的事件。这是在 JavaScript 中最常用的一种事件类型，也是使用起来最简单的一种事件类型。

事件	发生事件
onclick	用户单击对象时
ondblclick	用户双击对象时
onmouseover	鼠标移到某个元素之上时
onmouseout	鼠标移出某个元素时
onmousemove	鼠标被移动
onmousedown	鼠标按键被按下
onmouseup	鼠标按键被松开

事件的使用通常是需要配合函数的调用，可以给标签添加事件属性，当标签触发事件的时候调用一个函数。

<button onclick="func()">单击我触发事件</button>
<script type="text/javascript">
	function func(){
		alert("触发按钮的 onclick 事件");
	}
</script>

还可以通过选中一个标签节点，通过 JavaScript 动态绑定一个匿名函数触发事件。

<button id="btn">单击我触发事件</button>
<script type="text/javascript">
	var btn = document.getElementById("btn");
	btn.onclick = function(){
		alert("触发按钮的 onclick 事件");
	}
</script>

3.1.2 键盘事件

键盘事件是指通过按下键盘按键所触发的事件。按下一个按键并抬起的过程，实际上可以分为三个阶段。

事 件	发生时间
onkeydown	键盘按下去触发
onkeypress	键盘按下并松开的瞬间触发
onkeyup	键盘抬起时触发

键盘按键注意事项：
（1）三个事件的执行顺序
键盘事件一共有三种类型。这三种类型是按顺序执行的，依次是 onkeydown、onkeypress、onkeyup。
（2）长按时触发的事件
当长按一个按键时，会不断触发 onkeydown 和 onkeypress，只有按键抬起以后才会触发onkeyup 事件。
（3）onkeydown/onkeyup 和 onkeypress 的区别

1. onkeypress 只能捕获字母、数字、符号键，不能捕获功能键（如 Enter 键、F1～F12键等）；onkeydown/onkeyup 基本可以捕获所有功能键（特殊键盘的某些按键除外）。
2. 捕获字母键时，onkeypress 可以区分大小写，onkeydown 和 onkeyup 不区分大小写。
3. 捕获数组键时，onkeydown/onkeyup 可以区分主键盘和小键盘，onkeypresg 不能够
   区分。

（4）通常将键盘事件声明在 document 上
在使用键盘事件时，通常会直接将键盘事件监测到 document 上，而且 onkeydown 和 onkeyup 通常监测一个即可。
判断键盘按键：
在使用键盘事件时，除了需要检测触发的是 onkeydown 还是 onkeyup，更重要的是判断用户按下去的是哪一个按键。 Enter 键为例，可以判断用户按键是否为 Enter 键。

document.onkeydown = function(e){ // 触发事件时，会将事件因子通过事件触发函数传入
var evn = e||window.event; // 用两种方法兼容所有浏览器取到事件因子
var code = evn.keyCode||evn.which||evn.charCode; // 使用兼容方式取到按键 ASCII 编码
if(code==13){
	alert(“您按下了 Enter 键”); // 用户按下 Enter 键后需要执行的操作
} }

上述代码中，Enter 键的 ASCII 码值为 13。常用的一些 ASCII 码值如下表所示：

ASCII 码值	按键或含义
0	空字符（Null）
13	Enter 键
27	Esc 键
32	空格键
48~57	数字键 0~9
65~90	大写字母 A~Z
97~122	小写字母 a~z
127	Delete 键

3.1.3 HTML 事件

鼠标事件和键盘事件是需要用户通过鼠标或键盘才能触发的事件。在 JavaScript 中还有一类非常重要的事件——HTML 事件，表示网页中的 HTML 标签发生变化的时候自动触发的事件。最常用的是 window.onload 事件，表示文档加载成功以后再执行 JavaScript 代码。

事件	发生事件
onload	文档或图像加载后
onunload	文档卸载后，即退出页面时
onblur	元素失去焦点
onselect	文本被选中
oninput	元素在用户输入时触发
onchange	内容被改变
onfocus	元素获得焦点时
onsubmit	表单提交时
onreset	重置按钮被单击
onresize	窗口被重新调整大小时
onscroll	当文档被滚动时发生的事件
ondrag	当元素正在拖动时触发的事件
ondragstart	当元素开始被拖动的时候触发的事件
ondragover	元素被拖动到指定区域的时候触发的事件
ondrop	当放置被拖动元素时触发的事件

3.1.4 event 事件因子

取到事件因子有两种方式，除了键盘事件，还可以在任何事件的触发函数中使用window.event 取到事件因子对象。

<button id="btn">单击我查看事件因子</button>
<script type="text/javascript">
	var btn = document.getElementById("btn");
	btn.onclick = function(e){
	var evn = e || window.event;
		console.log(evn);
	} 
</script>

如上述代码所示，给按钮添加的是 onclick 鼠标事件，但依然可以在鼠标事件的函数中查看事件因子。
除了 keyCode 属性取到 ASCII 码值之外，event 对象还有很多属性。event 对象常用的属性如下表：

属 性 名	说 明
keyCode	检测键盘事件相对应的 Unicode 字符码
srcElement	返回触发事件的元素
type	返回当前 event 对象表示的事件名称
button	检查按下的鼠标键
x,y	返回鼠标相对于 css 属性中有 position 属性的上级元素的 x 和 y 坐标
clientX,clientY	返回鼠标在浏览器窗口区域中的 x 和 y 坐标
screenX,screenY	返回鼠标相对于用户屏幕中的 x 和 y 坐标
altKey	检查 Alt 键的状态。当 Alt 键按下时，值为 True；否则为 False
ctrlKey	检查 Ctrl 键的状态。当 Ctrl 键按下时，值为 True；否则为 False
shiftKey	检查 Shift 键的状态。当 Shift 键按下时，值为 True；否则为 False
toElement	检测 onmouseover 和 onmouseout 事件发生时，鼠标所进入的元素
fromElement	检测 onmouseover 和 onmouseout 事件发生时，鼠标所离开的元素

注意：检测鼠标按键的 button 属性仅用于 onmousedown、onmouseup 和 onmousemove事件。对于其他事件，不管鼠标状态如何，都返回 0（比如 onclick）。它有 8 个属性值，分别是 0 没按键、1 按左键、2 按右键、3 按左右键、4 按中间键、5 按左键和中间键、6 按右键和中间键、7 按所有的键。

3.2 JavaScript 的事件模型

JavaScript 中，事件的绑定方式被称为“事件模型”。之前小节讲述的两种绑定事件方式都属于 DOM0 事件模型，除此之外还有一种被称为 DOM2 事件模型的绑定方式。

3.2.1 DOM0 事件模型

1、内联模型
内联模型又称为“行内绑定”，其绑定事件的方式是直接将函数名作为 HTML 标签某个事件的属性值。

<button onclick="func()">按钮</button>

缺点：违反 W3C 关于 HTML 与 JavaScript 分离的基本原则。
2、脚本模型
脚本模型又称为“动态绑定”，其绑定的方式是通过在 JavaScript 中选中一个节点，并给节点的 onlick 事件添加监听函数。

// 给 window 对象添加 onload 事件
window.onload = function(){}
// 选中 div 节点，并添加 onlick 事件
document.getElementById("div").onlick = function(){}

优点：实现了 HTML 与 JavaScript 分离，符合 W3C 的基本原则。
缺点：
1）同一节点只能绑定一个同类型事件，如果绑定多次，则只有最后一次生效。
2）一旦绑定事件，无法取消事件绑定。

3.2.1 DOM2 事件模型

DOM0 绑定事件的两种方式都有其局限性。为了解决 DOM0 事件模型所存在的局限性，DOM2 事件模型应运而生。
1、 添加事件绑定
DOM2 事件模型的绑定相对于 DOM0 要稍微复杂一些，并且针对浏览器版本的不同，有两种不同的绑定方式
1）针对 IE8 之前的浏览器，使用 attachEvent()进行事件绑定。基本语法如下：

var btn = document.getElementById("btn");
btn.attachEvent("onclick",function(){
	// oncick 触发时执行的回调函数
});

其中，attachEvent 接收两个参数：
① 第一个参数是触发的事件类型，主要事件名称需要用“on”开头。
② 第二个参数是触发事件时执行的回调函数。 2）除 IE8 之外的其他浏览器，统一使用 W3C 规范，使用 addEventListener()进行事件绑定。基本语法如下：

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
	// click 触发是执行的回调函数
},true/false);

其中，addEventListener 接收 3 个参数：
① 第一个参数是触发的事件类型，主要事件名称不需要用“on”开头。
② 第二个参数是触发事件时执行的回调函数。
③ 第三个参数是模型参数，表示事件冒泡或事件捕获，false（默认）表示事件冒泡，true 表示事件捕获。

3）为了能够兼容各种浏览器，可以采用兼容写法进行操作。基本语法如下：

var btn = document.getElementById("btn");
if(btn.attachEvent){
	// 判断浏览器如果支持 attachEvent，就用 attachEvent 进行绑定
	btn.attachEvent();
}else{
	// 如果浏览器不支持 attachEvent，就用 addEventListener 进行绑定
	btn.addEventListener();
}

2、取消事件绑定
DOM2 和 DOM0 相比有一个非常重要的区别，就是使用 DOM2 绑定的事件可以取消事件绑定。如果要取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，而不能使用匿名函数。基本语法如下：

var btn = document.getElementById("btn");
// IE8 之前
btn.attachEvent("onlick",clickFunction);
// 其他浏览器
btn.addEventListener("click",clickFunction,true);
function clickFunction(){
// 单击事件的回调函数
}

为什么绑定的时候不能使用匿名函数作为回调函数呢？主要原因在于取消事件绑定的时候，语法要求必须传入需要取消的函数名。而匿名函数没有函数名，故无法取消。针对不同浏览器，取消事件绑定也有两种不同方式。
1）针对 IE8 之前使用 attachEvent()绑定的事件，可以使用 detachEvent()取消事件绑定。
基本语法如下：

btn.detachEvent("onclick",函数名);

2）针对其他浏览器使用 addEventListener()绑定的事件，可以使用 removeEventListener()
取消事件绑定。基本语法如下：

.removeEventListener("click",函数名);

3、DOM2 事件模型的优点
相比于 DOM0 事件模型，DOM2 的优点主要有以下几条：
1）实现了 HTML 与 JavaScript 的分离，符合 W3C 关于内容与行为分离的要求。
2）使用 DOM2 绑定的事件，可以取消事件绑定。
3）使用 DOM2 可以为同一节点添加多个同类型事件，多个事件可以同时生效，而不会被覆盖掉。

3.3 JavaScript 的事件流模型

JavaScript 中还有一种模型——事件流模型。所所谓的事件流，就是当一个节点触发事件时，事件会从当前节点流向其他节点，而根据事件流动的方向，事件流模型可以分为事件冒泡和事件捕获。基于事件冒泡，又诞生了一种新的事件绑定方式——事件委派。

3.3.1 事件冒泡

事件流指页面接收事件的顺序，当一个事件产生时，该事件传播的过程就是事件流。首先介绍事件流模型中的第一种类型——事件冒泡
1、事件冒泡的概念
当某 DOM 元素触发某事件时，会从当前 DOM 元素开始，逐个触发其祖先元素的同类
型事件，直到 DOM 根节点。

2、触发事件冒泡的情况
1）DOM0 事件模型绑定的事件均为事件冒泡。
2）IE8 之前使用 attachEvent()添加的事件均为事件冒泡。
3）对于其他浏览器使用 addEventListener()添加的事件，当第三个参数为 false 或省略时，为事件冒泡。

3.3.2 事件捕获

事件捕获与事件冒泡类似，只是在事件流的方向上与事件冒泡恰恰相反。
1、事件捕获的概念
当某 DOM 元素触发某事件时，会从根节点开始，逐个触发其祖先元素的同类型事件，直到当前节点。

2、触发事件捕获的情况
相比于事件冒泡，事件捕获只有一种方式能够触发，即 IE8 之外的其他浏览器使用 addEventListener() 添加的事件，当第三个参数为 true 时，为事件捕获。

3.3.3 事件委派

基于事件冒泡诞生了一种新的事件绑定方式——事件委派。
1、事件委派的概念
事件委派也叫事件委托，是将本该添加在节点自身的事件，选择添加到其父节点上，同时委派给当前元素来执行。
2、事件委派的原理
事件委派的原理就是事件冒泡。由于给多个子元素添加事件，会沿着事件冒泡流触发其父元素的同类型事件，所以可以直接将事件添加在父元素上，并在事件函数中判断单击的是哪一个子元素，进而进行具体操作。
3、原生 JavaScript 实现事件委派
在开发过程中，事件委派的实现通常使用 JQuery 框架进行，由于现在没有学习JQuery，所以选择使用原生 JavaScript 来实现事件委派功能。
4、事件委派的作用
（1）提高性能
将事件绑定在父节点上，只需要绑定一个事件就可以；而将事件依次添加给子节点，则需要绑定多个事件。因此，事件委派具有更优的性能。
（2）新添加的元素会具有同类型元素的事件
如果使用其他方式绑定事件，当页面新增同类的节点时，这些节点不会获得之前绑定的事件。但是，使用事件委派可以让新添加的元素获得之前绑定的事件。

3.3.4 阻止事件冒泡

事件委派的原理就是事件冒泡，但并不是所有的事件冒泡都是对开发有利的，实际开发中，大多情况并不想让子元素的事件影响到父元素。因此，阻止事件冒泡的传播也是一种重要方法。
对于阻止事件冒泡的写法，由于浏览器的兼容性问题，存在两种不同的写法。对于 IE8以前的浏览器，可以将 e.cancelBubble 属性设为 true；对于其他浏览器，则可以调用e.stopPropagation()方法。

function myParagraphEventHandler(e) {
	e = e || window.event;
	if (e.stopPropagation) {
		e.stopPropagation(); // IE8 以外的浏览器
	} else {
		e.cancelBubble = true; // IE8 之前
	} 
}

3.3.5 阻止默认事件

除了事件冒泡，还有一种情况存在妨碍开发的问题，那就是某些标签的默认事件。比 如，a 标签自带跳转页面功能，submit 标签自带提交表单功能，reset 标签自带清除表单功能……这些功能在需要的情况下，都是人们的得力助手。但是，不需要的时候，它们就会影响功能的实现效果。这时候就需要选择取消 HTML 标签的默认事件。
取消默认事件也有两种常用方式。对于 IE8 之前的浏览器，可以将 e.returnValue 属性设为 false；对于 IE8 以外的浏览器，可以调用 e.preventDefault()方法。

function eventHandler(e) {
	e = e || window.event;
	// 阻止默认行为
	if (e.preventDefault) {
		e.preventDefault(); //IE 以外
	} else {
		e.returnValue = false; //IE 
} }

4 数组和对象

4.1 JavaScript 的数组

4.1.1 数组的概念

数组是在内存中连续存储多个有序元素的结构。所谓数组，就是相同数据类型的元素按一定顺序排列的集合，就是把有限个类型相同的变量用一个名字命名，然后用编号区分变量的集合，这个名字称为数组名，编号称为下标。
组成数组的各个变量称为数组的分量，也称为数组的元素。数组是多个相同类型数据的组合，实现对这些数据的统一管理。数组中的元素可以是任何数据类型，包括基本类型和引用类型。数组属于引用类型，数组型数据是对象（object），数组中的每个元素相当于该对象的成员变量。

4.1.2 数组的声明

数组对象可以分为一维数组与二维数组。声明数组的语法分为两种，一种是直接使用方括号声明；另一种是使用 new 关键字声明，实例化（new）一个 array 对象。
1、字面量声明
字面量声明就是直接使用方括号声明，方括号中可以直接传入元素，表示数组的各个
值。

var arr = [];
// JavaScript 中同一数组，可以储存多种不同的数据类型，但一般同一数组只用于存放同一种数据类型。
var arr = [1,"2",true,{"name":"张三"},[1,2]];

2、new 关键字声明
通过 new 关键字实例化一个数组对象，并把这个数组对象的句柄赋值给一个变量。

var arr = new Array(参数); 
// 参数可以有以下三种情况：
// 1）不写，即括号内没有内容，表示声明一个没有指定长度的数组。
var arr = new Array(); 
// 2）写入数值，即数组的长度，表示声明一个指定长度的数组，但是数组的长度随时可变，可追加，最大长度为 0～(232-1)。
var arr = new Array(20); // 声明长度为 20 个数的数组
// 3）写入数组默认的 N 个值，例如 new Array(1,"2",true); 相当于数组有三个默认值[1,"2",true]。
var arr = new Array(“1”,2,true); 

3、引用数据类型和基本数据类型
（1）引用数据类型
（数组或对象）赋值时，将原变量的地址赋给新变量。两个变量实际上操作的是同一份数据，所以修改其中一个变量，另一个会跟着变化。

var arr = new Array(1,2,3); // 创建一个数组 arr，数组是引用数据类型
var brr = arr; // 将 arr 赋值给 brr，实际上是将数组的地址赋值给 brr
brr[0] = "a"; // brr 通过地址修改了数组的第 0 个值
console.log(arr[0]); //再次打印 arr 的第 0 个值，实际上访问的是同一个数组，因此 arr[0]也是"a" 

（2）基本数据类型
赋值时，是将原变量的值赋给新的变量。两个变量属于不同的内存空间，修改其中一个，不会影响另一变量的值。

var a = 10; // 创建一个变量 a，变量是基本数据类型
var b = a; // 将 a 的值赋值给 b
b = 20; // 将 b 的值修改为 20
console.log(a); // a、b 为两个不同的变量，a 的值不会受影响

4.1.3 数组的访问

数组的访问主要分为两种操作，一种是通过数组的下标读取数组的元素值、通过数组下标给数组赋予新值；另一种是通过 JavaScript 提供的方法实现对数组元素的增删操作。
1、数组对象的读写
1）读：通过下标来访问元素。

var arrValue = arr[2]; // 访问数组下标为 2 的元素值，即数组的第三个值

2）写：通过下标来写入元素。

arr[1]= "要赋予新值"; // 给数组下标为 1 的元素赋予新的值，也就是数组的第二个值

2、数组对象的增删
1）delete arr[n]：删除数组的第 n 个值，但数组长度不变，对应位置值变为 Undefined。
2）arr.push(值)：数组最后增加一个值，数组长度加 1，相当于 arr.length += 1。
3）arr.unshift(值)：数组的第 0 位插入一个值，其余位顺延。
4）arr.pop()：删除数组最后一位。与 delete 不同的是，pop 执行后数组长度也会减少一个，相当于 arr.length -= 1。
5）arr.shift()：删除数组第 0 位，长度也会减 1，其余位的下标依次改变。
注意：调用上述方法后，会直接修改原数组的值。

4.1.4 数组常用方法

1、join("separator ")
join()将数组用指定分隔符分隔，连接为字符串。参数为空时，默认用逗号分隔。

var arr1 = arr.join("separator"); 

注意： 参数 separator 表示字符串中元素的分隔符，可以为空，默认为半角逗号，且该方法并不修改原数组，需要返回一个新的变量。

2、concat()
concat()将两个或两个以上的数组连接成一个数组，并返回连接后的数组。原数组不会改变，需要返回一个新的变量。

var newArr = arr.concat(arr1); // 将 arr 与 arr1 连接成新数组
[1,2].concat([3,4],[5,6]) =[1,2,3,4,5,6]; // 连接时，中括号最多拆一层
[1,2].concat([1,2,[3,4]]) =[1,2,1,2,[3,4]]; // 多层中括号，以二维数组形式存在

注意： 该方法并不会改变现有的数组，而是返回被连接的多个数组的一个副本，如果多个数组里有值相同的元素，则不会重复出现，而会把重复的元素过滤掉。
3、reverse()
reverse()用于数组翻转，逆序排列，把数组的所有元素顺序反转。

arr.reverse(); // 翻转，使数组中的值倒序输出

注意： 该方法会直接修改数组，而不会创建新的数组。
4、slice(start,end)
slice()截取数组中指定位置的元素，并返回一个新的子数组。

var sliceArr = arr.slice(1,2); 

**注意：**该方法不会改变现有的数组，而是原数组的一个子数组，参数 start 是必选，表示开始下标。start 为负数，表示从末尾开始；-1 表示最后一个元素，依次类推。end 是可选，表示结束下标，如果没有指定，表示到结尾元素。
5、sort(function)
sort()对数组进行排序，默认按照 ASCII 码进行升序排列。如果在()里面传入函数，可以按照数值的大小，自行选择进行升序或者降序排列。

arr.sort(); // 将原数组按照 ASCII 码进行升序排列

注意： 不指定排序函数：按照元素的 ASCII 码值进行升序排列；传入排序函数：默认传入两个参数 a 和 b，如果返回值大于 0，则 a>b，升序排列；如果返回值小于 0，则 a<b，降序排列。语法结构如下：

arr.sort(function(a,b){
//return a-b; // b 在前，a 在后(升序排列)
return b-a; // a 在前，b 在后(降序排列)
});

6、splice()
splice()从数组指定位置删除指定数量的元素，并返回被删除的元素。

arr.splice(2,1); // 删除下标为 2 的值
arr.splice(1,0,"新值"); // 在下标为 1 的位置插入一个新值
arr.splice(2,1,"新值"); // 将下标为 2 的值替换为新值

注意： 该方法会直接修改数组。splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改，而 slice 只是截取原数组的一部分后返回一个子数组，并不会修改原数组。
7、indexOf(value,index) / lastIndexOf(value,index)
1）indexOf(value,index)：返回数组中第一个 value 值对应的下标位置，若未找到，返回-1。

var index1 = arr.indexOf(查询的数值,index); 

2）lastIndexOf(value,index)：返回数组最后一个 value 值对应的下标位置，若未找到，返 回-1。

var index2 = arr.lastIndexOf(查询的数值,index);

注意： 若未指定 index 参数，则默认在数组所有元素中查询。  若指定 index 参数，则从当前 index 开始，向后查询
8、forEach()
forEach()专门用于循环遍历数组。接收一个回调函数，回调函数可以接收两个参数，第一个参数为数组每一项的值，第二个参数为数组的下标。

arr.forEach(function(item,index){
	console.log(item);
});

**9、map() **
map()数组映射。使用方式与 forEach()相同。与 forEach()不同的是，map()可以有 return返回值，表示将原数组的每个值进行操作，返回一个新数组。

var arr1 = arr.map(function( item,index ){ //数组映射
	return item-1; // 将原数组的每个值-1 后，返回
});

4.2 JavaScript 的内置对象

JavaScript 常见的内置对象有 Object、Math、String、Array、Number、Function、Boolean、JSON 等。其中，Object 是所有对象的基类，采用了原型继承方式。

4.2. 1 Boolean：逻辑对象

Boolean（布尔）对象用于取到一个 Boolean 类型的变量。可以使用字面量方式和 new 关键字两种方式取到一个 Boolean 类型的变量。
1、Boolean 的声明
Boolean 变量的声明方式有两种。一种是使用字面量方式声明的变量，使用 typeof 检测是 Boolean 类型；另一种是使用 new 关键字声明的变量，使用 typeof 检测是 Object 类型。

var boolean = true; // 使用字面量方式声明
var newBoolean = new Boolean(false); // 使用 new 关键字声明
console.log(typeof boolean); // 使用 typeof 检测的数据类型为 Boolean
console.log(typeof newBoolean); // 使用 typeof 检测的数据类型为 Object

2、Boolean 转换函数
除了基本的变量声明以外，Boolean()作为一个函数，还可以用于将非布尔值转换为布尔值（true 或者 false）。将 Boolean 对象理解为一个产生逻辑值的对象包装器，如果逻辑对象无初始值或者其值为0、-0、null、""、false、undefined、NaN，那么返回的值为 false；否则，其值为 true。

// 下面的所有的代码行均会创建初始值为 false 的 Boolean 对象
var myBoolean= Boolean();
var myBoolean= Boolean(0);
var myBoolean= Boolean(null);
var myBoolean= Boolean("");
var myBoolean= Boolean(false);
var myBoolean= Boolean(NaN);
// 下面的所有的代码行均会创建初始值为 true 的 Boolean 对象
var myBoolean= Boolean(1);
var myBoolean= Boolean(true);
var myBoolean= Boolean("true");
var myBoolean= Boolean("false");
var myBoolean= Boolean("Bill Gates");

4.2. 2 Number：数字对象

在 JavaScript 中，数字是一种基本的数据类型。在必要时，JavaScript 会自动地在原始数据和对象之间转换。构造函数 Number() 可以不与运算符 new 一起使用，而直接作为转化函数来使用。
1. Number 的声明

var num1 = 10; // 字面量声明
var num2 = new Number(10); // new 关键字声明
console.log(typeof num1); // 使用 typeof 检测的数据类型为 Number
console.log(typeof num2); // 使用 typeof 检测的数据类型为 Object

2. Number 的属性
1）MIN_VALUE：Number 对象的属性，可表示的最小数。

Number.MAX_VALUE; 

2）MAX_VALUE：Number 对象的属性，可表示的最大数。

Number.MIN_VALUE;

3. Number 的方法

1. toString()：Number 对象的方法，将数字转为字符串，相当于 num+""。

var str = num1.toString(); 

使用 typeof 检测 str 的数据类型为 String，说明 toString()方法将 Number 对象转为了字符串 String 对象。

2. toFixed(n)：Number 对象的方法，将数字转为字符串，保留 n 位小数，四舍五入。

var num = new Number(10.128);
console.log(num.toFixed(2)); //保留两位小数 ，结果为 10.13

3. valueOf()：Number 对象的方法，返回 Number 对象的基本数字值。

var num1 = 10;
var str = num1.valueOf();
console.log(str); // 打印结果为 10

4. toLocaleString()：Number 对象的方法，将数字按照本地格式的顺序转为字符串。一般，三个为一组加逗号。

var num1 = 101123128;
var str = num1.toString();
var str = str.toLocaleString()
console.log(str); // 打印结果为 101,123,128

5. toPrecision(n)：Number 对象的方法，将数字格式化为指定长度，n 为不含小数点的所有位数和。

var num1 = 101123128.456123;
var str = num1.toPrecision(10);
console.log(str); // 打印结果为 101123128.5 一共 10 位数

4.2.3 String：字符串对象

字符串是 JavaScript 的一种基本的数据类型。String 对象的 length 属性声明了该字符串中的字符数。String 类定义了大量操作字符串的方法，如从字符串中提取字符或子串，或者检索字符或子串。
1、String 对象的属性
字符串 String 类型的每个实例都有一个 length 属性，表示字符串中的字符个数。由于字符串是不可变的，所以字符串的长度也不可变。

str.length; // 返回字符串的长度

注意：对于字符串来说，最后一个字符的索引是 str.length – 1。

var str = "What's Your Name？";
console.log(str.length); // 打印结果为 17

2、String 对象的方法

1. toLowerCase()：所有字符转为小写。语法结构如下：

var str = str.toLocaleLowerCase(); // 转全小写

2. toUpperCase()：所有字符转为大写。语法结构如下：

var str = str.toLocaleUpperCase(); // 转全大写

3. charAt(n)：截取字符串中第 n 个字符。语法结构如下：

var str = str.charAt(n); // 截取数组的第 n 个字符，相当于 str[n]

4. indexOf(“查询子串”,index)：查询从 index 开始的，第一个子串的索引。没找到返回-1，与数组的 indexOf()方法相同。

var str = str.indexOf("查询的子串"); 

5. substring(begin,end)：截取子串，两个参数，begin 必选，end 可选。
6. ①只写一个参数时，表示从 begin 开始直到最后。
7. ②写两个参数时，表示从 begin 开始，到 end 结束，左闭右开，即包含 begin，不含end。

var str = str.substring(n); // 从第 n 个截取到最后

8. replace(“old”,“new”)：表示将字符串中的第一个 old 替换为 new。此方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
   第一个参数可以为普通字符串，也可以为正则表达式（普通字符串将只匹配第一个，正则表达式则根据具体情况区分）。

var str1 = str.replace("a","*"); // 只替换字符串的第一个 a 为* 
var str1 = str.replace(/a/g,"*"); // 使用正则，替换字符串中的所有 a 为*

<script type="text/javascript">
var str = "What's Your Name？";
var str1 = str.replace("a","*"); //只替换字符串的第一个 a 
var str2 = str.replace(/a/g,"*"); // 替换字符串的所有 a
console.log(str1);
console.log(str2);
</script>

9. split("")：将字符串通过指定分隔符分为数组。只传入""空字符串时，将会把单个字符存入数组。

var str1 = str.split().join(); // 使用空格将字符串拆为数组，后又通过空格将字符串连接

需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。

4.2.4 Date：日期对象

JavaScript 的 Date 对象提供了一种方式来处理日期和时间。可以使用许多不同的方式对其进行实例化，具体方式取决于人们想要得到的结果。
1、实例化方式

// 在没有参数的情况下对其进行实例化：
var myDate = new Date(); // 获取当前最新时间
// 传递 milliseconds 作为一个参数：
var myDate = new Date(milliseconds);
// 将一个日期字符串作为一个参数传递：
var myDate = new Date(dateString);
// 传递多个参数来创建一个完整的日期：
var myDate = new Date(year, month, day, hours, minutes,seconds, milliseconds);

2. 常用方法
   Date 对象的方法有很多种，一旦该对象得到实例化，可以使用这些方法。

方 法	说 明（返回值范围）
getFullYear()	获取年份（4 位数形式）
getMonth()	获取月份（0～11）
getDate()	获取一月中的某一天（1～31）
getDay()	获取一周中的某一天（0～6）
getHours()	返回 Date 对象的小时（0 ～ 23）
getMinutes()	返回 Date 对象的分钟（0～59）
getSeconds()	返回 Date 对象的秒数（0～59）
getTime()	返回自 1/1/1970 凌晨 0 点的毫秒数
getTimezoneOffset()	返回格林尼治标准时间和本地时间之间的时间差

注意：getTime()方法返回自1/1/1970 凌晨 0 点的毫秒数，而 getTimezoneOffset()方法返回格林尼治标准时间和本地时间之间的时间差，以分钟为单位。

4.2.5 Math：算术对象

Math 对象并不像 Date 和 String 是对象的类，所以 Math 对象没有构造函数 Math()， 即 Math 对象无须在使用之前进行声明。例如，Math.sin()只是函数，而不是某个对象的方法。通过把 Math 作为对象使用，即可调用其所有的属性和方法。

var pi_value=Math.PI; // 圆周率 PI 的值，结果为 3.141592653589793
var sqrt_value=Math.sqrt(15); // 15 的算术平方根，结果为 3.872983346207417

属 性	说 明
E	返回算术常量 e，即自然对数的底数（约等于 2.718）
LN2	返回 2 的自然对数（约等于 0.693）
LN10	返回 10 的自然对数（约等于 2.302）
LOG2E	返回以 2 为底的 e 的对数（约等于 1.442）
LOG10E	返回以 10 为底的 e 的对数（约等于 0.434）
PI	返回圆周率（约等于 3.14179） SQRT2 返回 2 的算术平方根（约等于 1.414）

方 法	说 明
ceil(x)	返回大于或等于该数的最小整数
floor(x)	返回小于或等于该数的最大整数
min(x,y)	返回最小值
max(x,y)	返回最大值
pow(x,y)	返回 x 的 y 次幂
random()	返回 0～1 的随机数
round(x)	把数四舍五入为整数
sqrt(x)	返回数的平方根

4.3 JavaScript 自定义对象

JavaScript 中，可以定义自己的类。目前，JavaScript 中已经存在一些标准的类，如 Date、Array、RegExp、String、Math、Number 等，这为编程提供了许多方便，但对于复杂的客户端程序而言，这些还远远不够。因此，需要自己定义对象来满足需求。

4.3. 1 对象的概念

自定义对象的前提需要知道对象是什么，对象由什么组成，以及一个对象的属性和方法是如何声明的。

var person = {
	name : "张三",
	age : 14, 
	say : function(){ 
		alert("我会说话 ！");
	}, 
} 

1. 对象
   对象是包含一系列无序属性和方法的集合。例如，上述代码就是一个完整、简洁的对象声明，它声明了一个 person 对象，这个对象具有 name 属性、age 属性和 say 方法。
2. 键值对
   对象中的数据是以键值对的形式存在的，以键取值。例如，在给 person 对象添加 name属性时，使用了“name: “张三””语句，这条语句就是一个键值对形式。其中，name 就是它的键，“张三”就是它的值，它们之间使用“：”连接。
3. 属性
   描述对象特征的一系列变量，即对象中的变量。例如，上述代码中 person 对象具有name 属性、age 属性，表明这个 person 对象是一个 name 为张三，age 为 14 岁的人。
4. 方法
   描述对象行为的一系列方法，即对象中的函数。例如，上述代码中声明的 person 对象除了具有 name 属性、age 属性，还具有一个 say 方法，表明这个 person 对象是一个 name 为张三，age 为 14 岁而且具有语言能力（说话功能）的人。

4.3.2 对象的声明

自定义对象的声明与 JavaScript 的内置对象的声明一样，都具有两种声明方式，一种是字面量声明；另一种是 new 关键字声明。

1. 字面量声明
   对象中的键可以是任何数据类型，但是一般用作普通变量名（不需要""）即可。对象中的值也可以是任何数据类型，但是字符串类型必须用""包裹。

var obj = {
	key1: value1, // obj 属性
	key2: value2,
	func : function(){} // obj 方法
} 

注意：多组键值对之间用英文逗号分隔，键值对的键与值之间用英文冒号分隔。

2. new 关键字声明
   使用 new 关键字声明与字面声明方式有区别，使用 new 关键字声明，首先使用 new 关键字实例化一个 obj 对象，然后使用“obj.属性名=属性值”的方式给 obj 添加属性，使用“obj.方法名=function(){}”的方式给 obj 添加属性和方法。.

var obj = new Object();
	obj.name = "李四";
	obj.say = function(){
		console.log("我是："+this.name);
	}

4.3.3 对象的属性与方法

下面介绍在声明完成后，如何调用以及删除声明的方法和属性。
1、调用
对象中的属性和方法的调用有两种方式。
（1）通过运算符（.）调用

在对象内部：

this.属性名
this.方法名()

注意：在对象中直接写变量名，默认为调用全局变量，如果需调用对象自身属性，则必须通过 this 关键字。
在对象外部：
对象名.属性名
对象名.方法名()

var person = {
	name : "张三",
	age : 14,
	say : function(){
		alert(" 我叫"+this.name+"今年"+this.age+"了！"); // 对象内部使用 this，调用自身属性
		// alert(name); // 相当于使用全局变量 name，而不是使用对象的属性
	},
}
console.log(person.name); // 在对象外部使用对象名调用自身属性
person.say(); // 在对象外部使用对象名调用自身方法

（2）通过[“key”]调用
对象名[“属性名”]
对象名"方法名"
如果 key 中包含特殊字符，则无法使用第一种方式，必须使用第二种方式。

var person = {
	name : "张三",
	age : 14,
	say : function(){
		alert(" 我叫"+this.name+"今年"+this.age+"了！"); // 对象内部使用 this 调用自身属性
	},
}
console.log(person["name"]); // 使用[]调用对象属性
person["say"](); // 使用[]调用对象方法

2、 删除对象的属性方法
delete 对象名.属性/方法名：

delete person.age; // 删除 Person 对象的 age 属性