传智 韩顺平 html+css+javascrtpt 课程笔记2吐血整理.docx
《传智 韩顺平 html+css+javascrtpt 课程笔记2吐血整理.docx》由会员分享，可在线阅读，更多相关《传智 韩顺平 html+css+javascrtpt 课程笔记2吐血整理.docx（24页珍藏版）》请在冰豆网上搜索。
传智韩顺平html+css+javascrtpt课程笔记2吐血整理
javascript2
===============================================================================
1.js面向/基于对象编程-----类（原型对象）与对象（实例）
（1）js面向/基于对象特征介绍
ØJavascript是一种基于对象（object-based）的动态脚本语言，你遇到的所有东西都是对象。
js的面向对象技术广泛应用于AJAX等优秀框架。
☞特别说明：
基于对象也好，面向对象也好，实际上都是以对象的概念来编写程序。
从本质上并无区别，所以这两个概念在课程中是一样的。
Ø因为javascript中没有class（类），所以有人把类也称为原型对象。
其实这两个概念在编程中发挥的作用都看成一个意思。
（2）为什么需要原型对象（类）？
例子：
张老太养了两只猫猫：
一只猫叫小白，今年3岁，白色；还有一只叫小花，今年5岁，花色。
（3）类（原型对象）————如何自定义类（原型对象）和对象
创建类的方式有5中方法：
Ø工厂方法——使用newObject创建对象并添加相关属性
Ø使用构造函数来定义类（原型对象）：
上面的Cat类就是用此种方法
基本语法：
function类名/原型对象名（）{
}
创建对象：
var对象名=new类名/原型对象名（）;
Ø使用prototype
Ø构造函数及原型混合方式
Ø动态原型方式
2.如何判断一个对象实例是不是Cat类型？
✧if（ainstanceofCat）{
window.alert（“a是Cat的实例”）
}
✧if（a.constructor==Cat）{
window.alert（“a是Cat的实例”）
}
3.带var和不带var的区别
varabc=89;
functiontest（）{
abc=900;
//在函数里，如果不带var，则表示使用全局的abc变量89。
//如果带var，则表示在函数中，定义一个新的私有的abc变量。
}
test（）;
window.alert（abc）;
4.对象垃圾回收机制
js的对象垃圾回收机制和java类似，此外js也提供了一种主动释放内存的方法：
delete对象名.属性名;//立即释放对象的属性空间
5.js中this问题的提出：
functionPerson（）{
}
varp1=newPerson（）;
p1.name=”小明”;
p1.age=22;
window.alert（p1.name+””+p1.age）;
varp2=newPerson（）;
window.alert（p2.name）;
在这里我们可以看到window.alert（p2.name）会输出undefined；
在实际的编程中，我们可能有这样的需求，当我们创建了一个对象后，就希望该对象自动的拥有某些属性。
【比如：
当我们创建了一个Person对象后，就希望该对象自动拥有name和age属性，这又怎么办？
】可以使用this解决。
functionPerson（）{
this.name=”abc”;
this.age=10;
}
varp1=newPerson（）;
varp2=newPerson（）;
window.alert（p1.name+””+p2.name）;
Øthis的作用在于将成员公开化，允许外部访问使用。
Ø哪个对象实例调用this所在的函数，那么this就代表哪个对象实例。
注意：
this不能在类定义的外部使用，只能在类定义的内部使用。
否则就变成了window的。
6.私有成员变量和公有成员变量
7.成员函数
functionPerson（name,age）{
//这个就是使用传入的实际参数去初始化形参
this.name=name;
this.age=age;
//输出自己名字的函数
this.speak=function（）{
document.write（"名字：
"+this.name）;
}
this.jisuan=function（）{
varres=0;
for（vari=0;i<1000;i++）{
res+=i;
}
returnres;
}
//函数可以接受参数
this.jisuan2=function（n）{
varres=0;
for（vari=0;ires+=i;
}
returnres;
}
}
varperson=newPerson（"张三",22）;
person.show（）;
8.怎么实现原型对象滞后绑定
functionDog（name,age）{
this.name=name;
this.age=age;
}
vardog1=newDog（“阿黄”,2）;
//动态绑定一个函数show
dog1.show=function（）{
document.write（"小狗的名字"+this.name+"年龄：
"+this.age）；
}
//调用show函数
dog1.show（）;
vardog2=newDog（“小黑”,3）;
dog2.show（）;//此处就会报错，因为show是dog1独有的一份。
怎么解决上述出现的问题呢？
functionDog（name,age）{
this.name=name;
this.age=age;
}
//使用prototype动态绑定一个共享的函数show
Dog.prototype.show=function（）{
document.write（"小狗的名字"+this.name+"年龄：
"+this.age）；
}
vardog1=newDog（）;
//调用show函数
dog1.show（“阿黄”,2）;
vardog2=newDog（“小黑”,3）;
dog2.show（）;//
注：
使用prototype方式动态绑定函数不能访问类中的私有变量和方法！
9.成员函数几种特殊添加方式
10.Object类
11.Array类
12.构造函数
function类名（参数列表）{
属性=参数列表;
}
例如：
functionPerson（name,age）{
this.name=name;
this.age=age;
}
//创建Person对象的时候就可以直接给出名字和年龄
varp1=newPerson（‘ABC’,20）;
window.alert（p1.name）;
13.创建对象的另一种形式
如果一个对象比较简单，我们可以这样创建，指定普通属性和函数属性：
varperson={name:
’abc’,
age:
22,
fun1=function（）{
window.alert（‘helloworld!
’）
}
};
14.函数调用的另外几种方式
等价于普通方式，默认都有window
普通方式
15.封装
js提供有以下几种控制方法和属性的访问权限：
☞公开级别：
对外公开
☞私有级别：
类本身可以访问，不对外公开.
16.继承
（1）问题引出
（2）解决办法——继承
注：
js中实际上是通过对象冒充来实现继承机制的，支持多重继承！
17.重载与覆盖
（1）js不支持重载，但天然支持可变参数
functiontest（a）{
window.alert（a）;
}
functiontest（a,b）{
window.alert（a+’ ’+b）;
}
test（23）;
结论：
js在调用一个函数时，是根据函数名来调用的。
如果有多个函数名相同，则默认最后一个函数。
（2）Js支持覆盖
子类可以重新写函数，来覆盖父类的某个方法。
18.多态
19.闭包Closure
1）闭包和gc是相关的
2）闭包实际上是涉及到一个对象的属性何时被gc处理的问题
3）怎样才能对对象的属性形成一个闭包
functionA（）{
vari=0;
functionb（）{
window.alert（i++）;
}
returnb;
}
A（）;//此时内存中i空间被gc处理
varc=A（）;//这种用c接收A（）结果的用法，gc不会把i当作垃圾
c（）;//输出0
c（）;//输出1，从而证明i变量被闭包
20.js的内部类
js中本身有提供一些可以直接使用的类就是内部类，主要有：
Object/Array/Math/Boolean/String/RegExp/Date/Number
ØObject类（在前面有介绍）
ØMath类的常用方法
1 abs（x）返回数的绝对值
2 ceil（x）对一个数进行上舍入
3 floor（x）对一个数进行下舍入
4 max（x,y）求x,y中较大的数
5 mix（x,y）求x,y中较小的数
6 round（x）对x进行四舍五入的整数
7 random（）一个大于0小于1的16位（不是16进制）小数
ØDate类的常用方法（动态类，需要先创建对象才能使用）
1 Date（）返回当前日期时间对象（系统格式UTC）
2 getDate（）从Date对象返回一个月中的某一天（1~31）
3 getDay（）从Date对象返回一周中的某一天（0~6）
4 getMonth（）从Date对象返回月份（0~11）
5 getFullYear（）从Date对象返回年（不推荐使用getYear（））
6 getHours（）从Date对象返回小时数（0~23）
7 getMinutes（）从Date对象返回分钟（0~59）
8 getSeconds（）从Date对象那个返回秒（0~59）
ØString类的常用方法（动态类，需要先创建对象才能使用）
1 length属性，可以得到字符串的长度
2 indexOf返回某个字符串值在该字符串中首次出现的位置
3 split（）把字符串分割为字符串数组
4
注意区分
substr（）提取取从start下标开始的指定数目的字符
5 substring（）提取字符串中介于两个指定下标之间的子串
6 charAt（）返回指定位置的字符
7 toString（）所有内部对象的成员方法，将对象中的数据转换成某个格式的字符串
8 match（）/replace（）/search（）用的很多，涉及到正则表达式，后续介绍
ØArray类的常用方法（动态类，需要先创建对象才能使用）
1 length属性，可以得到数组的长度
2 concat（）连接两个或更多的数组，并返回结果
3 sort（）对数组的元素进行排序
4 toString（）把数组转换为字符串，并返回结果
5 pop（）删除并返回数组的最后一个元素
6 push（）向数组的末尾添加一个或更多元素，并返回新的长度
ØBoolean类
1 toString（）把逻辑值转换为字符串，并返回结果
2 valueOf（）返回Boolean对象的原始值
ØNumber类
1 toString（）把一个Number对象转换为一个字符串，并返回结果（若（）里不输入值，则默认表示为十进制，可以输入2,8,10,16分别表示对应的进制数）
2 2）toFixed（）把数字转换为字符串，结果的小数点后有指定位数的数字
21.常用系统函数
不是很完美
用处很大
22.事件驱动机制
js是采用事件驱动（event-driven）机制来响应用户操作的。
✧比如通过鼠标或者按键在浏览器窗口或者网页元素（按钮、文本框、浏览器窗口...）上执行的操作，我们称之为事件（Event）。
✧由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event-Driver）。
✧对事件进行处理程序或函数，我们称之为事件处理程序（EventHandler），可以有多个。
监听
Ø事件的分类
Ø案例：
监听鼠标点击事件，并显示鼠标点击的坐标x和y和当前时间
functiontest1（event）{
alert（“已监听到鼠标点击”）;
x=event.clientX;//返回当前鼠标点击事件的x坐标
y=event.clientY;//返回当前鼠标点击事件的y坐标
alert（"Xcoords:
"+x+",Ycoords:
"+y）;
}
functiontest2（）{
alert（newDate（））;
}