JavaScript自定义对象

2.1、类和对象的概念

所谓对象就是真实世界中的实体，对象与实体是一一对应的，也就是说现实世界中每一个实体都是一个对象，它是一种具体的存在，可以发现身边很多对象，汽车，狗，人等，这些对象都有一个属性和行为。比如一只狗，那么它的属性有名称、品种、颜色、体重；行为有吠叫、摇摆、跑等。

所谓类是具备某些共同特征的对象实体的集合，它是一种抽象的概念，用程序设计的语言来说，类是一种抽象的概念，它是对所具有相同特征对象实体的抽象。比如所有的狗对象都有一些共同的属性和共同的行为，共同的属性有年龄、品种、体重、体毛的颜色等，共同的行为有吃狗粮、和主人玩游戏、摇摆尾巴、跑步等，把这些共同的属性和共同的行为抽象成一个类，在很对语言中，用关键字class表示一个类。

综上所述类是对象的集合，对象是类的实例；类是抽象的，对象是具体的，能够看得见、摸得着；类是对象的模板，对象是由类产生，对象是通过new 构造函数()，用来调用类的构造方法。

而计算机软件是用来描述和处理客观世界中的事物，所以在计算机的编程语言JavaScript中引入了类和对象的概念。JavaScript语言没有“类”，而改用构造函数（constructor）作为对象的模板。前面说过，“对象”是单个实物的抽象。所以，通常需要一个模板，表示某一类实物的共同特征，然后“对象”根据这个模板生成。所谓“构造函数”，就是专门用来生成“对象”的函数。它提供模板，作为对象的基本结构。比如var date1=new Date()是通过调用Date的构造函数Date()(这里可以理解为一个类)来创建一个日期对象。一个构造函数，可以生成多个对象，这些对象都有相同的属性和行为，但是属性值可以不同。

对象object是JavaScript的核心概念，也是最重要的数据类型。JavaScript的所有数据都可以被视为对象。对象是一个容器，封装了属性(propert)和方法(method)。所谓属性，就是对象的静态状态；所谓方法，就是对象的动态行为。

在JavaScript中，其中一种定义对象的方法如下：

对象，就是一种无序的数据集合，由若干个“键值对”（key-value）构成。

var o = {p: "Hello World",sayHello:function(){return p;}
};

上面代码中，定义了一个对象o,这个对象内部包含2个键值对:p和sayHello，其中p键值对是描述静态属性的;sayHello键值对是描述对象的动态行为的。属性名与属性值之间用冒号分隔。

p是对象的属性名，字符串“Hello World”是对象的属性值。sayHello是对象的另一个属性名，属性值是function(){return p; }。

如果对象内部包含多个属性对，每个属性对之间用逗号分隔。需要注意的是，上面的代码后台隐式调用了new Object()这个构造函数创建了一个对象o,再通过键值对定义静态属性动态行为。

对象又分内置对象和自定义对象，其中内置对象是指JavaScript中已经定义好的，比如我们之后学的Date、Array、Math、String等，这些内置对象提供了许多方法和属性,只管调用和使用即可,比如Math对象中的PI和E是属性，pow(x,y)、sin(x)、sqrt(x)等方法。

而在这一小节里，主要介绍自定义对象的使用。

2.2、对象的使用

2.2.1、对象的创建方法

1、通过new运算符创建 var p=new Object();

var people = new Object();
people.name="张三";
people.sex="男";
people.eat = function(){....}

2、new关键字可以省略 var p={};

var people = {};
people.name="李四";
people.sex="男";
people.eat = function(){....}

3、创建对象直接赋值

var p = {name:"张三",age:12,sex:"男"
}
var p = new Object({name:"张三",age:12,sex:"男"eat:function(){.....}
});

4、通过构造函数创建

function Foo(name,age,sex){this.name = name;this.age = age;this.sex = sex;
}

this代表的是当前对象。

但是构造函数方有个缺点，就是对象的方法放在了构造函数内部，这样每创建一个方法就会需要多占用一些内存，所以js给构造函数设计了一个prototype属性，用来存放对象的方法：

function Student(name,age,id){this.name=name;this.age=age;this.id=id;
}
Student.prototype={work:function(skill){alert(this.name+"做"+skill+"开发相关的工作");},classId:"Java1班"
}
var stu1=new Student("李明",18,20151515);//得到的就是字面量对象
var stu2=new Student("王磊",18,20141000);//得到的就是字面量对象  console.log(stu2.work==stu1.work);//ture，节省了内存空间
stu1.work("Java");
stu2.work("PHP");
console.log(stu1.classId);//20151515
console.log(stu2.classId);//20141000

2.2.2、对象的使用方法

对象属性的使用
1、可以用点符号访问对象属性值
2、也可以通过数组的方式，即用[“属性名称”]

对象方法的使用:
可以使用对象名.方法名()来调用

2.3、JavaScript的面向对象

JavaScript是一门彻底的面向对象的语言, JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…此外，JavaScript允许自定义对象。

在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样），JavaScript 基于 prototype(原型)，而不是基于类的。

在Javascript没有类和接口，只有对象，而根据ECMAscript的定义，对象是“无序属性的集合，其属性包含基本值，对象或者函数”。

需要注意的是，在最新版本的ECMAscrip6.0中，已经使用class来定义类了。

如何理解函数也是对象？

还有一种，称为“方法对象”，就是我们通常定义的 function。你可能觉得奇怪：方法就是方法，怎么成了对象了？但是在 JavaScript 中，方法的确是被当成对象来处理的。

下面是一个简单的例子：

function func() {alert('Hello!');
}
alert(func.toString());

在这个例子中，func 虽然是作为一个方法定义的，但它自身却包含一个 toString 方法，

说明 func 在这里是被当成一个对象来处理的。更准确的说，func 是一个“方法对象”。

下面是例子的继续：

func.name = “I am func.”;
alert(func.name);

我们可以任意的为 func 设置属性，这更加证明了 func 就是一个对象。那么方法对象
和普通对象的区别在哪里呢？首先方法对象当然是可以执行的，在它后面加上一对括号，就是执行这个方法对象了.

三、JavaScript内置对象

3.1、Array对象

3.1.1、Array构造函数

new关键字创建空数组var arr = new  Array();
new关键字创建包含元素的数组var arr = new  Array(值1,值2.....值N);
new关键字创建指定元素个数的数组var arr = new  Array(数值);
也可以使用[]直接创建数组var arr = [];var arr = [值1,值2.....值N];
可以使用length属性获取数组的长度;并且可以给一个数组长度赋值。

3.1.2、Array对象方法

程序运行时通常需要读取数组中的数据，有时候需要对数据进行修改。

（一）读取数据：可以使用索引查询获取数组元素和添加数组元素

（二）添加数据：使用push()方法将新元素添加到数组尾部.

（三）删除数据：可以使用delete()运算符删除指定的元素。

（四）删除末尾元素(更新数据) : pop()方法,该方法会返回删除的元素。

（五）删除顶端的元素 : shift()方法

（六）在数组顶端添加元素 : unshift()方法,返回值为新数组的长度。

（七）字符转换：toString()方法将数组表示为字符串。

（八）join方法输出数组元素。(输出结果会转换成字符串)

（九）数组逆序reverse()：颠倒数组元素的顺序;返回值为逆序后的新数组。

（十）数组排序 sort：

语法 数组名.sort(sortfunction)sortfunction若省略，默认为从按照ASII字符顺序进行升序排列sortfunction必须返回：正值、零、负值三者之一。正直表示第一个值大于第二个值，负值反之，零则相等。var arr1 = [72,33,12,44,24];arr1.sort(function(a,b){return a-b;});alert(arr1);var arr1 = [72,33,12,44,24];arr1.sort(function(a,b){return b-a;});alert(arr1);

（十一）扩充数组 concat:将多个数组的元素合并为一个新的数组。

（十二）splice方法：删除、替换、插入元素,会更改原数组
第一参数为起始位置索引
第二参数为切取元素个数
第三个参数为插入元素，可选项

（十三）切取数组的一段元素 slice：
切取部分作为新数组返回，不会对原数组改变。
第一参数为起始位置索引(包含)
第二参数为结束位置索引，注意区分splice(不包含)
若省略第二个参数则直接切取到结尾

3.2、Date对象

Date是JavaScript的内置对象，系统在Date对象中封装了与日期和时间相关的属性和方法。
Date使用UTC1970年1月1日0时开始经过的毫秒数来存储时间。
GMT 格林尼治时间
UTC 国际协调时间

注:January(Jan.)一月； February(Feb.)二月； March(Mar.)三月； April(Apr.)四月； May五月 June(六月； July（jul）七月； August(Aug.)八月； September(Sep.)九月； October(Oct.)十月； November(Nov.)十一月； December(Dec.)十二月Monday 星期一 Tuesday 星期二 Wednesday 星期三 Thursday 星期四 Friday 星期五 Saturday 星期六 Sunday 星期日

3.2.1、Date构造函数

    var date= new Date();无参数的情况下返回值为当前时间。不同浏览器显示的时间格式会有细微差异var date = new Date(milliseconds);参数为毫秒值var date = new Date(dateString);参数为日期字符串var date = new Date(year, month, day, hours, minutes, seconds, milliseconds);必选值:year, month, day；

3.2.2、Date对象方法

通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。

getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。

getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。

getFullYear() 从 Date 对象以四位数字返回年份。

getHours() 返回 Date 对象的小时 (0 ~ 23)。

getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。

getMonth() 从 Date 对象返回月份 (0 ~ 11)。

getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。

getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。

setFullYear() 设置 Date 对象中的年份（四位数字）。

setHours() 设置 Date 对象中的小时 (0 ~ 23)。

setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。

setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。

setMonth() 设置 Date 对象中月份 (0 ~ 11)。

setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。

setTime() setTime() 方法以毫秒设置 Date 对象。

Date对象相关的字符串表示方法：

toSting()获取Date实例的字符串表示

toDateSting() 获取Date的日期部分字符串表示

toTimeSting() 获取Date的时间部分字符串表示

toLocaleString() 据本地时间格式，把 Date 对象转换为字符串。

toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。

toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。

valueOf():毫秒数返回1970年1月1日午夜到指定日期的毫秒数

Date对象解析相关方法:

Date.parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒数。

Date.parse()参数支持的时间格式如下：
1/24/2016; January 24,2016； Sun Jan 24 2016 10:10:10 GMT+0800
格式不正确会返回NaN

3.3、String对象

字符串是非常重要的数据类型，除了基本字符串外，JavaScript还提供了字符串的引用类型–字符串对象。
字符串对象提供了字符串检索、替换、连接等方法…

3.3.1、String构造函数

可以通过new 关键字创建字符串对象
var str=”hello”;//字符串
var str=new String()//字符串对象

注:创建出来的类型虽说不同,但是对于内置的方法和属性都是可以使用的
length 属性返回字符串的长度(字符数)。

3.3.2、String对象方法

字符串与数字的转换：
toString() 返回字符串。可以将数值转换成字符串。
如果需要获取数值的二进制、八进制、十六进制的字符串表示，则可以给toString()传递一个表示进制的的整数

parseInt()函数可以将字符串转换成整数

parseFloat()函数可以将字符串转换浮点数

Number()函数可以将任意类型的值转换数值。

charAt(index) 返回在指定位置的字符。

charCodeAt() 返回在指定的位置的字符的 Unicode 编码。

concat([string1,string2…) 连接字符串。

slice(start,end) 提取字符串n到m之间的片断(不包括m位置的字符串)，并在新的字符串中返回被提取的部分。

substring(star,end) 提取字符串中两个指定的索引号之间的字符。大多数情况和上一个作用相同，当参数为负值时会有不同，但这种情况较少用，不做讨论，有兴趣的话自己测试或查下资料

substr(start,length) 从起始索引号提取字符串中指定数目的字符。

split(separator,limit) 把字符串分割为字符串数组。

indexOf(subString[, startIndex]) 检索字符串,返回某个指定的字符串值在字符串中首次出现的位置。注意，如果查找不到会返回 -1

lastIndexOf(subString[, startIndex]) 返回指定字符串在字符串最后出现的位置。

toLowerCase() 把字符串转换为小写。

toUpperCase() 把字符串转换为大写。

match() 找到一个或多个正则表达式的匹配。(正则表达式后续课程会讲)

该方法会返回一个数组，数组中包含了所符合条件的文本。

replace(rgExp, replaceText) 替换与正则表达式匹配的子串，并返回替换后的字符串，注意原字符串不会改变.

search(rgExp) 返回与正则表达式查找内容匹配的第一个子字符串的位置。(与indexOf相似)

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

3.4、Math对象

Math 对象用于执行数学任务。

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。

Math.PI 返回圆周率（约等于3.14159）。

Math.ceil(x) 返回大于等于其数字参数的最小整数。

Math.floor(x) 返回小于等于其数值参数的最大整数。

Math.round(x) 把数四舍五入为最接近的整数。

Math.random() 返回介于 0 和 1 之间的伪随机数。
注:产生的伪随机数介于 0 和 1 之间（含 0，不含 1），也就是，返回值可能为0，但总是小于1。

Math.max(x,y) 返回 x 和 y 中的最高值。

Math.min(x,y) 返回 x 和 y 中的最低值。

3.5、全局对象

1、parseInt
parseInt() 函数可解析一个字符串，并返回一个整数。

2、parseFloat方法
parseFloat()函数可解析一个字符串，并返回一个浮点数。
该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。
如果参数字符串的第一个字符不能被解析成为数字，则 parseFloat 返回 NaN。

3、isNaN()方法
定义和用法
isNaN(x):函数用于检查其参数是否是非数字值。参数x是要检测的值
如果x是特殊的非数字值NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。

isNaN()函数可用于判断其参数是否是NaN，该值表示一个非法的数字（比如被 0 除后得到的结果）,如果把NaN与任何值(包括其自身)相比得到的结果均是false，所以要判断某个值是否是NaN，不能使用 == 或 === 运算符。正因为如此，isNaN() 函数是必需的。

提示和注释
提示：isNaN()函数通常用于检测parseFloat()和parseInt()的结果，以判断它们表示的是否是合法的数字。当然也可以用isNaN()函数来检测算数错误，比如用0作除数的情况。

<script>var loginName = parseInt('amigo1121');if(isNaN(loginName)) {//如果loginName不是数值,执行如下语句alert("parseInt('amigo1121')的结果是: " + loginName);} else {alert("parseInt('amigo1121')的结果是数值!");}
</script>

课后习题

part 1

1、在JavaScript中，定义一个函数所使用的关键字：A、function  B、Function  C、fun D、method2、变量从作用域的角度划分，分为两种()。A、全局变量  B、局部变量  C、整体变量  D、局域变量3、在JavaScript函数中，声明一个变量没有用var，则该变量是()。A、全局变量  B、局部变量  C、整体变量  D、局域变量4、下面()语句可以实现退出函数的功能。A、break   B、return  C、continue D、switch5、下面代码的执行结果为().
<script type="text/javascript">var max=34;function getMax(){var max=47;document.writeln(max);}getMax();document.write(max);
</script>6、下面代码的执行结果为().
<script type="text/javascript">var max=34;function getMax(){max=47;document.writeln(max);}getMax();document.write(max);
</script>7、在调用函数时，给参数赋值的数据类型可以是()A、string  B、number  C、object   D、boolean8、编码实现如下业务逻辑：1、定义一个函数，函数包含三个参数begin,end,step,其中begin代表数列的初始值、end代表数列的结束值、step表示步长，即数列之间的增长量，比如sum=1+3+5+7+....+99,其中begin=1,end=99,step=2。2、函数的返回值是求该数列的和。9、 下面代码的执行结果为：function t(x,y){document.write(x*y);}t(23,12);A、语法错误  B、276   C、没有结果  D、23*12

part 2

1、JavaScript中数组元素的数据类型( )。A、可以相同 B、可以不相同   C、必须相同 D、必须不相同2、JavaScript中数组的长度( )。A、可变 B、不可变  C、一定变  D、一定不变3、pop()方法和shift( )方法的区别是什么？4、下面()方法可以添加数组元素到数组中。A、push()  B、splice()  C、pop()   D、sort()5、下面()方法可以对数组进行排序。A、push()  B、splice()  C、pop()   D、sort()6、slice()方法和splice()有什么不同?7、( )方法用于颠倒数组中元素的顺序。A、reverse()  B、sort()  C、join  D、split8、( )方法可以把数组转化为字符串。A、reverse()  B、sort()  C、join  D、split

part 3

1、把一个形如’6/13/2011’的字符串转化为日期，则使用Date对象的()方法。A、UTC()  B、parse()  C、setTime()  D、getTimezoneOffset()2、把一个日期转化一个字符串，并且以特定地区格式显示星期几、月、日和年，则选用()方法。A、toDateString() B、toTimeString() C、box.toLocaleDateString() D、toLocaleTimeString()3、下面()方法实现返回本地时间和UTC时间相差的分钟数。A、getMilliseconds() B、getMinutes()  C、getDate() D、getTimezoneOffset()4、如果当前是星期二，则如下代码的值为()。var box = new Date();alert(box.getDay());A、0 B、1  C、2 D、35、如果当前是12月份，则如下代码的值为()。var box = new Date();alert(box.getMonth());A、10 B、11  C、12 D、136、在页面上编写代码实现显示时间。7、在页面上编写代码实现显示年月日。8、在页面上实现按如下格式显示内容:XXXX年XX月XX日 XX:XX:XX  星期X

part 4

练习1:获取系统当前时间，然后把日期转换为以下格式现在时间是:今天是:****年**月**日,现在时间是:上午/下午 HH:mm:ss练习2:有以下身份证号:410105199009090001说明：前6位是身份和地区编号，7—14位为出生年月日，后4位为个人编号请使用字符串解析成以下格式:该用户的出生日期是：****年**月**日。练习3:判断年份是否为闰年;闰年口诀:四年一闰,百年不闰,四百年再闰练习四:请根据弹出框输入的特定日期格式拆分日期如：请输入一个日期格式的字符串（格式如：月/日/年） 如： 11/24/2014经过处理得到：****年**月**日练习五:根据输入的年份、产品类型和随机数产生固定资产编号即：固定资产编号=年份+0+产品类型+3位随机数程序运行流程：请输入年份：  ……  如2014请选择产品类型（1. 台式机 2. 笔记本 3. 其他）：……  如3生成3位随机数  如310最后显示固定资产编号最后显示的结果应该是201403310var num = prompt("请输入一个数值:"); //从弹出框输入一个值提示：3位随机数按如下方法产生：[100,999]

es() C、getDate() D、getTimezoneOffset()

4、如果当前是星期二，则如下代码的值为()。
var box = new Date();
alert(box.getDay());
A、0 B、1 C、2 D、3

5、如果当前是12月份，则如下代码的值为()。
var box = new Date();
alert(box.getMonth());
A、10 B、11 C、12 D、13

6、在页面上编写代码实现显示时间。

7、在页面上编写代码实现显示年月日。

8、在页面上实现按如下格式显示内容:
XXXX年XX月XX日 XX:XX:XX 星期X


## part 4```html
练习1:获取系统当前时间，然后把日期转换为以下格式现在时间是:今天是:****年**月**日,现在时间是:上午/下午 HH:mm:ss练习2:有以下身份证号:410105199009090001说明：前6位是身份和地区编号，7—14位为出生年月日，后4位为个人编号请使用字符串解析成以下格式:该用户的出生日期是：****年**月**日。练习3:判断年份是否为闰年;闰年口诀:四年一闰,百年不闰,四百年再闰练习四:请根据弹出框输入的特定日期格式拆分日期如：请输入一个日期格式的字符串（格式如：月/日/年） 如： 11/24/2014经过处理得到：****年**月**日练习五:根据输入的年份、产品类型和随机数产生固定资产编号即：固定资产编号=年份+0+产品类型+3位随机数程序运行流程：请输入年份：  ……  如2014请选择产品类型（1. 台式机 2. 笔记本 3. 其他）：……  如3生成3位随机数  如310最后显示固定资产编号最后显示的结果应该是201403310var num = prompt("请输入一个数值:"); //从弹出框输入一个值提示：3位随机数按如下方法产生：[100,999]