Javascript学习三：标准库、面向对象编程

一、标准库

1.1 Object对象

JavaScript 原生提供Object对象，JavaScript 的所有其他对象都继承自Object对象，即那些对象都是Object的实例。

Object对象的原生方法分成两类：Object本身的方法与Object的实例方法。
Object本身是一个函数，可以当作工具方法使用，将任意值转为对象。这个方法常用于保证某个值一定是对象。
Object构造函数的首要用途，是直接通过它来生成新对象。
Object静态方法：
静态方法，指部署在Object对象本身的方法，比如：Object.keys方法和Object.getOwnPropertyNames方法都用来遍历对象的属性。

Object的实例方法：

1.2 属性描述对象

属性描述对象

1.3 Array对象

Array是js的原生对象，也是一个构造函数，可以用于生成新的数组；

var arr = Array(2);
// 等同于
var arr = new Array(2);
1
2
3

Array的静态方法：
Array.isArray()：返回一个布尔值，表示参数是否为数组。
实例方法：

• valueOf方法是一个所有对象都拥有的方法，表示对该对象求值。数组的valueOf方法返回数组本身。
• 数组的toString方法返回数组的字符串形式。
• push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。
• pop方法用于删除数组的最后一个元素，并返回该元素。
• shift()方法用于删除数组的第一个元素，并返回该元素。
• unshift()方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。
• join()方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。
• 通过call方法，这个方法也可以用于字符串或类似数组的对象。

Array.prototype.join.call('hello', '-')
// "h-e-l-l-o"

var obj = { 0: 'a', 1: 'b', length: 2 };
Array.prototype.join.call(obj, '-')
// 'a-b'
1
2
3
4
5
6

• concat方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变。
• reverse方法用于颠倒排列数组元素，返回改变后的数组。
• slice()方法用于提取目标数组的一部分，返回一个新数组，原数组不变。
• splice()方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。

arr.splice(start, count, addElement1, addElement2, ...);
1

• sort方法对数组成员进行排序，默认是按照字典顺序排序。如果想让sort方法按照自定义方式排序，可以传入一个函数作为参数。

[10111, 1101, 111].sort(function (a, b) {
  return a - b;
})
// [111, 1101, 10111]
1
2
3
4

• map()方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。
• forEach()方法与map()方法很相似，也是对数组的所有成员依次执行参数函数。但是，forEach()方法不返回值，只用来操作数据。这就是说，如果数组遍历的目的是为了得到返回值，那么使用map()方法，否则使用forEach()方法。
• filter()方法用于过滤数组成员，满足条件的成员组成一个新数组返回。

1.4 包装对象

原始数据类型：布尔值、数值、字符串；
所谓“包装对象”，指的是与数值、字符串、布尔值分别相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成（包装成）对象。

包装对象的设计目的，首先是使得“对象”这种类型可以覆盖 JavaScript 所有的值，整门语言有一个通用的数据模型，其次是使得原始类型的值也有办法调用自己的方法。

实例方法：
valueOf()方法返回包装对象实例对应的原始类型的值。
toString()方法返回对应的字符串形式。
还可以自行在原型链上添加自定义函数。

Boolean对象

var b = new Boolean(true);
1

Number对象

String对象

var s1 = 'abc';
var s2 = new String('abc');

typeof s1 // "string"
typeof s2 // "object"

s2.valueOf() // "abc"
1
2
3
4
5
6
7

实例属性
String.prototype.length
字符串实例的length属性返回字符串的长度。
实例方法
String.prototype.charAt()：charAt方法返回指定位置的字符，参数是从0开始编号的位置。

'abc'.charAt(1) // "b"
'abc'[1] // "b"
1
2

String.prototype.concat()：concat方法用于连接两个字符串，返回一个新字符串，不改变原字符串。
String.prototype.slice()：slice()方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）。
如果省略第二个参数，则表示子字符串一直到原字符串结束。如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度。如果第一个参数大于第二个参数（正数情况下），slice()方法返回一个空字符串。
String.prototype.substring()：
substring方法用于从原字符串取出子字符串并返回，不改变原字符串，跟slice方法很相像。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）。
如果省略第二个参数，则表示子字符串一直到原字符串的结束。如果第一个参数大于第二个参数，substring方法会自动更换两个参数的位置。如果参数是负数，substring方法会自动将负数转为0。如果第一个参数大于第二个参数（正数情况下），交换两个参数。

优先使用slice。
String.prototype.substr()：
substr方法用于从原字符串取出子字符串并返回，不改变原字符串，跟slice和substring方法的作用相同。
substr方法的第一个参数是子字符串的开始位置（从0开始计算），第二个参数是子字符串的长度。
如果省略第二个参数，则表示子字符串一直到原字符串的结束。如果第一个参数是负数，表示倒数计算的字符位置。如果第二个参数是负数，将被自动转为0，因此会返回空字符串。

String.prototype.indexOf()，String.prototype.lastIndexOf()：
indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回-1，就表示不匹配。indexOf方法还可以接受第二个参数，表示从该位置开始向后匹配。lastIndexOf方法的用法跟indexOf方法一致，主要的区别是lastIndexOf从尾部开始匹配，indexOf则是从头部开始匹配。lastIndexOf方法的用法跟indexOf方法一致，主要的区别是lastIndexOf从尾部开始匹配，indexOf则是从头部开始匹配。
String.prototype.trim()：
trim方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串。
String.prototype.toLowerCase()，String.prototype.toUpperCase()：toLowerCase方法用于将一个字符串全部转为小写，toUpperCase则是全部转为大写。它们都返回一个新字符串，不改变原字符串。
String.prototype.match()：
match方法用于确定原字符串是否匹配某个子字符串，返回一个数组，成员为匹配的第一个字符串。如果没有找到匹配，则返回null。
String.prototype.search()，String.prototype.replace()：
search方法的用法基本等同于match，但是返回值为匹配的第一个位置。如果没有找到匹配，则返回-1。replace方法用于替换匹配的子字符串，一般情况下只替换第一个匹配（除非使用带有g修饰符的正则表达式）。
String.prototype.split()
split方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。
String.prototype.localeCompare()：localeCompare方法用于比较两个字符串。它返回一个整数，如果小于0，表示第一个字符串小于第二个字符串；如果等于0，表示两者相等；如果大于0，表示第一个字符串大于第二个字符串。

1.5 Math对象

Math是 JavaScript 的原生对象，提供各种数学功能。该对象不是构造函数，不能生成实例，所有的属性和方法都必须在Math对象上调用。
静态属性：

静态方法：

1.6 Date对象

Date对象是 JavaScript 原生的时间库。它以国际标准时间（UTC）1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后各1亿天（单位为毫秒）

• Date对象可以作为普通函数直接调用，返回一个代表当前时间的字符串。
• Date还可以当作构造函数使用。对它使用new命令，会返回一个Date对象的实例。如果不加参数，实例代表的就是当前时间。

// 参数为时间零点开始计算的毫秒数
new Date(1378218728000)
// Tue Sep 03 2013 22:32:08 GMT+0800 (CST)

// 参数为日期字符串
new Date('January 6, 2013');
// Sun Jan 06 2013 00:00:00 GMT+0800 (CST)

// 参数为多个整数，
// 代表年、月、日、小时、分钟、秒、毫秒
new Date(2013, 0, 1, 0, 0, 0, 0)
// Tue Jan 01 2013 00:00:00 GMT+0800 (CST)
1
2
3
4
5
6
7
8
9
10
11
12

只要是能被Date.parse()方法解析的字符串，都可以当作参数:

new Date('2013-2-15')
new Date('2013/2/15')
new Date('02/15/2013')
new Date('2013-FEB-15')
new Date('FEB, 15, 2013')
new Date('FEB 15, 2013')
new Date('February, 15, 2013')
new Date('February 15, 2013')
new Date('15 Feb 2013')
new Date('15, February, 2013')
1
2
3
4
5
6
7
8
9
10

月份从0开始计算，但是，天数从1开始计算。另外，除了日期的默认值为1，小时、分钟、秒钟和毫秒的默认值都是0。

两个日期实例对象进行减法运算时，返回的是它们间隔的毫秒数；进行加法运算时，返回的是两个字符串连接而成的新字符串。

将 Date 实例转为表示本地时间的字符串。

Date.prototype.toLocaleString()：完整的本地时间。
Date.prototype.toLocaleDateString()：本地日期（不含小时、分和秒）。
Date.prototype.toLocaleTimeString()：本地时间（不含年月日）

这三个方法都有两个可选的参数。

dateObj.toLocaleString([locales[, options]])
dateObj.toLocaleDateString([locales[, options]])
dateObj.toLocaleTimeString([locales[, options]])
1
2
3
4
5

1.7 RegExp对象

RegEXp详解
正则表达式，创建有两种方法：
一种是使用字面量，以斜杠表示开始和结束。一种是使用字面量，以斜杠表示开始和结束。

var regex = /xyz/;
var regex = new RegExp('xyz');
1
2

实例属性：
一类是修饰符相关，用于了解设置了什么修饰符。

RegExp.prototype.ignoreCase：返回一个布尔值，表示是否设置了i修饰符。
RegExp.prototype.global：返回一个布尔值，表示是否设置了g修饰符。
RegExp.prototype.multiline：返回一个布尔值，表示是否设置了m修饰符。
RegExp.prototype.flags：返回一个字符串，包含了已经设置的所有修饰符，按字母排序。
上面四个属性都是只读的。

另一类是与修饰符无关的属性，主要是下面两个。

RegExp.prototype.lastIndex：返回一个整数，表示下一次开始搜索的位置。该属性可读写，但是只在进行连续搜索时有意义，详细介绍请看后文。
RegExp.prototype.source：返回正则表达式的字符串形式（不包括反斜杠），该属性只读。
实例方法：
RegExp.prototype.test()：正则实例对象的test方法返回一个布尔值，表示当前模式是否能匹配参数字符串。如果正则表达式带有g修饰符，则每一次test方法都从上一次结束的位置开始向后匹配。
RegExp.prototype.exec()：正则实例对象的exec()方法，用来返回匹配结果。如果发现匹配，就返回一个数组，成员是匹配成功的子字符串，否则返回null。

字面量与元字符：

1. 点字符（.）:
   点字符（.）匹配除回车（\r）、换行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）以外的所有字符。注意，对于码点大于0xFFFF字符，点字符不能正确匹配，会认为这是两个字符。
2. 位置字符：
   位置字符用来提示字符所处的位置，主要有两个字符。
   ^ 表示字符串的开始位置
   $ 表示字符串的结束位置
3. 选择符（|）：
   竖线符号（|）在正则表达式中表示“或关系”（OR），即cat|dog表示匹配cat或dog。

正则表达式中那些有特殊含义的元字符，如果要匹配它们本身，就需要在它们前面要加上反斜杠。需要特别注意的是，如果使用RegExp方法生成正则对象，转义需要使用两个斜杠，因为字符串内部会先转义一次。

字符类：
字符类（class）表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内，比如[xyz] 表示x、y、z之中任选一个匹配。
（1）脱字符（^）
如果方括号内的第一个字符是[^]，则表示除了字符类之中的字符，其他字符都可以匹配。比如，[^xyz]表示除了x、y、z之外都可以匹配。
（2）连字符（-）
某些情况下，对于连续序列的字符，连字符（-）用来提供简写形式，表示字符的连续范围。比如，[abc]可以写成[a-c]，[0123456789]可以写成[0-9]，同理[A-Z]表示26个大写字母。

1.8 JSON对象

JSON是一种用于数据交换的文本格式。

JSON对象是 JavaScript 的原生对象，用来处理 JSON 格式数据。它有两个静态方法：JSON.stringify()和JSON.parse()。
JSON.stringify()方法用于将一个值转为 JSON 字符串。该字符串符合 JSON 格式，并且可以被JSON.parse()方法还原。

1.9 类型说明

简单类型与复杂类型
简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
●值类型：简单数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string ，number，boolean，undefined，null
●引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型。通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等。

栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面

堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放到堆里面。

二、面向对象编程

面向对象编程（Object Oriented Programming，缩写为 OOP），JavaScript 语言的对象体系，不是基于“类”的，而是基于构造函数（constructor）和原型链（prototype）。

2.1 构造函数

var Vehicle = function () {
  this.price = 1000;
};
1
2
3

Vehicle就是构造函数。为了与普通函数区别，构造函数名字的第一个字母通常大写。
构造函数的特点有两个。

• 函数体内部使用了this关键字，代表了所要生成的对象实例。
• 生成对象的时候，必须使用new命令。

2.2 new 命令

new命令的作用，就是执行构造函数，返回一个实例对象。new命令本身就可以执行构造函数，所以后面的构造函数可以带括号，也可以不带括号，推荐带括号。

如果调用构造函数时不用new命令，则此时的this代表全局对象，而非实例对象。

为了保证构造函数必须与new命令一起使用，一个解决办法是，构造函数内部使用严格模式，即第一行加上use strict。这样的话，一旦忘了使用new命令，直接调用构造函数就会报错。

function Fubar(foo, bar){
  'use strict';
  this._foo = foo;
  this._bar = bar;
}

Fubar()
// TypeError: Cannot set property '_foo' of undefined
1
2
3
4
5
6
7
8

题外话：严格模式
好处：

1. 调试更容易；
2. 防止意外的全局变量；
3. 取消this的强制转换；
4. 不会出现重复的属性名和方法名；
5. 使eval()更安全；
6. 在delete使用无效时抛出错误。

另一个解决办法是：构造函数内部判断是否使用new命令，如果发现没有使用，则直接返回一个实例对象。

function Fubar(foo, bar) {
  if (!(this instanceof Fubar)) {
    return new Fubar(foo, bar);
  }

  this._foo = foo;
  this._bar = bar;
}

Fubar(1, 2)._foo // 1
(new Fubar(1, 2))._foo // 1
1
2
3
4
5
6
7
8
9
10
11

instanceof
用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

new命令原理：
使用new命令时，它后面的函数依次执行下面的步骤。

1. 创建一个空对象，作为将要返回的对象实例。
2. 将这个空对象的原型，指向构造函数的prototype属性。
3. 将这个空对象赋值给函数内部的this关键字。
4. 开始执行构造函数内部的代码。
   如果构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象；否则，就会不管return语句，返回this对象。如果return语句返回的是一个跟this无关的新对象，new命令会返回这个新对象，而不是this对象。

2.3 this关键字

this就是属性或方法“当前”所在的对象。

• 全局环境使用this，它指的就是顶层对象window。
• 构造函数中的this，指的是实例对象。
• 如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。该方法赋值给另一个对象，就会改变this的指向。

严格模式下，如果函数内部的this指向顶层对象，就会报错。

2.4 原型对象

构造函数创建实例对象时，不同对象间无法共享属性，所以退出原型对象prototype。

JavaScript 继承机制的设计思想就是，原型对象的所有属性和方法，都能被实例对象共享。也就是说，如果属性和方法定义在原型上，那么所有实例对象就能共享，不仅节省了内存，还体现了实例对象之间的联系。

原型对象的属性不是实例对象自身的属性。只要修改原型对象，变动就立刻会体现在所有实例对象上。（其实可以理解为静态变量）
原型对象的作用，就是定义所有实例对象共享的属性和方法。

原型链
JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型……

如果对象自身和它的原型，都定义了一个同名属性，那么优先读取对象自身的属性，这叫做“覆盖”（overriding）。
constructor属性
prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数。
instanceof方法
instanceof运算符返回一个布尔值，表示对象是否为某个构造函数的实例。

2.5 构造函数继承

第一步是在子类的构造函数中，调用父类的构造函数。

function Sub(value) {
  Super.call(this);
  this.prop = value;
}
1
2
3
4

第二步，是让子类的原型指向父类的原型，这样子类就可以继承父类原型。

Sub.prototype = Object.create(Super.prototype);
Sub.prototype.constructor = Sub;
Sub.prototype.method = '...';
1
2
3

2.6 模块