|
JavaScript巩固与加强三 目录 一、面向对象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：计算机长方形的面积（长*宽） 示例代码：
运行结果：
2）把对象作为返回值返回 例2：计算两个数的四则运算（加减乘除）
运行结果：
五、属性遍历与删除1、使用for…in…遍历自定义对象属性基本语法： for…in…（主要是完成对对象的遍历） 示例代码:
运行效果：
说明：在17行代码，不能使用p1.i形式进行自定义对象属性的遍历，否则会弹出undefined，原因是因为当代码识别到p1对象会认为p1.i是访问p1对象的i属性，由于没有定义i属性，所以系统会弹出3个undefined。 2、使用for…in…结构实现系统对象的遍历window document 示例代码：
运行效果：
3、属性删除操作在Javascript，有时我们可能并不需要某个对象的某个属性，这个时候我们可以采用delete关键词实现对自定义属性的删除操作 基本语法： delete 对象.属性 删除指定属性 示例代码：
运行效果：
六、成员方法1、基本语法： 对象.属性 = 函数的首地址 例1：为对象添加speak说话方法
例2：创建对象p2，为p2添加speak说话方法
观察以上代码，与例1中的p1对象的成员方法完全一致，似乎代码出现了重叠，改进上题 例3：改进上题
例4：由于以上代码有很多重复性的代码，那么我们可以对以上代码进行封装
七、json对象1、什么是json对象是指属性的无序集合 所谓“集合”是指名/值对的集合，名/值对之间是通过 ，逗号隔开的 在js中，可以使用{}来表示这个集合 2、基本语法var 变量 = {}; 第一种：{'属性’:’属性的值’, '属性’:’属性的值’, '属性’:’属性的值’} 第二种：{“属性”:”属性的值”, “属性”:”属性的值”, “属性”:”属性的值”} 第三种：{属性:’属性的值’,属性:’属性的值’,属性:’属性的值’,} 3、快速入门例1：通过json对象描述一个人的信息
4、json对象从“何”而来
通过以上代码可以证明： json对象是Object类的一个实例，其实在Javascript中，Object类是所有类的基类，所有的对象都继承了Object类的属性。 json对象主要用于大批量数据的保存 例2：通过json对象保存多个人的信息
5、php与json在php提供了两个生成与解析json格式的函数 json_encode(数组或对象) 数组通常采用关联性数组 json_decode(json格式字符串) ajax xml ajaj json 1）把数组转化为json格式的数据
2 ) 把对象转换成json格式的数据
说明：在json_encode函数中，目前只支持UTF-8，如果是GBK或GB2312请通过iconv进行转化，否则无法使用或无法得到正常数据 3）把二维数组转化为json格式数据
4）json_decode代码解析 json_decode($json对象,[bool]) 功能：把json格式数据反转化 参数说明： 第一个参数是json格式数据 第二个参数是布尔类型的值，如果为true，则返回array数组类型的数据，如果是false或不填写，则直接返回stdClass类的实例（对象）
不加true参数效果
案例：通过php+json完成对历史上的今天api接口调用http://www./聚合数据
a）复制url地址http://japi./toh/toh?key=您申请的KEY&v=1.0&month=11&day=1 参数说明 key：密钥 v：版本1.0 month：月份 day：天 b）通过接口可知，其属于get请求
效果如下：
6、为json对象添加成员方法
运行效果：
八、原型链1、什么是原型对象？答：当系统加载构造器时，系统会自动生成一个对象，我们把这个对象就称之为原型对象。 构造器与原型对象在内存中是相互独立的，但是其还有联系： 在构造器中存在一个prototype属性，指向原型对象 原型对象也存在属性指向构造器
2、原型对象作用？当构造器的实例访问一个不存在的属性时，系统会自动到构造器的原型对象中去寻找，如找到则直接使用。
当我们在某些已存在的框架或对象中找不到我们想要属性或方法，我们可以借助原型对象，把需要的属性或方法追加到原型对象。 3、如何向原型对象中添加属性或方法构造器.prototype.属性=属性的值
4、探讨：原型对象到底从何而来说明：当系统创建原型对象，系统会自动执行以下代码 构造器.prototype = new Object(); 由于原型对象都是Object类的实例，那么根据面向对象原则，我们的原型对象会自动继承Object类中属性和方法。 示例代码：
说明：当我们运行到第14行，系统自动访问p1对象的hasOwnPropery属性，但由于系统中并不存在hasOwnProperty属性，所以会到Person构造器的原型对象中去寻找，没有找到，又由于所有的原型对象都是Object类的实例，所以原型对象会自动继承Object类下面的所有的属性和方法，所以发现该行代码正常执行，原理图如下：
我们把以上情况就称之为原型继承，通过以上图解也可以证明，Object类是所有类的基类。
说明：在Javascript中，当某一个对象引用一个不存在属性或方法时，系统首先到当前构造器的原型对象中去寻找，如还找不到，其会到上一层原型对象中去寻找，直至Object原型对象，我们把这种链接查找关系就称之为原型链。 作业：扩展数组类的功能：（Array） 为每一个数组对象添加一个方法，可以查找某个元素的所在位置 var arr = [10,20,30,40,50]; arr.find(40); 2、扩展数字类的功能（Number） 为一个数字对象添加一个方法，该方法的参数为任意数目的整数，然后将所有参数累加到一起，并返回总和 var i = 10; i.sum(10,30,40,50,60,60); |
|
|
