传智 韩顺平 html+css+javascrtpt 课程笔记2吐血整理.docx

1、传智 韩顺平 html+css+javascrtpt 课程笔记2吐血整理javascript 2=1. js面向/基于对象编程-类（原型对象）与对象（实例）(1) js面向/基于对象特征介绍 Javascript是一种基于对象（object-based）的动态脚本语言，你遇到的所有东西都是对象。js的面向对象技术广泛应用于AJAX等优秀框架。特别说明：基于对象也好，面向对象也好，实际上都是以对象的概念来编写程序。从本质上并无区别，所以这两个概念在课程中是一样的。 因为javascript中没有class(类)，所以有人把类也称为原型对象。其实这两个概念在编程中发挥的作用都看成一个意思。(2)

2、为什么需要原型对象（类）？例子：张老太养了两只猫猫：一只猫叫小白，今年3岁，白色；还有一只叫小花，今年5岁，花色。(3) 类（原型对象）如何自定义类（原型对象）和对象创建类的方式有5中方法： 工厂方法使用new Object创建对象并添加相关属性 使用构造函数来定义类（原型对象）：上面的Cat类就是用此种方法基本语法： function 类名/原型对象名() 创建对象： var 对象名=new 类名/原型对象名(); 使用prototype 构造函数及原型混合方式 动态原型方式2. 如何判断一个对象实例是不是Cat类型？ if(a instanceof Cat) window.alert(“a

3、是Cat的实例”) if(a.constructor= Cat) window.alert(“a是Cat的实例”) 3. 带var和不带var的区别 var abc=89; function test() abc=900; /在函数里，如果不带var，则表示使用全局的abc变量89。 /如果带var，则表示在函数中，定义一个新的私有的abc变量。 test(); window.alert(abc);4. 对象垃圾回收机制js的对象垃圾回收机制和java类似，此外js也提供了一种主动释放内存的方法：delete 对象名.属性名; /立即释放对象的属性空间5. js中this问题的提出：funct

4、ion Person()var p1=new Person();p1.name=”小明”;p1.age=22;window.alert(p1.name+” ”+p1.age);var p2=new Person();window.alert(p2.name);在这里我们可以看到window.alert(p2.name)会输出undefined；在实际的编程中，我们可能有这样的需求，当我们创建了一个对象后，就希望该对象自动的 拥有某些属性。【比如：当我们创建了一个Person对象后，就希望该对象自动拥有name和age属性，这又怎么办？】可以使用this解决。function Person()

5、this.name=”abc”; this.age=10;var p1=new Person();var p2=new Person();window.alert(p1.name+” ”+p2.name); this的作用在于将成员公开化，允许外部访问使用。 哪个对象实例调用this所在的函数，那么this就代表哪个对象实例。注意：this不能在类定义的外部使用，只能在类定义的内部使用。否则就变成了window的。6. 私有成员变量和公有成员变量7. 成员函数 function Person(name,age) /这个就是使用传入的实际参数去初始化形参 this.name=name; this

6、.age=age; /输出自己名字的函数 this.speak=function() document.write(名字：+this.name); this.jisuan=function() var res=0; for(var i=0;i1000;i+) res+=i; return res; /函数可以接受参数 this.jisuan2=function(n) var res=0; for(var i=0;in;i+) res+=i; return res; var person=new Person(张三,22); person.show();8. 怎么实现原型对象滞后绑定 funct

7、ion Dog(name,age) this.name=name; this.age=age; var dog1=new Dog(“阿黄”,2); /动态绑定一个函数show dog1.show=function() document.write(小狗的名字+this.name+年龄：+this.age)； /调用show函数 dog1.show(); var dog2=new Dog(“小黑”,3); dog2.show();/此处就会报错，因为show是dog1独有的一份。怎么解决上述出现的问题呢？ function Dog(name,age) this.name=name; this.a

8、ge=age; /使用prototype动态绑定一个共享的函数show Dog.prototype.show=function() document.write(小狗的名字+this.name+年龄：+this.age)； var dog1=new Dog(); /调用show函数 dog1.show(“阿黄”,2); var dog2=new Dog(“小黑”,3); dog2.show();/注：使用prototype方式动态绑定函数不能访问类中的私有变量和方法！9. 成员函数几种特殊添加方式10. Object类11. Array类12. 构造函数function 类名(参数列表)属性=

9、参数列表;例如：function Person(name,age)this.name=name;this.age=age; /创建Person对象的时候就可以直接给出名字和年龄var p1= new Person(ABC,20);window.alert(p1.name);13. 创建对象的另一种形式如果一个对象比较简单，我们可以这样创建，指定普通属性和函数属性：var person=name: abc, age: 22, fun1=function()window.alert(hello world!) ;14. 函数调用的另外几种方式等价于普通方式，默认都有window普通方式15. 封装

10、 js提供有以下几种控制方法和属性的访问权限： 公开级别：对外公开 私有级别：类本身可以访问，不对外公开. 16. 继承（1）问题引出（2）解决办法继承注：js中实际上是通过对象冒充来实现继承机制的，支持多重继承！17. 重载与覆盖（1）js不支持重载，但天然支持可变参数function test(a) window.alert(a); function test(a,b) window.alert(a+ +b); test(23);结论：js在调用一个函数时，是根据函数名来调用的。如果有多个函数名相同，则默认最后一个函数。（2）Js支持覆盖子类可以重新写函数，来覆盖父类的某个方法。1

11、8. 多态19. 闭包Closure1) 闭包和gc是相关的 2) 闭包实际上是涉及到一个对象的属性何时被gc处理的问题 3) 怎样才能对对象的属性形成一个闭包 function A() var i=0; function b() window.alert(i+); return b; A(); /此时内存中i空间被gc处理 var c=A(); /这种用c接收A()结果的用法，gc不会把i当作垃圾 c(); /输出0c(); /输出1，从而证明i变量被闭包 20. js的内部类js中本身有提供一些可以直接使用的类就是内部类，主要有：Object/Array/Math/Boolean/Stri

12、ng/RegExp/ Date/Number Object类（在前面有介绍） Math类的常用方法1abs(x) 返回数的绝对值 2ceil(x) 对一个数进行上舍入3floor(x) 对一个数进行下舍入 4max(x,y) 求x,y中较大的数5mix(x,y) 求x,y中较小的数 6round(x) 对x进行四舍五入的整数7random() 一个大于0小于1的16位（不是16进制）小数 Date类的常用方法（动态类，需要先创建对象才能使用）1Date() 返回当前日期时间对象（系统格式UTC） 2getDate() 从Date对象返回一个月中的某一天(1 31) 3getDay() 从Dat

13、e对象返回一周中的某一天 (0 6) 4getMonth() 从Date对象返回月份(0 11) 5getFullYear() 从Date对象返回年（不推荐使用getYear()） 6getHours() 从Date对象返回小时数(0 23) 7getMinutes() 从Date对象返回分钟(0 59) 8getSeconds() 从Date对象那个返回秒(0 59) String类的常用方法（动态类，需要先创建对象才能使用）1length属性，可以得到字符串的长度 2indexOf 返回某个字符串值在该字符串中首次出现的位置 3split() 把字符串分割为字符串数组 4注意区分subst

14、r() 提取取从start下标开始的指定数目的字符5substring() 提取字符串中介于两个指定下标之间的子串 6charAt() 返回指定位置的字符 7toString() 所有内部对象的成员方法，将对象中的数据转换成某个格式的字符串 8match()/replace()/search() 用的很多，涉及到正则表达式，后续介绍 Array类的常用方法（动态类，需要先创建对象才能使用）1length属性，可以得到数组的长度2concat() 连接两个或更多的数组，并返回结果 3sort() 对数组的元素进行排序 4toString() 把数组转换为字符串，并返回结果 5pop() 删除并返

15、回数组的最后一个元素 6push() 向数组的末尾添加一个或更多元素，并返回新的长度 Boolean类 1toString() 把逻辑值转换为字符串，并返回结果 2valueOf() 返回Boolean对象的原始值 Number类 1toString() 把一个Number对象转换为一个字符串，并返回结果（若()里不输入值，则默认表示为十进制，可以输入2,8,10,16分别表示对应的进制数） 22) toFixed() 把数字转换为字符串，结果的小数点后有指定位数的数字21. 常用系统函数不是很完美用处很大22. 事件驱动机制js是采用事件驱动(event-driven)机制来响应用户操作的。

16、 比如通过鼠标或者按键在浏览器窗口或者网页元素(按钮、文本框、浏览器窗口.)上执行的操作，我们称之为事件(Event)。 由鼠标或热键引发的一连串程序的动作，称之为事件驱动(Event-Driver)。 对事件进行处理程序或函数，我们称之为事件处理程序(Event Handler)，可以有多个。监听 事件的分类 案例：监听鼠标点击事件，并显示鼠标点击的坐标x和y和当前时间 function test1(event) alert(“已监听到鼠标点击”);x=event.clientX; /返回当前鼠标点击事件的x坐标y=event.clientY; /返回当前鼠标点击事件的y坐标alert(X

17、coords: + x + , Y coords: + y); function test2() alert(new Date(); js访问CSS技术（1）访问元素中style属性的CSS样式这个可以直接使用style对象方便的访问：.访问CSS: /获得元素var oDiv = document.getElementyId(mdiv);/访问元素的style对象,再访问对象中的属性,也可以修改属性的值,直接为他赋值alert(oDiv.style.backgroundColor);（2）访问外部定义的CSS样式（类定义的CSS样式）这个没法使用上面的方法去访问，因为CSS数据不是存储在st

18、yle属性中，它是存储在类中的。访问方法：先取得定义类的样式表的引用，用document.styleSheets集合实现这个目的，这个集合包含HTML页面中所有的样式表，DOM为每个样式表定义一个cssRules的集合，这个集合中包含定义在样式表中的所用CSS规则（注意：Mozilla和Safasi中是cssRules，而IE中式rules）。/*第一条规则*/div.ssbackground-color:red;width:101px;/*第二条规则*/a.btn2第一个CSS文件background:url(imag/2-AccessCtl.jpg);访问CSS:var ocssRules

19、 = document.styleSheets0.cssRules|document.styleSheets0.rules;/访问第一条规则alert(ocssRules0.style.backgroundColor);第一条规则/设置值ocssRules0.style.width = 992px;/访问第二条规则第二条规则alert(ocssRules1.style.background);/设置值ocssRules0.style.background = url(imag/3-back.jpg);注：在js中获取background-color写的是backgroundColor； 具体深入的使用可以参看JavaScript高级程序设计中DOM技术部分。23. js常用事件案例1：window的三个事件动作onload、onbeforeunload和onunloadonload：页面一打开时，可以用作打开页面后自动定位鼠标焦点到输入框中onbeforeunload：页面被关闭前onunload：页面被关闭后案例2：oncontextmenu：防止用户通过点击鼠标右键菜单拷贝网页内容onselectstart：当用户试图选中网页文字拷贝时，给出文字提示“版权所有,禁止拷贝”