（十一）JavaScript对象

一、对象

1. 认识对象

• 对象（object）是 “键值对” 的集合，表示属性和值的映射关系

2. 对象的语法

• k 和 v 之间用冒号分隔，每组 k:v 之间用逗号分隔，最后一个 k:v 对后可以不书写逗号

3. 属性

(1) 属性是否加引号

• 如果对象的属性键名不符合 JS 标识符命名规范，那么这个键名必须用引号包裹

(2) 属性的访问

• 可以用 “点语法” 访问对象中指定键的值
• 如果属性名不符合 JS 标识符命名规范，则必须用方括号的写法来访问
• 如果属性名以变量形式存储，则必须使用方括号形式

(3) 属性的更改

• 直接使用赋值运算符重新对某属性赋值即可更改属性

(4) 属性的创建

• 如果对象本身没有某个属性值，则用点语法赋值时，这个属性会被创建出来

(5) 属性的删除

• 如果要删除某个对象的属性，需要使用 delete 操作符

4. 对象的方法

• 如果对象的某个属性值是函数，那么它也被称为对象的 “方法”

(1) 方法的调用

• 使用 “点语法” 可以调用对象的方法

(2) 方法和函数

• 方法也是函数，只不过方法是对象的 “函数属性”，它需要用对象打点调用

5. 对象的遍历

• 和遍历数组类似，对象也可以被遍历，遍历对象需要使用 for…in… 循环
  使用 for…in… 循环可以遍历对象的每个键
  

6. 对象的深浅克隆

• 对象是引用类型值，这意味着：
  • 不能用var obj2 = obj1这样的语法克隆一个对象
  • 使用==或者===进行对象的比较时，比较的是它们是否为内存中的同一个对象，而不是比较值是否相同

(1) 浅克隆

• 浅克隆：只克隆对象的 “表层”，如果对象的某些属性值是引用类型值，则不进一步克隆它们，只是传递它们的引用
• 使用 for…in… 循环即可实现对象的浅克隆

(2) 深克隆

• 深克隆：克隆对象的全貌，不论对象的属性值是否又是引用类型，都能将它们实现克隆
• 和数组的深克隆类似，对象的深克隆需要使用递归

<script>
	var obj1 = {
		a: 1,
		b: 2,
		c: [33, 44, {
			m: 55,
			n: 66,
			p: [77, 88]
		}]
	};
	
	function deepClone(o) {
		//要判断o是对象还是数组
		if(Array.isArray(o)) {
			//数组
			var result = [];
			for (var i = 0; i < o.length; i++) {
				result.push(deepClone(o[i]));
			}
		} else if (typeof o == 'object') {
			//对象
			var result = [];
			for (var k in o) {
				reslut[k] = deepClone(o[k]);
			}
		} else {
			//基本类型值
			var result = o;
		}
		return result;
	}
</script>

二、函数的上下文

1. 函数上下文

• 函数中可以使用 this 关键字，它表示函数的上下文
• 与中文中 “这” 类似，函数中的 this 具体代指什么必须通过调用函数时的 “前言后语” 来判断

2. 函数的上下文由调用方式决定

• 函数的上下文（this关键字）由调用函数的方式决定，function 是 “运行时上下文” 策略
• 同一个函数，用不同的形式调用它，则函数的上下文不同
  情形1：对象打点调用函数，函数中的 this 指代这个打点的对象
  xiaoming.sayHello();
  情形2：圆括号直接调用函数，函数中的 this 指代 window 对象
  var sayHello = xiaoming.sayHello; sayHello();
• 函数如果不调用，则不能确定函数的上下文

3. 上下文规则

• 规则1：
  • 对象打点调用它的方法函数，则函数的上下文是这个打点的对象 对象.方法()
• 规则2：
  • 圆括号直接调用函数，则函数的上下文是 window 对象 函数()
• 规则3：
  • 数组（类数组对象）枚举出函数进行调用，上下文是这个数组（类数组对象） 数组[下标]()
  • 什么是类数组对象：所有键名为自然数序列（从0开始），且有 length 属性的对象
    arguments 对象是最常见的类数组对象，它是函数的实参列表
• 规则4：
  • IIFE 中的函数，上下文是 window 对象 (function() { })();
• 规则5：
  • 定时器、延时器调用函数，上下文是 window 对象 setInterval(函数, 时间); setTimeout(函数, 时间);
• 规则6：
  • 事件处理函数的上下文是绑定事件的DOM元素 DOM元素.onclick = function () { };

4. 指定函数的上下文

• call 和 apply 能指定函数的上下文
  函数.call(上下文); 函数.apply(上下文);
• call 和 apply 的区别：

5. 用new操作符调用函数

• new 函数()
• 使用 new 操作符调用函数会进行 “四步走”：
  1）函数体内会自动创建出一个空白对象
  2）函数的上下文（this）会指向这个对象
  3）函数体内的语句会执行
  4）函数会自动返回上下文对象，即使函数没有 return 语句

6. 上下文规则总结

三、构造函数

1. 什么是构造函数

• 用 new 调用一个函数，这个函数就被称为 “构造函数”，任何函数都可以是构造函数，只需要用 new 调用它
• 顾名思义，构造函数用来 “构造新对象”，它内部的语句将为新对象添加若干属性和方法，完成对象的初始化
• 构造函数必须用 new 关键字调用，否则不能正常工作，正因如此，开发者约定构造函数命名时首字母要大写

2. 类和实例

(1) 类

• 类如同 “蓝图” 一样，类只描述对象会拥有哪些属性和方法，但是并不具体指明属性的值
• Java、C++ 等是 “面向对象”（object-oriented）语言；
  JavaScript 是 “基于对象”（object-based）语言
  JavaScript 中的构造函数可以类比于OO语言中的 “类”，写法的确类似，单核真正OO语言还是有本质不同

(2) 实例

• 实例是具体的对象

四、原型链继承

1. prototype原型

• 任何函数都有 prototype 属性，prototype 是 “原型” 的意思
• prototype 属性值是个对象，它默认拥有 constructor 属性指回函数

• 对于普通函数来说 prototype 属性没有任何用处，而构造函数的 prototype 属性非常有用
• 构造函数的 prototype 属性是它的实例的原型

2. 原型链查找

• JS 规定：实例可以打点访问它的原型的属性和方法，这被称为 “原型链查找”
  
• 

3. hasOwnProperty

• hasOwnProperty 方法可以检查对象是否真正 “自己拥有” 某属性或者方法
• in 运算符只能检查某个属性或方法是否可以被对象访问，不能检查是否是自己的属性或方法
  

4. 在prototype上添加方法

• 把方法直接添加到实例身上时，每个实例的方法函数都是内存中不同的函数，造成了内存的浪费；所以我们可以将方法写到 prototype 上

5. 原型链的终点

• 数组的原型链

6. 继承

• 继承描述了两个类之间的 “a kind of” 关系
• “父类”（或 “超类”、“基类”）；“子类”（或 “派生类”）；子类丰富了父类，让类描述得更具体、更细化

(1) 如何实现继承

• 实现继承的关键在于：子类必须拥有父类的全部属性和方法
• 子类能定义自己特有的属性和方法，同时子类还能重写（override）父类的方法

(2) 通过原型链实现继承

五、面向对象

• 面向对象的本质：定义不同的类，让类的实例工作
• 面向对象的优点：程序编写更清晰、代码结构更严密、使代码更健壮更利于维护
• 面向对象经常用到的场合：需要封装和复用性的场合（组件思维）

六、常用的引用类型

• Object
• Boolean
• Number
• String
• Math
• Array
• Date
• RegExp

1. 包装类

• Number()、String() 和 Boolean() 分别是数字、字符串和布尔值的 “包装类”
• 包装类知识总结：
  • Number()、String() 和 Boolean() 的实例都是 object 类型，它们的 PrimitiveValue 属性存储它们的本身值
  • new 出来的基本类型值可以正常参与运算
  • 包装类的目的就是为了让基本类型值可以从它们的构造函数的 prototype 上获得方法

2. Math对象

(1) 幂和开方

• Math.pow()、Math.sqrt()

(2) 向上取整和向下取整

• Math.ceil()、Math.floor()

(3) 四舍五入

• Math.round()
• 四舍五入到小数点后某位：
  

(4) 得到参数列表的最大值和最小值

• Math.max()、Math.min()
  

• 利用Math.max()方法求数组的最大值：

  1）Math.max()要求参数必须是“罗列出来”，不能是数组
  2）apply方法可以指定函数的上下文，并且以数组的形式传入“零散值”当做函数的参数

(5) 随机数

• 得到 0~1 之间的随机小数：Math.random()
• 得到 [a, b] 区间内的随机整数：parseInt(Math.random() * (b - a + 1)) + a

3. Date对象

(1) new Date()

• 使用new Date()即可得到当前时间的日期对象，它是 object 类型值
• 使用new Date(2020, 11, 1)即可得到指定日期的日期对象
  ！！注意第二个参数表示月份，从0开始算，11表示12月
  也可以是new Date('2020-12-01')这样的写法

(2) 日期对象的常见方法

(3) 时间戳

• 时间戳表示 1970年1月1日 零点整 距离某时刻的毫秒数
• 通过 getTime() 方法（精确到毫秒）或者 Date.parse() 函数（精确到秒）可以 将日期对象变为时间戳
• 通过 new Date(时间戳) 的写法可以 将时间戳变为日期对象

4. RegExp正则表达式

(1) 什么是正则表达式

• 正则表达式（regular expression）：描述了字符串的“构成模式”，经常被用于检查字符串是否符合预定的格式要求
• 正则表达式 “按位” 描述规则，是指它是一位一位的描述字符串的构成形式
  比如检查字符串是不是：以字母 m 开头，然后是 3 个数字，最后以字母 n 结尾

(2) 正则表达式的创建

• 使用/内容/的语法形式，可以快速创建正则表达式
• 也可以使用new RegExp('内容')的形式，创建正则表达式
• 使用 typeof 运算符检查正则表达式的类型，结果是 object

(3) 元字符

• “元字符” 是指一位指定类型的字符
• 开头和结尾
• 元字符使用注意事项：
  • 如果使用new RegExp('内容')的写法，反斜杠需要多写一个
    比如/^\d$/和new RegExp('^\\d$')是相同的意思
• 字符的转义：
  • 在特殊字符之前的反斜杠\表示下一个字符不是特殊字符，一个按照字面理解
  • 不管一个符号有没有特殊意义，都可以在其之前加上一个\以确保它表达的是这个符号本身

(4) 方括号表示法

• 使用方括号，比如 [xyz]，可以创建一个字符集合，表示匹配方括号中的任意字符
• 可以使用短横-来指定一个字符范围，^表示否定

(5) 量词

(6) 修饰符

• 修饰符也叫作标志（flags），用于使用正则表达式实现高级搜索
• 修饰符的使用：var re = /m/gi var re = new RegExp('m', 'gi')

(7) 正则表达式的相关方法

• test() 方法
  • 正则表达式的 test() 方法用来测试某字符串是否匹配此正则表达式，它返回 true 或 false
• exec() 方法
  • 正则表达式的 exec() 方法用来在一个指定字符串中执行一个搜索匹配查找，返回一个结果数组或 null
  • exec() 方法的逐条遍历：有 “g” 修饰符的正则表达式将自动成为 “有状态” 的，这意味着可以对单个字符串中的多次匹配结果进行逐条的遍历

(8) 字符串的相关正则方法

(9) 正则表达式的应用

• 用正则表达式进行表单验证是正则表达式最重要的实际应用