javascript語言基礎（一）

基礎資料型別

Null Undefined String Array Boolean Function Object Number Date

注意點：
Null和Undefined
服務於不同的目的和理由。
區分：undefined代表一個意想不到的沒有值而null作為預期沒有值的代表
使用Object.prototype.toString.call()形式可以具體列印型別

null的用法
dom中是一個外部API，試圖獲取一個不存在的元素返回null
給變數或者屬性一個不可變值，傳遞給函式，或者函式返回null
作為物件原型鏈的終點
清除引用，垃圾回收

undefined的用法

變數被聲明瞭，但沒有賦值時，就等於undefined
試圖訪問一個不存在的物件屬性或陣列項
呼叫函式時，應該提供的引數沒有提供，該引數等於undefined
物件沒有賦值的屬性，該屬性的值為undefined
函式沒有返回值時，預設返回undefined
void操作符也可以返回一個undefined值

undefined == null //返回結果true
undefined === null //返回結果false
== 邏輯等 === 恆等

陣列Array

初始化
new Array()
new Array(size)
new Array(element,…,)
[]
[element,…]

物件操作方法
join() pop() push() shift() unshift() slice() splice() reverse() sort() concat()

字串包裝型別String

方法
charAt() charCodeAt() indexOf() lastIndexOf() replace() split()
slice() substr() substring() concat()
localCompare()
toLocalLowerCase() toLocalUpperCase() toLowerCase() toUpperCase()

Object

通過hasOwnProperty檢測屬性是否存在,如person.hasOwnProperty(“age”)

Function 函式

函式的定義
普通方式和匿名函式

全域性函式

Dates
定義
var date = new Date()
方法
getDate()
getFullyear() getMonth() getDate() getDay()
getHours() getMinutes() getSeconds()
setTime()
parse()
setFullyear() setMonth() setDate()
setHours() setMinutes() setSeconds()

其他要點

this 指標
1.函式的呼叫者是誰，那麼this指標指向誰
2.如果沒有宣告函式的呼叫者，那麼this指標指向window物件
3.例項化出來的物件，內部的this指標指向例項化物件

call和apply
call呼叫函式的基礎函式，傳遞引數時引數一個一個傳遞
apply呼叫函式的基本函式，傳遞引數時把引數放到陣列中傳遞
call和apply的第一個引數為null的時候，指向的是window物件，如果是物件，則指向該物件
arguments的使用

1.arguments是函式中被注入的一個引數，儲存該函式在執行時接受到的引數
2.可以使用索引的方式讀取每一個引數值
3.arguments每一個引數都可以被修改
4.arguments擁有callee屬性和length屬性
callee屬性指向函式自身，而length屬性獲取引數個數
5.當arguments指定所以的值被修改後，函式對應的形參值也發生修改

bind 語法

bind即是指將函式的this指標指向一個固定物件，即使使用call或apply修改this指標也無法修改

javascript語言基礎（二）

檢測型別

typeof 返回值是一個字串型別number,boolean,string,function,object,undefined
typeof null //返回object bug

instanceof運算子判斷某個建構函式的prototype屬性是否存在於另外一個要檢測物件的原型鏈之上

JSON

儲存和交換文字資訊的語法

轉換方法

javascript DOM

window 物件的屬性和方法

alert() confirm() prompt()


Document 

getElementById() getElementsByName() getElementsByTagName()

新增元素
createElement() appendChild() removeChild() insertBefore()

讀取和設定屬性
getAttribute() setAttribute()
讀取和設定樣式
dom.style.*** (行內樣式)
讀取父元素 兄弟元素
dom.parentNode dom.nextSibling dom.previousSibling
dom.nextElementSibling dom.previousElementSibling

文字框的讀取值和設定值

只讀和禁用的本質是dom上是否有readOnly 和disabled屬性
File元件不能設定為只讀狀態

表單提交前的檢查
dosubmit()方法


History
back() forward() go(number|URL)
Location 
assign(URL) reload() replace()
Navigator

appName appVersion platform 


Math

屬性
E LN2 LN10 PI
方法
abs(x) ceil(x) floor(x) max(x,y) min(x,y) pow(x,y) random() exp(x) round(x) sqrt(x)

css selector 選擇器

.class #id element element,element 

element element  element>element element+elelment

[attribute]  [attribute=value]  [attribute~=value] [attribute|=value]

後續部分需要查文件

正則表示式

1，建立正表示式
使用RegExp類建立
new RegExp(patterns,attributes)
直接建立正則表示式 
/patterns/attributes

引數patterns是指匹配模型  
attributes修飾符 
a).i 宣告該修飾符後，該匹配模型無視大小寫進行匹配
b).g 檢索字串全部內容,找到所有匹配項
c).m 檢索換行內容，及是即使遇到換行符時(\n)，仍可以查詢  
瞭解m屬性時需要先了解匹配模型的兩個關鍵字

^字首匹配
$字尾匹配

正則表示式物件一共三個函式
1).test 
用於檢測字串是否被正則表示式檢測通過
2).compile  
compile函式用於修改該正則表示式匹配模型(即patterns)
3).exec
當正則表示式有g修飾符時，每次執行將會返回本次匹配的結果，並且正則表示式物件會記錄已經查詢到的位置（lastIndex）,當找不到匹配時，該表示式返回一個null。當沒有g修飾符時，將一直返回首個匹配結果


[]方括號用於查詢某個範圍的字元

[abc] [^abc] [0-9] [a-z] [A-Z] [a-z|A-Z|0-9]

元字元(Metcharacter)是擁有特殊含義的字元

. 查詢單個字元，除了換行和行結束符
\w \W
\d \D
\s \S
\b \B

量詞

n+
n*
n?
n{x} n{x,y} n{x,}
n$ ^n  
?=n ?!n

事件

觸發過程

捕獲過程(capture phase)
目標階段(target phase)
冒泡階段(bubbling phase)

事件繫結方式

1，在標籤中直接使用onclick="fun();"
2，在DOM中直接用onclick="fun();"
3，attachEvent 和 addEventListener
非IE
target.addEventListener(type,listener,useCapture);
IE
target.attachEvent(type,listener);
一般這兩種方式結合使用，保證瀏覽器相容性
4，事件代理
事件的冒泡機制，所有子節點的事件會隨著父節點跑回去
可以監聽父節點來實現監聽子節點
event : 即儲存著事件冒泡過程中出現的目標物件，冒泡物件及滑鼠點選位置等資訊的一個上下文物件
優勢：減少事件繫結提升效能 動態化的DOM結構
5，阻止冒泡
```function stopBubble(event){
if(event.stopPropagation){
    event.stopPropagation();//非IE瀏覽器阻止冒泡動作的原生函式
}else{
    event.cancelBubble = true;//IE瀏覽器下阻止事件冒泡的原生函式
}
}```
6，移除監聽
```function removeEvent(dom, eventName, fn){
if(dom.detachEvent){
    dom.detachEvent("on"+eventName, fn);
}else{
    dom.removeEventListener(eventName, fn);
}
}```
7，阻止事件預設行為
```function preventDefault(event){
if(event.preventDefault){
    event.preventDefault();//非IE瀏覽器預設行為阻止
}else{
    event.returnValue = false;//IE瀏覽器下阻止預設行為
}
}```

javascript語言基礎（三）

閉包和原型

閉包的定義

在一個函式內部建立另外一個函式，新建的函式可以訪問外部函式的所有
變數和方法，該內部函式就是一個閉包。

閉包的作用

1，防止變數汙染
2，讓變數常駐記憶體
3，實現封裝
缺點
佔用記憶體較高

原型
js中，每一個函式物件都會有一個prototype屬性
該屬性稱為函式的原型
原型物件中的constructor 屬性指向該函式本身


1，支援類的概念
2，建構函式和原型函式間共享引數
3，節省記憶體使用

javascript語言基礎（四）

快取

快取方法

1.Cookie  所有瀏覽器均支援的快取方法
概述
cookie 是瀏覽器提供的一種機制，它將document 物件的cookie屬性提供給JavaScript。可以由JavaScript對其進行控制，而並不是JavaScript本身的性質。cookie是存於使用者硬碟的一個檔案，這個檔案通常對應於一個域名，當瀏覽器再次訪問這個域名時，便使這個cookie可用。因此，cookie可以跨越一個域名下的 多個網頁，但不能跨越多個域名使用。

設定

每個cookie都是一個名/值對，可以把下面這樣一個字串賦值給document.cookie： 
document.cookie=“name=zhangsan";
如果要一次儲存多個名/值對，可以使用分號加空格隔開，
例如：document.cookie=“sex=man; userName=hulk"; 
在cookie 的名或值中不能使用分號、逗號、等號以及空格。在cookie的名中做到這點很容易，但要儲存的值是不確定的。方法是用escape()函式進行編碼，它能將一些特殊符號使用十六進位制表示，例如空格將會編碼為“20%”，從而可以儲存於cookie值中，而且使用此種方案還可以避免中文亂碼的出現。

設定cookie時還需要關注的兩個引數是
expires : 超時時間
path : cookie路徑

```

function setCookie(key, value, expires, path){
if(!path){
    path = "/";
}

if(expires){
    var date = new Date();
    date.setDate(date.getDate()+expires);

    document.cookie = key + "=" + escape(value) + "; expires=" + date.toUTCString() + "; path=" + path;
}else{
    document.cookie = key + "=" + escape(value) + "; path=" + path;
}
}

function getCookie(name){
    var cookies = document.cookie;

    var cookieArr = cookies.split("; ");

    for(var i = 0; i < cookieArr.length; i++){
        var cook = cookieArr[i];
        var cookArr = cook.split("=");
        if(cookArr[0] == name){
            return unescape(cookArr[1]);
        }
    }
    return null;
}

function removeCookie(name){
    var date = new Date();

    date.setDate(date.getDate()-10);
    document.cookie = name+"=123; expires = " + date.toUTCString(); 
}



```


跨路徑讀取
預設情況下，如果在某個頁面建立了一個cookie，那麼該頁面所在目錄中的其他
頁面也可以訪問該cookie。如果這個目錄下還有子目錄，則在子目錄中也可以訪問。
移除cookie
只需要將時間設定為過期時間即可


2.sessionStorage  html5快取技術，會話級別的快取，會話結束時清除
有些瀏覽器會設定他的記憶體上限為5M 快取資料是與服務繫結的，不同服務之間不可以互相讀取

設定新的鍵值對
setItem(key, value);
讀取key對應的值
getItem(key);
移除一組鍵值對
removeItem(key);



3.localStorage   html5快取技術，瀏覽器級別快取
快取資料是與服務繫結的，不同服務之間不可以互相讀取
資料會一直儲存，即使頁面被關閉。只有清空瀏覽器快取時才會把資料清除

設定新的鍵值對
setItem(key, value);
讀取key對應的值
getItem(key);
移除一組鍵值對
removeItem(key);

對比

1.Cookie會隨著請求傳送往伺服器端，其他兩種不會，cookie對所有瀏覽器都生效；cookie可以被刪除，也可以在瀏覽器上設定禁用

2.sessionStorage儲存的資料在頁面關閉前有效，且儲存資料比cookie要大很多，有的瀏覽器設定5M，有些更大；是H5技術

2.localStorage儲存的資料只要不清除快取都有效，且儲存資料比cookie要大很多，有的瀏覽器設定5M，有些更大；是H5技術

javascript語言基礎（五）

繼承

繼承是面向物件最顯著的一個特性。繼承是從已有的類中派生出新的類，新的類能吸收已有類的資料屬性和行為，並能擴充套件新的能力

這種技術使得複用以前的程式碼非常容易，能夠大大縮短開發週期，降低開發費用。

幾種繼承方式

1，原型鏈

2，借用建構函式

3，組合繼承

4，原型式繼承

5，寄生式繼承

6，寄生組合式繼承