JavaScript自定义对象

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、method

2、变量从作用域的角度划分，分为两种()。
    A、全局变量  B、局部变量  C、整体变量  D、局域变量

3、在JavaScript函数中，声明一个变量没有用var，则该变量是()。
    A、全局变量  B、局部变量  C、整体变量  D、局域变量

4、下面()语句可以实现退出函数的功能。
    A、break   B、return  C、continue D、switch

5、下面代码的执行结果为().
<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、boolean

8、编码实现如下业务逻辑：
    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、split

8、( )方法可以把数组转化为字符串。
    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、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

练习1:
    获取系统当前时间，然后把日期转换为以下格式
    现在时间是:今天是:****年**月**日,现在时间是:上午/下午 HH:mm:ss

练习2:
    有以下身份证号:
        410105199009090001
    说明：前6位是身份和地区编号，7—14位为出生年月日，后4位为个人编号
    请使用字符串解析成以下格式:
    该用户的出生日期是：****年**月**日。

练习3:
    判断年份是否为闰年;
        闰年口诀:四年一闰,百年不闰,四百年再闰

练习四:
    请根据弹出框输入的特定日期格式拆分日期

    如：请输入一个日期格式的字符串（格式如：月/日/年） 如： 11/24/2014
        经过处理得到：****年**月**日

练习五:
    根据输入的年份、产品类型和随机数产生固定资产编号
    即：固定资产编号=年份+0+产品类型+3位随机数
       程序运行流程：请输入年份：  
                  ……  如2014
                  请选择产品类型（1. 台式机 2. 笔记本 3. 其他）：
                  ……  如3
                  生成3位随机数  如310
                  最后显示固定资产编号

    最后显示的结果应该是201403310
    var 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
                  最后显示固定资产编号

    最后显示的结果应该是201403310
    var num = prompt("请输入一个数值:"); //从弹出框输入一个值
    提示：3位随机数按如下方法产生：[100,999]