HTML 学习笔记 May 12，2017 JS 面向对象三大特征（封装、继承、多态）、多态经典案例、补讲闭包细节、js内部类、js系统函数、js事件驱动机制、js事件分类、js访问css技术
js 面向对象编程的三大特性，
① 封装
通过prototype 给所有的对象和方法，但是这种方式，不能访问类的私有变量和方法。
② 继承
解决代码冗余问题
function Stu (name,age) {
this.name = name;
this.age = age;
this.show = function() {
window.alert(this.name + " " + this.age);
}
}
function MidStu (name,age) {
this.stu = Stu;
this.stu(name,age); // js 中实际上是通过对象冒充,来实现继承,这句话不能少
}
function Pupil (name,age) {
this.stu = Stu;
this.stu(name,age);
}
var midStu = new MidStu("doudou",20);
midStu.show();
现在来看一个多态的栗子🌰
function Master () {
// 给动物喂食
this.feed = function (animal,food) {
document.write("主人给" + animal.name + "喂" + food.name);
}
}
// 写食物
function Food(name) {
this.name = name;
// ...
}
// 鱼
function Fish(name) {
this.food = Food;
this.food(name);
}
// 骨头
function Bone(name) {
this.food = Food;
this.food(name);
}
// 动物
function Animal(name) {
this.name = name;
// ...
}
// 猫
function Cat(name) {
this.animal = Animal; // 对象冒充
this.animal(name);
}
// 狗
function Dog(name) {
this.animal = Animal;
this.animal(name);
}
var cat = new Cat("小猫咪");
var dog = new Dog("小狗");
var fish = new Fish("小鱼");
var bone = new Bone("骨头");
var master = new Master();
master.feed(cat,fish); // 主人给小猫咪喂小鱼
master.feed(dog,bone); // 主人给小狗喂骨头
闭包
// 闭包
function A() {
var i = 0;
function b() {
window.alert(i++);
}
return b;
}
// 闭包<--->gc 是个垃圾回收机制相关联的一个概念
A(); // 调用完之后 i 会被回收
A(); //
var c = A(); // 调用完之后 i 不会被回收
c(); // 0
c(); // 1
① 闭包和 gc（垃圾回收机制） 是相关联的
② 闭包实际上是涉及到一个对象的属性，何时被 gc 处理问题
③ 怎样才能对对象的属性形成一个闭包
内部类的分类：
从使用的方式看：分为静态类和动态类。
静态类的使用：类名.属性/方法
动态类：var 对象 = new 动态类（）对象 属性/方法
Math 类
① abs（x） 返回数的绝对值
② ceil（x） 对一个数进行上舍入
③ floor（x） 对一个数进行下舍入
④ max（x，y） 求 x，y 中较大的数
⑤ min（x，y） 求 x，y 中较小的数
⑥ round（x） 对 x 进行四舍五入
⑦ random（） 一个大于0 小于1 的16位小数位的数字
var date = new Date();
window.alert(new Date()); // Fri May 12 2017 15:06:45 GMT+0800 (CST)
window.alert(new Date().toLocaleString()); // 5/12/2017, 3:07:50 PM
window.alert(date);
window.alert(date.getYear() + " " + date.getMonth()); // 117 04 //这个时间有点奇怪,不知道是哪里出问题了
Date类
**********这里是截取字符串*********
var str = "abcd12345";
window.alert(str.length);
var str2 = "abc def oop";
var arr = str2.split(" "); // 如果("")就是一个一个分
window.alert(arr);
var str3 = "abcdef";
window.alert(str3.substr(1,3)); // bcd 从坐标 1 开始 截取 3 个数
window.alert(str3.substring(1,3)); // bc 从坐标 1 到 3
String 类
var str = "abcd12345";
window.alert(str.length);
var str2 = "abc def oop";
var arr = str2.split(" "); // 如果("")就是一个一个分
window.alert(arr);
var str3 = "abcdef";
window.alert(str3.substr(1,3)); // bcd 从坐标 1 开始 截取 3 个数
window.alert(str3.substring(1,3)); // bc 从坐标 1 到 3
var str4 = "abcd";
window.alert("chart" + str4.charAt(3)); // chartd
var str5 = "ab 123 56 ab";
window.alert("indexof" + str5.indexOf("ab",1)); // indexof10
Array 类
var myarr = new Array();
// 动态的添加数据
myarr[0] = "sp";
myarr[1] = 90;
window.alert(myarr.length + " " + myarr); // 2 sp 90
myarr.pop(); // 出栈
window.alert(myarr.length + " " + myarr); // 1 sp
myarr.push("abcd");
window.alert(myarr.length + " " + myarr); // 2 sp abcd
Number 类
① toString （） 把一个Number 对象转换为一个字符串，并返回结果。
② toFixed（） 把数字转换为字符串，结果的小数点后有指定位数的数字。// 这个是四舍五入的
js 系统函数-- 常用系统函数
1、eval（） // 可以把一个字符串当作脚本来运行，用处很大；
2、isNaN（） // 判断某个值是不是数（该函数不是特别完美） ；
鼠标事件：
当用户在页面上用鼠标点击页面元素时，对应的 dom 节点会触发鼠标事件。主要有 click 、dblclick、mousedown、mouseout、mouseover、mouseover、mouseup、mousemove等
键盘事件：
当用户用键盘输入信息时，会触发键盘操作事件。主要包括keydown、keypress、keyup三个。
HTML 事件：
在 html 节点加载变更等相关的事件，比如window的onload、unload、abort、error，文本框的select、change等等。
其他事件：
页面中的一些特殊对象运行过程中产生的事件，比如xmlhttp request 对象的相关事件。
这个包括ajax事件，O(∩_∩)O哈哈~
