再啃 javascript 高級程序

第二章：

一、爲了不頁面出現延遲時的空白，把js放在body元素中頁面內容的後面。

二、延遲腳步的方法：

（1）defer
（2）async
（3）動態建立<script>標籤
（4）ajax

三、引入外部文件的優勢：

（1）增長可維護性
（2）可緩存，加快頁面加載速度
（3）適應將來

第三章：基本概念

一、js中一塊兒都區分大小寫。

二、標示符（變量，函數，屬性）的規則：

（1）第一個字母必須是一個字母，下劃線，或者一個美圓符號
（2）其餘字符能夠是字母，下劃線，美圓符號，或者數組

三、嚴格模式的定義和做用。

定義：它定義了一種不一樣的解析和執行模型。
做用：
（1）不肯定的行爲將獲得處理
（2）對某些不安全的操做會拋出錯誤

四、建議語句結尾的分號要加上。

五、使用代碼塊讓編碼意圖更加清晰，下降修改代碼時出錯的概率。

六、變量的要注意的問題：用var操做符定義的變量將成爲定義改變量的做用域中的局部變量。（也就是說，若是在函數中使用var定義了一個變量，那麼這個變量在函數退出後就會被銷燬）

七、數據類型：undifined boolean string number object function

八、undefined出現的緣由：

（1）被來就沒有定義

（2）定義了可是未賦值

九、number使用的是IEEE745格式來表示整數和小數，因此會出現，0.2+0.1不是0.3的問題。

十、NAN是一個特殊的數字類型的數值

十一、強制類型轉換：（1）Number （2）parseInt（3）parseFloat 隱式類型轉換：== !!

十二、null和undefined 沒有toSting方法，因此就會放回這個兩個值的字面量 null 和undefined

1三、對象是一組數據和功能的集合，每一個實例都具備屬性和方法

（1）constructo：保存用於建立當前對象的函數

（2）hasOwnProperty：檢查給定的屬性在當前對象實例中是否存在。

（3）isPrototypeOf：檢查傳人的對象是否傳人對象的原型。

（4）toLocalString：

（5）toString：返回對象的字符串

（6）valueOf：返回對象的字符串，數值，布爾值

1四、break 終止循環,continue 跳過當前循環，繼續執行下個循環 ###

第四章 變量、做用域、內存

一、基本類型（undefine null boolean number string）是按值訪問，引用類型是按對象的引用訪問

二、一個變量向另外一個變量複製基本類型的值，會在變量上建立一個新值，而後把改值複製到爲新變量分配的位置上。（複製）

三、當一個變量向另外一個變量複製引用類型的值時，會將儲存在變量對象中的值複製一份放到爲變量分配的空間中，可是這個值的副本是一個指針，而這個指針指向儲存在堆中的一個對象（快捷方式）

四、全部的函數參數都是按值傳遞的

五、執行環境定義了變量或函數有權訪問其餘數據，決定了他們各自的行爲。

六、內部環境能夠經過做用域鏈訪問全部的外部環境，但外部環境不能訪問內部環境中的任何變量和函數。

七、查詢標示符的過程：搜索過程從做用域的前端開始，向上足部查詢與給定名字匹配的標識服。若是在局部環境中找到了改標示符，搜索過程中止，變量就緒。若是在局部環境中沒有找到該變量名，則繼續沿着做用域向上搜索。搜索過程將一直追溯到全局變量的變量對象。若是在全局環境中也沒有找到這個標示符，則該變量未聲明。

第五章 引用類型

一、可使用點操做屬性，也能夠用方括號操做。可是方括號的優勢是能夠經過變量來訪問屬性，若是使用了關鍵字活保留字也能夠用方括號

二、數組經常使用的方法：

（1）Push()尾部添加

（2）pop()尾部刪除

（3）Unshift()頭部添加

（4）shift()頭部刪除

（5）concat()鏈接

（6）join() 拆分

（7）sort() 排序

（8）reverse() 倒序

（9）splice() 混合（刪除，插入，替換）

（10）indexOf() 查找索引位置

三、解析器在向執行環境中加載數據時，擠下去會率先讀取函數聲明，並使其在執行任何代碼以前能夠訪問（函數聲明提高）；可是函數表達式必須等到解析器執行到它所在的代碼行，纔會真正的被解析。

四、call和apply 設置函數體內的this指向。call接受的字符串，apply接受的是數組

5.字符串經常使用方法：

（1）charAt() 訪問特定字符

（2）concat() 拼接

（3）substring 截取

（4）indexOf() 查找索引

（5）splice() 混合法（向數組中添加/刪除項目）

（6）toLowerCase()

（7）toUpperCase()

第六章 面向對象

建立對象的方法：

1； 工廠模式

fuction person(name, age, job) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function() {
            alert(this.name)
        }
        return o;
    }
    var p1 = person()

2；構造函數模式

function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function() {
            alert(this.name)
        }
    }
    p1 = new Person()

和工廠方式的區別：
（1） 沒有顯式的建立對象；
（2）直接將屬性和方法賦給你了this對象；
（3）沒有reutrn 語句
建立實例的步驟：
（1）建立一個對象；
（2）講構造函數的做用域賦給新對象；
（3）執行構造函數中的代碼；
（4）返回新對象

3；原型模式

function Person() {};
    Person.prototype = {
        constructor: Person;
        nage = "bug";
        age: 19;
        job: "coder";
        sayName: function() {
            alert(this.name)
        }
    }
    var p1 = new Person()

原型模式的缺點：
（1）相同的屬性值；
（2）實例被共享

4；組合模式

funcition Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends: ['a', 'b'];
    }
    Person.prototype.sayName = function() {
        alert(this.name)
    }
    
    var p1=new Person()

5；動態原型模式

function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        if (typeof this.sayName != "function") {
            Person.prototype.sayName = function() {
                alert(this.name)
            }
        }
    }
    var p1 = new Person()

6；寄生構造函數模式

funcition Person(name,age,job){
        var o=new Object();
        o.name=name;
        o.age=age;
        o.job=job;
        o.sayName=function(){
            alert(this.name
        }
        return o;
    }
    var p1= new Person()

7；穩妥構造函數模式

function Person(name, age, job) {
        var o = new Object();
        o.sayName = function() {
            alert(name)
        }
        return o;
    }
    var p = Person()

對象的繼承方式：

1；原型鏈繼承

function SuperType() {
        this.property = true;
    }
    SuperType.prototype.getSuperValue = function() {
        return this.property;
    }
    
    function subType() {
        this.subproperty = false;
    }
    SubType.prototype = new SuperType();
    
    SubType.prototype.getsubValue = function() {
        return this.subproperty;
    }
    
    var instance = new subType();

2；借用構造函數

function SuperType() {
        this.colors = ["red", "blue", "green"];
    }
    
    function SubType() {
        SuperType.call(this)
    }
    var instance1 = new subType();

3；組合繼承

function SuperType(name) {
        this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function() {
        alert(this.name)
    }
    
    function SubType(name, age) {
        SuperTyep.call(this, name)
        this.age = age;
    }
    SubType.prototype = new SuperType();
    SubType.prototype = construtor = SubType;
    subTpye.prototype.sayAge = function() {
        alert(this.age)
    }
    var instance1 = new SubType('bug', 30)

4；原型式繼承

function object(o) {
        function F() {}
        F.prototype = o;
        return new F();
    }

5；寄生式繼承

function creatAnother(original) {
        var clone = object(original);
        clone.sayHi = function() {
            alert("hi")
        }
        return clone;
    }

6；寄生組合式繼承

function SuperType(name) {
    
        this.name = name;
    
        this.colors = ["red", "blue", "green"];
    
    }
    
    SuperType.prototype.sayName = function() {
    
        alert(this.name);
    
    }
    
    function SubType(name, age) {
    
        SuperType.call(this, name); //第二次調用SuperType()
    
        this.age = age;
    
    }
    
    SubType.prototype = new SuperType(); //第一次調用SuperType()
    
    SubType.prototype.sayAge = function() {
    
        alert(this.age);
    
    }

第七章 函數表達式

一、 閉包：有權訪問另外一個函數做用域中的變量　

二、閉包與變量

function fun() {
    var result = [];
    for (var i = 0; i < 10; i++) {
        result[i] = function() {
            return i;
        }
    }
    return reslut
}

每一個函數都返回10；

function fun() {
    var reslut = [];
    for (var i = 0; i < 10; i++) {
        result[i] = function(num) {
            return function() {
                return num;
            }
        }(i)
    }
    return result;
}

返回1-10

三、this指向問題:

(1)在全局函數中，this等於window,
(2)做爲對象的方法調用時，this等於那個對象。

var name = "window";
var object = {
    name: "object";
    getName：
    function() {
        return function() {
            return this.name
        }
    }
}

alert(object.getName()()) // window

var name = "window";
var object = {
    name: "object";
    getName：
    function() {
        var _this = this;
        return function() {
            return _this.name
        }
    }
}
alert(object.getName()()) // object

4.模仿塊級做用域

(function(){
    
})()

第八章 BOM

IE: trident內核
Firefox：gecko內核
Chrome:Blink內核

一、location 對象
二、navigator 對象
三、history 對象

第十章 DOM

appendChild 添加
inserBefore 插入
replaceChild 替換
removeChild 刪除

第十一章 DOM 擴展

一、querySelector()
二、querySelectorAll()
三、getElementsByClassName()
4.classList 屬性
（1）add()
（2）contains()
（3）remove()
（4）toggle()
五、children 屬性

第二十一章 ajax

ajax：頁面無刷新請求操做

一、ajax步驟：

（1） 啓動

（2） 發送

（3） 接收

（4） 完成

get 用於想服務器查詢信息
post 用於向服務器發送信息

二、CORS 跨雲資源共享

跨瀏覽器的 CORS

function CORS(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        xhr.open(method, url, true)
    } else if (typeof XDomainRequset != "undefined") {
        xhr = new XDomainRequest();
        xhr.open(method, url)
    } else {
        xhr = null;
    }
    reutrn xhr;
}
var req = CORS("get", "wwww")

三、jsonp 跨域

定義：動態建立script標籤，回調函數