摘要：使用代理不使用代理改變了指向?yàn)榭梢钥缬虻娜齻€(gè)標(biāo)簽用于打點(diǎn)統(tǒng)計(jì)使用使用月日面試閉包的優(yōu)缺點(diǎn)中，在函數(shù)外部無法訪問函數(shù)內(nèi)部的值，使用閉包就可以做到。全局變量可能會(huì)造成命名沖突，使用閉包不用擔(dān)心這個(gè)問題，因?yàn)樗撬接谢?，加?qiáng)了封裝性。

Websocket同http一樣都是是基于tcp的,可靠性的雙向通信協(xié)議，是建立在tcp之上的，并且是持久化的協(xié)議。

相同點(diǎn)

都是應(yīng)用層的協(xié)議

都是基于tcp,可靠的協(xié)議

不同點(diǎn)

websocket是持久化的協(xié)議.

websocket是雙向通信協(xié)議，模擬socket協(xié)議,可以雙向發(fā)送信息，而HTTP是單向的

websocket可以在服務(wù)器端主動(dòng)向客戶端發(fā)送信息，而http的服務(wù)端,只能通過客戶端主動(dòng)請(qǐng)求

相同點(diǎn)：都存儲(chǔ)在客戶端

不同點(diǎn)

存儲(chǔ)大小
cookie數(shù)據(jù)大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。

有效時(shí)間
localStorage 存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)；
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除。
cookie 設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉

數(shù)據(jù)與服務(wù)器之間的交互方式
cookie的數(shù)據(jù)會(huì)自動(dòng)的傳遞到服務(wù)器，服務(wù)器端也可以寫cookie到客戶端
sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存

基本類型

undefined

null

Number

String

Boolean

復(fù)雜類型

Object

值類型：

undefined string number Boolean

拷貝形式,

引用類型：

array , function

指針指向，共用空間

可無限擴(kuò)展屬性，極大節(jié)省命名空間。

特殊引用類型：function

同引用類型↑

特殊引用類型只有function，由于function的特殊性，使得它有點(diǎn)不同

number

string

undefined

object : null和數(shù)組 都是object

function

boolean

注意：typeof無法詳細(xì)區(qū)分引用類型的類型，除了function. 只能準(zhǔn)確區(qū)分值類型的類型
比如：

 typeof {} //object
 typeof [] //object
 typeof null //object
 typeof console.log // function 

function是一個(gè)比較特殊的類型，所以typeof能夠區(qū)分

盡可能使用 === 原因如下

一致性:使用 ==對(duì)一致性沒有任何好處，所以提前避免

一般來說,===是最簡(jiǎn)單的操作符，因?yàn)樗挥妙愋娃D(zhuǎn)換，所以相對(duì)來說，速度也會(huì)更快。

== 會(huì)進(jìn)行類型轉(zhuǎn)換，很容易懵逼

== 的使用情況,可參考

判斷對(duì)象的屬性是否存在

    var obj = {};
    if( obj.a == null ){
        //這里相對(duì)于：obj.a === null || obj.a === undefined 的簡(jiǎn)寫形式，JQ源碼的推薦寫法
    }

判斷函數(shù)的參數(shù)是否存在

    function fn( a, b){
        if( b == null ){
            //這里相當(dāng)于 b===null || b === undefined 的簡(jiǎn)寫
        }
    }

從純JS的角度看，JSON就是對(duì)象，并且只有兩個(gè)API

   JSON.stringify({a:10,b:30}) //將對(duì)象轉(zhuǎn)為字符串
   JSON.parse("{"a":10,"b":30}") //將JSON格式的字符串轉(zhuǎn)為 對(duì)象

JSON也是一種輕量級(jí)的文本數(shù)據(jù)交換格式.

Object

Array

Boolean

Number

String

Function

Date

RegExp

Error

var a = 100; console.log( !!a ); //true

window.onload: 頁面中所有數(shù)據(jù)加載完成后，才會(huì)執(zhí)行，包括圖片，css等

DOMContentLoaded: DOM結(jié)構(gòu)加載完成后執(zhí)行，需要等待圖片等其他資源加載完成

可參看這篇博文：https://github.com/youngwind/...

 //該方法最簡(jiǎn)單，效果一般，每個(gè)元素仍然有很大機(jī)率在它原來的位置附近出現(xiàn)
 arr.sort(function () { 
      return Math.random() - 0.5; 
   }); 

//Fisher–Yates shuffle費(fèi)雪耶茲隨機(jī)置亂算法) ?。?！推薦

   
    //算法思想：從0~i（i的變化為 n-1到0遞減）中隨機(jī)取得一個(gè)下標(biāo)，和最后一個(gè)元素（i）交換。
   var arr = [5,8,59,56];
   function shuffle(arr) { 
    var i = arr.length, t, j; 
    while (i) 
    { 
        j = Math.floor(Math.random() * i--);
        t= arr[i];
        arr[i] = arr[j];
        arr[j]= t;
    } 
} 
shuffle(arr)
console.log(arr);//[56, 8, 5, 59]

原型鏈?zhǔn)轻槍?duì)構(gòu)造函數(shù)的，比如我創(chuàng)建了一個(gè)函數(shù)并通過變量new了一個(gè)函數(shù)，那這個(gè)函數(shù)就會(huì)繼承創(chuàng)建處理函數(shù)的屬性，如果訪問這個(gè)函數(shù)的屬性時(shí)，并沒有在new處理的變量中寫該屬性，那么就會(huì)往上,根據(jù)protype逐級(jí)向上查找，這個(gè)查找的過程就叫原型鏈。

所有的引用類型（數(shù)組，對(duì)象，函數(shù)），都具有對(duì)象的特殊，即可自由擴(kuò)展屬性（除了Null，純屬意外）

所有的引用類型（數(shù)組，對(duì)象，函數(shù)），都有一個(gè)__proto__屬性，也可以稱為隱式原型，屬性值是一個(gè)普通的對(duì)象

所有的函數(shù)，都有一個(gè)prototype屬性，也可稱之為顯式原型，屬性值是一個(gè)普通的對(duì)象

所有的引用類型（數(shù)組，對(duì)象，函數(shù)），__proto__屬性值指向它的構(gòu)造函數(shù)的prototype屬性值

當(dāng)試圖得到一個(gè)對(duì)象的某個(gè)屬性時(shí)，如果這個(gè)對(duì)象本身沒有這個(gè)屬性，那么會(huì)去它的__proto__中去找。

由于它的隱式原型等于它的顯式原型，所以也會(huì)去 prototype 中去找。

 function Foo(name,age){
    this.name = name;
    this.age = age;
}
var foo = new Foo("h1",25);
var foo2 = new Foo("h1",250);
console.log(foo,foo2);

//循環(huán)對(duì)象自身的屬性
var item;
for( item in foo)
{
    //只遍歷對(duì)象自身的屬性，過濾掉該對(duì)象的顯式原型
    if(foo.hasOwnProperty(item))
    {
        console.log(item)
    }

}

創(chuàng)建一個(gè)對(duì)象

this指向這個(gè)新對(duì)象

執(zhí)行代碼，即對(duì)this賦值

return this。 默認(rèn)有return，不用寫

var arr = [1,2,3];
console.log(Array.isArray(arr)); //true

//instanceof運(yùn)算符用于測(cè)試構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在對(duì)象的原型鏈中的任何位置
console.log( arr instanceof Array) //true

 function Elem(id){
    this.dom = document.getElementById(id);
}

Elem.prototype.html = function(val){
    var dom = this.dom;
    if(val){
        dom.innerHTML = val;
        return this; //用來鏈?zhǔn)秸{(diào)用
    }else{
        return dom.innerHTML;
        
    }
}

Elem.prototype.on = function(type ,fn){
    var dom = this.dom;
    dom.addEventListener( type , fn);
    
}
var h1 = new Elem("h1");
h1.html("你被修改了").on("click", function(){
    console.log(this)
})

`作用域是針對(duì)變量的，比如我創(chuàng)建了一個(gè)函數(shù)，這個(gè)函數(shù)中包含了另外一個(gè)函數(shù)。那么該變量中就有3個(gè)作用域
全局作用域》函數(shù)作用域》內(nèi)層函數(shù)的作用域
作用域的特點(diǎn)就是，先在自己的變量范圍中查找，如果找不到，就會(huì)沿著作用域往上找。
`

變量定義

函數(shù)聲明（注意和函數(shù)表達(dá)式的區(qū)別）

預(yù)解析

注意：this要在執(zhí)行時(shí)才能確認(rèn)值，定義時(shí)無法確認(rèn)

作為構(gòu)造函數(shù)執(zhí)行

作為對(duì)象屬性執(zhí)行

作為普通函數(shù)執(zhí)行

call apply bind

 function f1(name,age){
    console.log(name,age)
    console.log(this); //this為x對(duì)象
 }

f1.apply({x:"我是this"}, ["seek",20]);
f1.call({x:"我是this"}, "seek",20);


//使用bind改變this時(shí)，需用函數(shù)表達(dá)式
var f1 = function (name,age){
    console.log(name,age)
    console.log(this); //this為x對(duì)象
}.bind("我是被綁定的this")

f1("seek",20)

`當(dāng)一個(gè)函數(shù)的返回值是另外一個(gè)函數(shù)，而返回的那個(gè)函數(shù)如果調(diào)用了其父函數(shù)內(nèi)部的其它變量，
如果返回的這個(gè)函數(shù)在外部被執(zhí)行，就產(chǎn)生了閉包。
表現(xiàn)形式：使函數(shù)外部能夠調(diào)用函數(shù)內(nèi)部定義的變量。`

閉包的使用場(chǎng)景

函數(shù)作為返回值

 function fn(){
    var a = 10;
    return function(){
        console.log(a); //a是自由變量，從父作用域開始找。
    }
}
var f1 =  fn();
var a = 20;
f1(); //10

函數(shù)作為參數(shù)來傳遞

function fn(){
    var a = 10;
    return function(){
        console.log(a); 
        }
}
var fn1 = fn();

function fn2(fn){
    var a =20;
    fn();
}
fn2(fn1); //10

自由變量

作用域鏈，即自由變量的查找

閉包的兩個(gè)場(chǎng)景

var str,a;
for( a=0; a<10;a++){
    str = document.createElement("a");
    str.innerHTML = a + "點(diǎn)我" + "
";
    
    document.body.appendChild(str);
    
    (function(a){
        str.addEventListener("click",function(e){
            e.preventDefault();
            console.log(a)
        })
    })(a)
}

同步是阻塞模式，異步是非阻塞模式。

異步：不需要等操作做完，就響應(yīng)用戶請(qǐng)求. 比如：ajax，img的加載，setTimeout,setInterval

同步：必須等待操作做完，才返回結(jié)果.

 var arr= [2,3,9,0];

forEach 遍歷所有元素

  arr.forEach(function(item,index){
        console.log(item) // 2390
        console.log(index) //0123

    })

every 判斷所有元素是否都符合條件

  var result = arr.every(function(item,index){
        if(item < 4)
        {
          return true;
        }
    })
  console.log(result); //false， 因?yàn)?并不小于4

some 判斷是否有至少一個(gè)元素符合條件

 var result =  arr.some(function(item,index){
        if(item < 4)
        {
          return true;
        }
      })
console.log(result); //true 因?yàn)?,3,0小于4

sort 排序

 var result =  arr.sort(function(a,b){
          // return a-b; //正序
          return b-a; // 倒序
        // return return Math.random() - 0.5; //最簡(jiǎn)單的隨機(jī)數(shù)組排序，并不推薦

      })
console.log(result); // ?[9, 3, 2, 0]

map 對(duì)元素重新組裝，生成新數(shù)組

//map適用范圍還是較廣的，學(xué)會(huì)思考
 var result =  arr.map(function(item,index){
            return "
" + item + "
";
      })
console.log(result);   //  ["
2
", "
3
", "
9
", "
0
"]

filter 過濾符合條件的元素,較為常用

var result =  arr.filter(function(item,index){
            if(item >=3){
              return true;
            }
      })
console.log(result);   // [3, 9]

   function formatDate(dt) {
        if (!dt) {
            //如果不傳參數(shù)，則默認(rèn)為當(dāng)前時(shí)間
            dt = new Date();
        }

        var year = dt.getFullYear();
        var month = dt.getMonth() + 1;
        var day = dt.getDate();

        if (month <= 10) {
            month = "0" + month;
        }

        if (day <= 10) {
            day = "0" + day;
        }

        return year + "-" + month + "-" + day;
    }

    var date = formatDate();
    console.log(date); //2019-03-23

 var random = Math.random();
    random = random + "0".repeat(10); //repeat 重復(fù)10個(gè)0, 防止隨機(jī)數(shù)出現(xiàn)少于10位數(shù)的情況
    random = random.slice(0,10)
    console.log(random); //0.70728618  每次返回的只有10位數(shù)的字符串

function foreach(info, fn)
{
        //數(shù)組處理
        if(info instanceof Array)
        {
          info.forEach(fn)
        }else{
           //對(duì)象處理
           for( key in obj){
              fn(key, obj[key])
            }
        }
  
}

//使用方法
  var obj = {x: "我是x",y: "我是y"};
   foreach(obj, function(key,value){
    console.log(value); //我是x,我是y
  })


  var arr = [5,8,9];
  foreach(arr, function(elem,index){
    console.log(elem);//5,8,9
  })

 function bindEvent(elem,type,fn){
           elem.addEventListener( type ,fn)
 }
 //使用方法
 bindEvent(id,"click", function(e){
    console.log(e)
 })

 bindEvent(a,"click", function(e){
    e.preventDefault(); //阻止默認(rèn)事件
 })

//使用代理，由父級(jí)幫忙去做

 

    a1
    a2
    ffffd
    a5
    


div1.addEventListener("click", function(e){
    if (e.target.nodeName == "A"){
        alert(e.target.innerHTML)
    }
})

//HTML結(jié)構(gòu)
 

    a1
    a2
    ffffd
    a5
    


不使用代理

//
function bindEvent(elem,type,selector, fn){
    if(fn == null){
        fn=selector;
        selector =null;
    }
    elem.addEventListener( type ,function(e){
        var target;
        if(selector){
            target = e.target;
            //matches() 方法用于檢測(cè)字符串是否匹配給定的正則表達(dá)式。
            if(target.matches(selector)){
                fn.call(target,e);
            }
        }else{
            fn.call(e);
        }
    })
}

//使用代理
bindEvent(div1,"click","a",function(e){
    console.log(this)
})
//不使用代理
bindEvent(div2,"click",function(e){
    //call改變了this指向?yàn)閑
    console.log(this.toElement.innerHTML)
})

 //用于打點(diǎn)統(tǒng)計(jì)
 //使用CDN
 // 使用JSONP

JS中，在函數(shù)外部無法訪問函數(shù)內(nèi)部的值，使用閉包就可以做到。

優(yōu)點(diǎn)：

使用閉包能夠讓局部變量模擬全局變量一樣,但是，只能被特定函數(shù)調(diào)用。

全局變量可能會(huì)造成命名沖突，使用閉包不用擔(dān)心這個(gè)問題，因?yàn)樗撬接谢訌?qiáng)了封裝性。

缺點(diǎn)

由于閉包是駐留在內(nèi)存中的,會(huì)增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露,降低程序的性能。

Expires: http1.0 推出的，指服務(wù)器返回的文件有效期，但其實(shí)這是有缺陷的，如果把本地的時(shí)間改為2118年，那Expires的時(shí)間怎么都會(huì)過期。

Last-Modified: http1.0推出的，指服務(wù)器文件的最后修改時(shí)間，瀏覽器會(huì)帶上If-Modified-Since向服務(wù)器發(fā)送請(qǐng)求，與服務(wù)器文件修改時(shí)間Last-Modified做對(duì)比，如果時(shí)間不同，則獲取數(shù)據(jù)返回200，否則返回304后調(diào)用瀏覽器本地硬盤的緩存。

Cache-Control: http1.1推出，指文件緩存的有效期。

.max-age:單位是s，設(shè)置文件最大緩存時(shí)間，用得最多。

public:緩存可以被多用戶共享，例如360瀏覽器可以登錄不同賬號(hào)，電腦系統(tǒng)可以切換不同賬號(hào)

private:僅單用戶私有，不被多用戶共享

no-cache:不會(huì)被緩存。

no-store:不允許被存儲(chǔ)

ETag: http1.1推出，該版本號(hào)是由服務(wù)端隨機(jī)生成的，瀏覽器會(huì)帶上If-None-Match向服務(wù)器發(fā)送請(qǐng)求，與服務(wù)器文件修改版本ETag做對(duì)比，如果版本號(hào)不同，則獲取數(shù)據(jù)返回200，否則返回304后調(diào)用瀏覽器本地硬盤的緩存，這種方式比Last-Modified靠譜。