HTML 學習筆記 May 12，2017 JS 物件導向三大特徵（封裝、繼承、多型）、多型經典案例、補講閉包細節、js內部類、js系統函式、js事件驅動機制、js事件分類、js訪問css技術...

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哈哈~