摘要：詞條高級程序設計是年人民郵電出版社出版的圖書，作者是美扎卡斯。

詞條

《JavaScript高級程序設計》是2006年人民郵電出版社出版的圖書，作者是(美)(Nicholas C.Zakas)扎卡斯。本書適合有一定編程經驗的開發人員閱讀，也可作為高校相關專業課程的教材。

獻給搬磚人士，求職人士很不錯的基礎扎實筆記

js誕生于1995年當時它的主要目的是處理驗證操作如今發展成為一門強大的編程語言，由三部分組成：核心（ECMAScript）DOM文檔對象模型、 BOM瀏覽器對象模型

js 放置在 頁面的合理位置 對于優化加載有很大的幫助

切記平穩退化，如果不支持的情況下 有很多種方案 ，書中提到了

當頁面支持腳本，用戶永遠也看不到它，盡管他是頁面的一部分。

語句結尾加上分號，在某些情況下會增進代碼的性能，因為解析器不必花時間推測應該在哪里插入分號了。

一、數據類型

關于 undefined類型，在使用var聲明變量但未對其加以初始化這個變量的值就是undefined，包含undefined值的變量與尚未定義的變量還不一樣。

var message;

alert(message) // undefined
alert(age) // 產生錯誤

關于 NAN

即非數值，不是一個數字。

NAN與任何值都不相等，包括它自己

alert(isNAN(NAN))  //是否 不是一個數字  true
alert(isNAN(10)) // false
alert(isNAN("ni")) // true
alert(isNAN(true)) // false 因為true 可以被轉換為1

typeof() 用來檢測給定變量的數據類型

1.undefined  聲明變量沒有定義
2. null 空對象指針 
3. bloolean 
4. number  數值轉換 Number()函數在轉換字符串時比較復雜而且不夠合理，推薦使用，parseInt（）parseFloat()
5. string 字符串類型  toString() 有個缺點 對null 和 undefined 不起作用
6. string() 方法更全面
7. object 對象

二、語句

do-whlie語句 是一種后測試循環語句，換句話說代碼至少執行一次

do{
    i+=2;
}whlie(i<10)

whlie語句屬于前測試循環語句，相對for語句也是

var i = 0
whlie(i<10){
    i+=2
}

關于break和continue語句

var num = 0;
for(var i = 0;i++;i

for in 語句 用來枚舉對象屬性   注意一點 ： 輸出的屬性名 順序不可預測。
理解參數 ：  通過  arguments 對象的length 可以獲知有多少個參數 傳遞給了函數。

函數體內可以通過arguments 對象來訪問這個參數數組 類數組
通過arguments[0]訪問第一個參數，arguments[1]訪問第二個參數
函數沒有重載，定義兩個相同名字的函數，后一個會覆蓋前一個 通過檢查傳入函數中參數的類型和數量做出不同的反應，來模擬方法重載，如下所示。
function add(){
    if(arguments.length ==1){
        alert(arguments[0]+10)
    }else if(arguments.length ==2){
        alert(arguments[0]+arguments[1])
    }
}

add(10) //20
add(10,20) //30
js 變量包含兩種數據類型      其一 基本數據類型   其二 引用數據類型

三、基本數據類型與引用類型
基本數據類型指的是簡單的數據段，引用類型保存在內存對象中不能直接操作對象的內存空間，操作對象是實際上操作的是對象的引用。
var num1 = 5
var num2 = num1

num2與num1是完全的獨立的，兩個變量互不影響，是副本的關系
var obj = new object ;
var obj2 = obj;

obj.name = "nihao";
alert obj2.name    結果是 nihao
不同的是 這個值的副本實際是 指向了同一個對象  當obj 添加了name屬性后 可以通過 obj2 來訪問
函數的參數 其實是其函數的局部變量 
每個函數都有自己的執行環境，當代執行的時候會創建一個作用域鏈，對環境的所有變量做有序的訪問
查詢標示符   也就是 搜索 過程  如果局部環境找到了該標識符 則搜索過程停止 否則 一直追溯到全局環境的變量
作用域鏈 引發了閉包的概念 全局變量只能訪問全局的環境  而局部環境不僅可以訪問自己 還可以訪問其 父級
js 是一門具有垃圾 收集機制的編程語言   不必關心內存問題     標記清除是目前主流的 垃圾收集算法給當前不使用的值加上標記然后再回收其內存  引用計數 目前不再使用的算法，解除引用對垃圾回收機制有好處是很好的性能優化方案

第五章 引用類型

如何使用對象
創建并操作數組
理解js的基本數據類型


引用類型，有時候也稱為對象定義因為他們描述的是一類對象所具有的屬性和方法。
一、object類型
創建object實例的方法：

new操作符后面加上object構造函數
字面量表示法

var per = {
    name: "",
    age: 23
}
思考題---基于typeof 檢測屬性是否存在，使用字面量來指定不同的數據，做不同的顯示
function show(arg){
    var output = "";
    if(typeof arg.name === "string"){
        output += "nihao" + arg.name;
    }
    if(typeof arg.age === "number"){
        output+= "Age:"+ arg.age
    }
    alert(output);
}
show({
    name:"lish",
    age: 23
})

show({
    name:"zbg"
})
二、array類型
與其他語言的區別： 都同為數據的有序列表，但是js的數組每項可以保存任何類型的數據
創建方式 同object類型
數組的length屬性 不是只讀的，可以修改！
數組檢測 有兩個問題：instanceof、array.isArray()，如果有多個框架會有多個全局執行環境會存在不同版本的構造函數，后者目的是確定這個值是不是數組，不論是在那個環境創建的
轉換方法： 所有對象都具有toLocaleString、toString、valueOf ，前者與后兩者不同的是為了取每一項的值調用的是每一項的toLocaleString，而不是toString。
最后使用join（）重現了toString的方法，傳遞逗號將以逗號分割，傳遞雙豎線將以雙豎線分割
ecmascript專門為數組提供了push和pop方法，模擬棧方法，后進先出。
unshift和shift先進先出。
重排序方法：sort()
function com (val1,val2){
    if(val1val2){
        return 1;
    }else{
        return 0
    }
}
var arr = [12,2,3,34,567];
arr.sort(com)
alert (arr);
操作方法： concat() 不改變原數組，復制原數組返回副本，會被添加到原數組的末尾
var arr1 = [1,23,3];
var arr2 = arr1.concat("one",[8,"two"])
arr2 => 1,23,3,one,8,two
slice()用于截取數組，不改變原數組創建一個新數組
arr.slice(1) 從下標1開始到結束
arr.slice(1,4)同理
如果是負數，用數組的長度做運算，再如果結束位置小于起始位置返回空數組
splice() 用于刪除、插入、替換數組
arr.splice(0,1) 從第零個開始刪除1位
arr.splice(1,0,"one") 從第一個位置開始不刪除 插入一項
arr.splice(1,1,"two") 從第一個位置刪除一位 插入一項
filter() 用于數組篩選
var bg = arr.filter(function(item,index,array){
    return (item>2)
})
console.log(bg)
map()方法 和foreach() 類似
var bg = arr.map(function(item,index,array){
    return (item+2)
})
console.log(bg)
歸并方法 reduce()和reduceRight()
使用歸并方法求數組之和
var val = [1,2,3,4,5]
var sum = val.reduce(function(pre,cur,index,array){
    return pre+cur
})
alert(sum) 15

pre代表前一項 cur代表當前項  
reduce 和 reduceRight 結果相同但取決于從哪頭開始遍歷數組。
三、date類型
常用的時間戳
`var start = +new Date()
dosomething();
var end = +new Date()
result = end-start`
四、regExp類型
匹配第一個 bat 或者 cat 不區分大小寫

var pattern = /[bc]at/i;

匹配第一個[bc]at 不區分大小寫

var pattren = /[bc]at/i;

匹配所有以 at結尾的字符不區分大小寫

var partten = /.at/gi;

匹配所有以 .at 結尾的字符不區分大小寫

var partten = /.at/gi;

test()方法

var text = "000-00-0000";
var partten = /d{3}-d{2}-d{4}/;
if(partten.test(text)){
    alert("yes")
}
五、function類型
函數沒有重載
var add  = function(){
    return num+100
}
add  = function(){
    return num+100
}
var result = add(200)  //300

在創建第二個函數時，實際上覆蓋了第一個函數的變量
函數聲明與函數表達式      聲明提前
函數聲明因為在代碼執行之前，引擎會聲明函數并將他們放到源代碼樹的頂部，
而對于表達式：
alert(sum(10,10));
var sum = function(){
    return num+num2
}
在執行到語句之前，變量sum中不會保存對函數的引用
作為值的函數
假想根據某個對象屬性對數組進行排序
function newsort(pro){
    return function(obj1,obj2){
        var val1 = obj1[pro];
        var val2 = obj2[pro];
        if(val1val2){
            return 1
        }else{
            return 0
        }
    }
}

var data = [{name:"lj", age:23},{name:"db", age:45}];
data.sort(newsort(name)) //按姓名排
data.sort(newsort(age)) //按年齡排
函數內部屬性
函數內部有兩個特殊的對象：arguments  this,arguments主要保存函數的參數它還有一個屬性callee 是個指針 指向擁有arguments對象的函數
例如非常經典的階乘函數
function fact(num){
    if(num<=1){
        return 1
    }
    else{
        return num* fact(num-1)
    }
}

為了消除函數執行與函數名的耦合現象可以使用arguments.callee(num-1)
替代 fact(num-1)

在解除了耦合狀態之后 newfact可以正常計算，但fact 只能返回0
var newfact = fact;
fact = fuction(){
    return 0
}
newfact(5) // 120
fact(5) //0
函數的屬性和方法：
每個函數都包含兩個屬性：length prototype  前者是接收參數的個數，后者是保存
所有實例方法的真正所在。
每個函數也都包括兩個非繼承而來的方法 apply()、call()，用以改變this的指向
function sum (num1, num2){
    return num1+num2
}

function callsum(num1, num2){
    return sum.apply(this, arguments)
}

alert(callsum(10,10))  //20
基本數據類型，使用new操作符創建引用類型的實例，執行離開作用域之前一直保存在內存中，而基本數據類型，只存在代碼執行的瞬間然后立即被銷毀
一、布爾，數字，字符串
截取給定位置的那個字符 charAt 只接受一個參數
var str = "nihao";
alert(str.charAt(1)) //i
字符串的拼接 concat 或者 + 加號操作符
var str = "nihao";
var newstr = str.concat("world", "!");

alert(newstr) // nihao world !
字符串的截取 slice()、substr()、substring()。接收最多兩個參數

一個參數的情況：正數就不說了，對于負數最后者都會轉換為0 前兩者結果相同
兩個參數的情況：slice就不說了，substr會將第二個負數轉換為0，substring也是將第二個負數轉換為0，但是他會自動排序將小的位數放到前面 由（3,0）到（0,3），但是substr不會所以最后返回一個空字符串。

字符串的查找 indexOf match
var str = "lele nihao,zheli shi di yi jia zhu";
var arr = [];
var op = str.indexOf("e");

while(op>-1){
    arr.push(op);
    op = str.indexOf("e", op+1);
}
//進入循環后每次給indexOf傳遞上一次的位置加1
alert(arr)

trim（） 會創建一個字符串的副本，刪除前置及后置的所有空格

match()方法只接受一個參數 
var text = "bat cat";
var parrent = /.at/gi;

var new = text.match(parrent)
字符串的替換 replace()
var text = "bat cat";
var result = text.replace(/at/gi, "oo")
字符串轉數組的方法 split()
var text = "arr,op,kj,hg,";
var result = text.split(",")
接受第二個參數，固定數組的length
二、URL編碼方法
encodeURL() 是對整個URL進行編碼，
encodeURLComponent()對附加在現有URL后面的使用
三、 Math 對象
獲取數組中最大值和最小值 避免過多的使用循環和在if語句中確定數值。
var val = [1,2,3,4,5,6,7,8,9];

var max = Math.max.apply(Math, val);

這個技巧的關鍵，把MAth作為apply的第一個參數，從而正確的設置了this、
`Math.ceil() 向上取整
Math.floor() 向下取整
Math.round() 四舍五入取整`
random()方法
值 =  Math.floor ( Math.round() * 可能值的總數 + 第一個可能的值 )
function round(low, up){
    var sum = up-low+1 //總數
    return Math.floor ( Math.round() *sum + low )
}

var color = ["red", "blue", "green", "yellow"];
var arr = color[round(0, color.length-1)]

console.log(arr)  //可能是數組中包含任意一個字符串
總結：第五章完結，在所有代碼執行之前 作用域就已經存在兩個內置對象 global和math

第六章 面向對象

理解對象屬性
理解并創建對象
理解繼承

面向對象有類的概念，通過類可以創建任意多個相同屬性和方法的對象。
一、創建對象
1、工廠模式，解決了創建多個相似對象的問題，卻沒有解決對象識別問題
2、構造函數，本身也是函數只不過可以用來創建對象，缺點每個方法都要在每個實例上重新創建一遍，于是把函數定義轉到構造函數外面，但是如果對象定義多個方法就要定義多個全局函數，最終導致沒有封裝性。
function Person (name){
    this.name = name,
    this.sayName = function(){
        alert(this.name)
    }
}

//注意函數名大寫，是為了區別其他函數
//再一次提到this重定向

var o = new object();
person.call(o,"li",25,"ha");
o.sayname() //li
3、原型模式，每個函數都有一個prototype屬性，她是一個指針，指向一個對象,實例共享。
function Person (name){
    Person.prototype.name = name,
    Person.prototype.sayName = function(){
        alert(this.name)
    }
}
var preson1 = new Person;
var preson2 = new Person;
alert(person1.sayname === person2.sayname) //true
雖然通過對象實例可以訪問保存在原型中的值，但卻不能通過對象實例重寫原型中的值，如果同名該屬性就會屏蔽原型中的那個屬性
function Person (){
    Person.prototype.name = "lisj",
    Person.prototype.sayName = function(){
        alert(this.name)
    }
}
var preson1 = new Person;
var preson2 = new Person;
preson1.name = "matou"
alert(person1.name) //"matou"
alert(person2.name) //"lisj"

使用hasOwnProperty 檢測一個屬性是否存在于實例中
alert(person1.hasOwnProperty("name")) //true
alert(person2.hasOwnProperty("name")) //false
4、組合使用構造函數模式和原型模式
構造函數模式用于定義實例屬性，而原型模式用于定義方法和共享屬性
function Person (name){
    this.name = name;
    this.friends = ["ls","df"]
}
Person.prototype = {
    constructor: person,
    sayname: function(){
        alert(this.name)
    }
}

var preson1 = new Person;
var preson2 = new Person;

person1.friends.push("Van")
alert(person1.friends === person2.friends) //false
alert(person1.sayname === person2.sayname) //true
二、原型鏈實現繼承，通過將一個類型的實例賦值給另一個構造函數的原型實現

第七章函數表達式
定義函數的方式常用有兩種：1、函數聲明。2、函數表達式
函數聲明
function show(){}
函數表達式
var say = fuction(){}
函數聲明提前
關于函數聲明，執行代碼前會先讀取函數聲明，這就意味著前后都可以調用。
而對于函數表達式 提前調用就會報錯，使用前必須聲明。
函數表達式與函數聲明的區別
if(true){
    function say(){alert(1)}
}
else{
    function say(){alert(2)}
}
注：表面上看很合理，實際上是在js中屬于無效語法，但引擎會嘗試修正此錯誤。
下面的這種寫法就很好的解決了這類問題
var say;

if(true){
     say = function(){alert(1)}
}
else{
    say = function(){alert(2)}
}
二、遞歸
遞歸函數是在一個函數通過名字調用自身的情況下構成的
function face(num){
    if(num<=1){
        return 1;
    }
    else{
        return num* arguments.callee(num-1)
    }
}

arguments.callee 是一個指向正在執行的函數指針，用它來實現對函數的遞歸調用
也可以通過命名函數表達式來達成相同的效果
var face = (function f(num){
    if(num<=1){
        return 1;
    }
    else{
        return num* f(num-1)
    }
})
三、閉包
有權訪問另一個函數作用域中的變量的函數
關于閉包與變量，即閉包只能取得包含函數中任何變量的最后一個值，閉包保存的是整個變量對象而不是某個特殊的變量。
function nc(){
    var result = new Array();
    for(var i = 0;i< 10;i++){
        result[i] = function(){
            return i
        }
    }
    return result
}
可以通過一個匿名函數強制讓閉包的行為符合預期
function nc(){
    var result = new Array();
    for(var i = 0;i< 10;i++){
        result[i] = function(num){
            return function(){
                return num
            }
        }(i)
    }
    return result
}
關于閉包中使用this
var name = "window"
var obj = {
    name:"lsj",
    say:function(){
        return function(){
            return this.name
        }
    }
}

alert(obj.say()()) //window
var name = "window"
var obj = {
    name:"lsj",
    say:function(){
        var that = this;
        return function(){
            return that.name
        }
    }
}

alert(obj.say()()) //lsj
通過私有作用域模仿塊級作用域
(function(){

})();
第八章 BOM
一、最好使用settimeout 去模擬 setinterval
var num = 0;
var max = 10;

function show(){
    num++;
    if(num
二、location.search 查詢字符串參數
function get(){
    var qs = (location.search.length>0? 
    location.search.substring(1):""),
    args = {},
    items = qs.length? qs.split("&"): [],
    item = =null,
    name = null,
    value = null;
    for(var i = 0;i++;i
關于window路徑跳轉的幾種方法：
location.assign("http://nihao.com")
location.
window.location = "http://nihao.com"

//效果相同

第十三章

理解事件流
使用事件處理程序
不同的事件類型

事件流描述的是從頁面中接收事件的順序。
IE的事件流叫事件冒泡：也就是點擊事件首先在div元素上發生，再向DOM樹向上傳遞直到document對象
網景公司提出的事件流叫事件捕獲：document對象首先接收事件再從樹往下傳播到事件的實際目標



通過一個函數處理多個事件時，可以使用type屬性
var btn = document.getElementById("de");
var handler = function(event){
    switch(event.type){
        case "click":
        alert(1);
        break;
        case "mouseover":
        alert(2);
        break;
    }
}

btn.onclick = handler
btn.onmouseover = handler
跨瀏覽器的事件對象兼容
var EventUtil = {
    getEvent:function(event){
        return event? event: window.evnet
    },
    getTarget:function(event){
        return event.target || event.srcElement
    },
    perventDefault:function(event){
        if(event.perventDefault){
            event.perventDefault()
        }
        else{
            event.returnValue = false
        }
    },
}

var a = document.getElementById("link");

a.onclick = function(event){
    event = EventUtil.getEvent(event)
    EventUtil.perventDefault(event)
}


以上代碼可以確保所有瀏覽器中點擊該鏈接都會阻止默認跳轉
事件委托
建立在事件冒泡機制上的事件委托技術
只需在dom樹中最高層次添加一個事件處理程序，這種技術占用內存少，dom引用少能夠提升整體的性能。

    
one
    
two
    
three


var list = document.getElementById("list");

list.onlick = function(){
    event = EventUtil.getEvent(event)
    var target = EventUtil.getTarget(event)
    switch(target.id){
        case "one":
        alert(1);
        break;
        case "two":
        alert(2);
        break;
    }
}