JavaScript 基础培训（三）

JavaScript基础培训（三） By 陈古松 2013年9月27日

目标理解那些困扰我们的概念函数----黑箱操作面向对象or 面向过程----指挥者 or 操作者

函数

函数模型 代码块参数1 参数2 返回值参数.. 黑盒子模型（从用户角度）用户从来不关心我们的魔术是如何创造出来了，他们只关心结果

变量的作用域 全局变量局部变量

函数结构体 1、使用function语句： Function functionName(x1,x2,x3…..){ //函数行为,要善用注释 return y } 参数：x1、x2、x3、...... 函数名：functionName（语义化）返回结果：return y(并不是所有) 2、利用函数直接量 varfunctionName=function(x1,x2,x3{ //函数行为 return y } 3、匿名函数： function(x1,x2,x3……){ //函数行为,要善用注释 return y }

函数的作用 思考：我们平时是如何用css来控制网页样式的？设定class 或者id或者就用tagNames 在html中建立盒子为每个盒子进行css样式定义 WHY？

函数的作用 但我们会遇上这么一个情况：神奇的css3可以帮我们实现渐变效果，但是它的代码却： filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) ; progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); background:red; background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))); 如果我们要多次使用渐变效果，我们该怎么做呢？定义class，需要时引用

函数的作用 小小总结：常用情况：特殊情况：先有盒子结构，后定义功能先有功能，后引用于盒子结构函数的作用：创造的是一个功能，可以重复被使用

函数的特征 回到css，再思考一个问题：在使用线性渐变时候我们考虑盒子的大小同时加上圆角、阴影、字体颜色等功能，合适吗？函数功能的单一性

函数的特征 思考一下函数能否共存： function add(x1,x2){ var y=x1+x2; return y; } function add(x1,x2,x3){ var y=x1+x2+x3; return y; } 重载：因传入的参数不同或因函数的类型不同，允许同名函数存在且相互不干扰 JS函数不能重载

函数的调用 varnewName= functionName(x1,x2,x3.....) 若无参数，则只用functionName(); 值得注意的是：当函数无参数时，会有特殊情况出现，如我们遇到过的 window.onload=oneName; function oneName(){ body; } 这里没有可爱的括号？

对象

谈论对象 抽象事物具体事物 Everything is an Object

面向对象与面向过程 让我们看看描述厚朴工作室的方法：厚朴工作室存在了11多年了，厚朴工作室有许多图书，厚朴工作室有许多双屏幕电脑，厚朴工作室为整个化院服务，厚朴工作室不间断会有图书被买进，厚朴工作室会为厚朴工作室成员进行培训面向对象：厚朴工作室为主题，谈论其属性与方法换一个方式：老大在2002年成立了厚朴工作室，老师为厚朴工作室增加了许多设备，图书管理员买了许多书并且定期会更新，会有专业人士为厚朴工作室举行培训面向过程：操作者为主题，谈论其操作过程

属性与方法 属性：对象所用的性质方法：对象所具有的能力，可以被操作，实质是接口厚朴工作室存在了11年了属性：厚朴工作室有许多图书厚朴工作室有许多双屏幕电脑厚朴工作室化院老师调用厚朴工作室有为化院服务的能力图书购买这调用厚朴工作室有买进图书的能力方法：培训者调用厚朴工作室有培训的能力

对象的分类 Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError 本地对象：内置对象： Math对象、Global对象（不需要实例化）宿主对象：寄宿在浏览器上的对象：Window、Document、History等

函数与对象 思考：函数是不是对象？函数可以看成是只具有单一功能的对象；而对象也可以看成是可以具有多功能的函数，对象内部也可调用函数，对象的方法从本质来看也是函数小小提示：一般情况书都不会严格控制函数的单功能性，但个人写程序时思考好是函数或者对象

对象的实例化 我们创造的对象实际上并不是简简单单的对象，而是对象的集合类，当我们调用对象时，需要赋予对象单独的个体含义，即实例化我们创造人这个对象时，实际上说的是人类，而我们要具体描述某个人时，就需要赋予对人类的实例化，当描述另外一个人时，需要再次实例化实例化方法：我们所熟悉的关键字：new function Object(x1,x2,x3){ } var object1=new Object(X1,X2,X3){ } varobject2=new Object(Y1,Y2,Y3){ }

封装与接口 封装：在程序上，隐藏对象的属性和实现细节，仅对外公开接口，控制在程序中属性的读和修改的访问级别；将抽象得到的数据和行为（或功能）相结合，形成一个有机的整体，也就是将数据与操作数据的源代码进行有机的结合，形成“类”，其中数据和函数都是类的成员意义：数据与程序的保护，非诚勿扰降低使用的难度与增加使用的便捷性，例如JQuery 注意：需要好的接口说明文档或注释

继承与多态 继承与多态可以说是对逻辑性思维的一个体现一个例子：对象----人--------人有名字，人有年龄，人有思维能力；对象----小孩-----小孩是人，所以小孩有名字，有年龄，也有思维能力小孩还有哭的能力----------------特性小孩（子类）继承了人（父类）这个对象继承的作用：增强对象的复用性、可扩展性小小测试（判断错误）：会网管知识的要接一些网管任务，我不会网管知识，所以我不要接网管任务吃货在非三餐时间会吃其他东西，我不是吃货，所以我在三餐外不吃其他东西

继承与多态 继承实例：http://ce.sysu.edu.cn/hope/Item/108929.aspx 思考：假设已经已经建立了人（父）和小孩（子）这两个对象并确立了继承关系，当出现一个具体小孩是，我们在可以怎么描述小孩？ 1.具体的小孩肯定是小孩，所以可以用小孩来描述多态：子类可以用父类来描述（向上转型） 2.小孩也是人，所以可以用人来描述这个小孩思考：可不可以用小孩（子）来描述人（父）？可以，把所有的除小孩外的其他人干掉，人就等同于小孩了。向下转型：这是非常暴力的，常常是精度的损失或出现意外情况

回顾概念 封装继承多态对象类型属性与方法重复实例化函数对象重载面向对象（OOP) 面向过程函数作用域类

作业 1、学习函数与对象里面有许多许多的代码知识。 PS:只有懂了DOM相关知识后才能把JS所写的东东真正放在网页中，先学习DOM也是提供可操作的平台 2、模仿http://ce.sysu.edu.cn/hope/Item/108929.aspx的范例写一个继承相关的实例，重在体验，主题可以任选。 3、复习DOM的相关知识，以减轻下次培训的负担。

Thank you

JavaScript 基础培训（三）