20150206--JS巩固与加强4

JavaScript巩固与加强三 目录 JavaScript巩固与加强三.................................................................................................... 1 一、面向对象................................................................................................................... 2 1、面向对象发展历程................................................................................................ 2 2、面向对象中的两个概念......................................................................................... 2 3、JavaScript常用系统类........................................................................................... 2 1）String类（字符串类）................................................................................... 2 2）Date类（日期时间类）................................................................................. 2 3）Math（数学类）........................................................................................... 2 二、Javascript中的自定义类............................................................................................. 2 1、Javascript自定义类创建方式................................................................................. 2 2、自定义对象创建流程............................................................................................ 2 3、为什么需要创建对象............................................................................................ 2 4、Javascript中的属性............................................................................................... 2 5、属性可以保存的数据类型..................................................................................... 2 6、在Javascript中，一切都是对象............................................................................ 2 7、面向对象中的三大关键词..................................................................................... 2 8、思考题：.............................................................................................................. 2 三、对象在内存中的存储形式.......................................................................................... 2 1）值类型................................................................................................................. 2 2）引用类型.............................................................................................................. 2 四、Javascript中this指针................................................................................................. 2 1、this指针............................................................................................................... 2 2、深入探讨Javascript中是this指针......................................................................... 2 3、思考题................................................................................................................. 2 4、对象间传值.......................................................................................................... 2 五、属性遍历与删除........................................................................................................ 2 1、使用for…in…遍历自定义对象属性......................................................................... 2 2、使用for…in…结构实现系统对象的遍历.................................................................. 2 3、属性删除操作....................................................................................................... 2 六、成员方法................................................................................................................... 2 七、json对象................................................................................................................... 2 1、什么是json........................................................................................................... 2 2、基本语法.............................................................................................................. 2 3、快速入门.............................................................................................................. 2 4、json对象从“何”而来............................................................................................. 2 5、php与json............................................................................................................ 2 案例：通过php+json完成对历史上的今天api接口调用.............................................. 2 6、为json对象添加成员方法..................................................................................... 2 八、原型链...................................................................................................................... 2 1、什么是原型对象？................................................................................................ 2 2、原型对象作用？................................................................................................... 2 3、如何向原型对象中添加属性或方法....................................................................... 2 4、探讨：原型对象到底从何而来.............................................................................. 2

一、面向对象

1、面向对象发展历程

1）面向机器 2）面向过程（贝尔实验室开发出C语言之后） function add() {} function edit() {} function del() {} 3）面向对象（设计思想） function 咨询() {} function 报名() {} function 缴费(){} function 分班() {} oa系统分解（学生、咨询老师、管理员） class 学生 { function 咨询() {} function 报名() {} }

2、面向对象中的两个概念

类（对某类事务的描述） 对象（由类创建的实体）

3、JavaScript常用系统类

String、Date、Math 1）String类（字符串类） l length ：字符串长度 l indexOf(string) ：查找某个字符（字符串）在字符串出现的位置 l substr(num1,[num2])：截取字符串 l toLowerCase() ：把字符串转化为小写 l toUpperCase() ：把字符串转化为大写 l replace(str1,str2)：把str1替换为str2 2）Date类（日期时间类） l getYear() ：返回年份 l getFullYear() ：返回完整年份 l getMonth() ：返回月份（0-11） l getDate() ：返回当前日期（1-31） l getDay() ：返回星期几（0-6） l getHours()：返回小时 l getMinutes()：返回分钟 l getSeconds() ：返回秒数 l getMilliseconds()：返回毫秒数 l getTime()：返回格林时间到当前的时间戳 3）Math（数学类） l ceil(数值) ：返回大于或等于该数的最小整数 l floor(数值) ：返回小于或等于该数的最大整数 l min(数值1,数值2,…)：返回最小数 l max(数值1,数值2) ：返回最大数 l pow(数值1,数值2) ：返回数值1的数值2次方 2的2次方是4 l random() ：返回0-1之间的随机小数 l round(数值) ：返回四舍五入后整数 l sqrt(数值) ：返回数值的平方根 4的开平方就是2 示例代码：

效果：

二、Javascript中的自定义类

例1：通过Javascript代码定义一个人的信息（姓名、年龄、婚否）

通过以上代码分析可知，三个变量实际上是一个整体，有联系的，但是在代码中我们无法体现出三者的联系。 例2：用面向对象的方式定义一个人的信息

1、Javascript自定义类创建方式

说明：在Javascript是没有类的定义语句，当系统中定义一个函数时，系统在加载后，会认为该函数是同名类下的构造函数（构造器）。 function Person() {} 当系统加载后，系统会认为Person函数是Person类下的构造函数（构造器），我们就可以通过该函数名称创建自定义对象。 var 对象 = new 类名(); class Person() { public function Person() { //该函数就是同名类下的构造函数 } } 基本语法： function 类名() {} var 对象 = new 类名();

2、自定义对象创建流程

1）在内存中（堆内存）开辟存储区域 2）执行构造函数 示例代码：

3、为什么需要创建对象

答：为了保存更多的数据。 如何保存数据？答：通过属性保存数据

4、Javascript中的属性

基本语法： 对象.属性 = 属性的值 或 对象[属性] = 属性的值

5、属性可以保存的数据类型

数字 p1.age = 32; 字符串 p1.name = ‘王大锤’; 布尔值 p1.marry = false; 对象 window.document（对象）

6、在Javascript中，一切都是对象

var num = 10; //Number类的实例 var str =‘hello’;//String类的实例 var flag = true; //Bool类的实例 var per = new Person(); //自定义类 问题：在我们的javascript中定义一个函数，怎么能确定它是采用函数调用还是以构造器方式进行使用？ function abc() {} window.abc(); 说明：在Javascript中，一切都是对象，我们定义的函数如果是通过以上方式，其实也是采用面向对象方式进行调用的，因为我们在Javascript中定义的属性或方法都是向window对象中添加属性。

7、面向对象中的三大关键词

constructor：返回原型对象所指向的构造函数 typeof：查看当前对象的数据类型 instanceof：判断当前对象是否属于某个类 调用方式： alert( p.constructor ); alert( typeof p ); alert( p instanceof person ); 示例代码：主要用于判断对象信息，排错处理

8、思考题：

1）思考题：如果创建第二个对象，会拥有name和age属性吗？？？ var p1 = new Person(); p1.name = ‘zhangsan’; p1.age = 30; var p2 = new Person(); 答：以上代码，运行后，我们发现p2对象并不会拥有p1对象的name和age属性。 原理如下：

三、对象在内存中的存储形式

1）值类型

Number、String、Bool、Undefined、Null 值类型在内存中的存储形式如下：

2）引用类型

Object对象

思考题2：如果创建第二个对象p2，使用p1为p2赋值会怎样？ var p1 = new Person(); p1.name = ‘zhangsan’; p1.age = 30; var p2 = p1; 答：原理图如下：

思考题3、如果删除了p2对象，是否会影响到p1对象 p2 = null; 答：不会，原理图如下：

四、Javascript中this指针

回顾PHP代码中this指针：指向当前对象 在Javascript中，this指针： 问题：在Javascript中，我们的对象的属性都是动态添加，又没办法直接在创建对象时自动拥有类中的属性或方法？ 答：可以，通过this指针

1、this指针

例1：通过this指针让我们的对象拥有类中的属性或方法

效果：

说明：通过以上代码运行可知： 在Javascript中，谁调用了函数，那么函数内部的this指针就指向哪里 例2：改进例1，让我们创建的对象自动拥有自己的属性

2、深入探讨Javascript中是this指针

其实，在Javascript全局变量中，也存在this指针，其指向window全局对象

思考题： 1、尝试理解下面两条语句： i=10; alert(this.i);//this指向window对象,this.i == window.i; 2、 function test(){ this.i=100; } i=10; test(); alert(this.i); 示例代码：

运行结果：100

3、思考题

var i=100; function test(){ i=200; } test() alert(i); 结果：200

4、对象间传值

1）把对象作为函数的参数进行传递 2）把对象作为函数返回值 1）把对象作为函数的参数进行传递 例1：计算机长方形的面积（长*宽） 示例代码：实例化一个Person对象，再将该对象当做display的参数

运行结果：

2）把对象作为返回值返回 例2：计算两个数的四则运算（加减乘除）

运行结果：