摘要：使用代理不使用代理改變了指向為可以跨域的三個標簽用于打點統計使用使用月日面試閉包的優缺點中，在函數外部無法訪問函數內部的值，使用閉包就可以做到。全局變量可能會造成命名沖突，使用閉包不用擔心這個問題，因為它是私有化，加強了封裝性。

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

相同點

都是應用層的協議

都是基于tcp,可靠的協議

不同點

websocket是持久化的協議.

websocket是雙向通信協議，模擬socket協議,可以雙向發送信息，而HTTP是單向的

websocket可以在服務器端主動向客戶端發送信息，而http的服務端,只能通過客戶端主動請求

相同點：都存儲在客戶端

不同點

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

有效時間
localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除。
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉

數據與服務器之間的交互方式
cookie的數據會自動的傳遞到服務器，服務器端也可以寫cookie到客戶端
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存

基本類型

undefined

null

Number

String

Boolean

復雜類型

Object

值類型：

undefined string number Boolean

拷貝形式,

引用類型：

array , function

指針指向，共用空間

可無限擴展屬性，極大節省命名空間。

特殊引用類型：function

同引用類型↑

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

number

string

undefined

object : null和數組 都是object

function

boolean

注意：typeof無法詳細區分引用類型的類型，除了function. 只能準確區分值類型的類型
比如：

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

function是一個比較特殊的類型，所以typeof能夠區分

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

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

一般來說,===是最簡單的操作符，因為它不用類型轉換，所以相對來說，速度也會更快。

== 會進行類型轉換，很容易懵逼

== 的使用情況,可參考

判斷對象的屬性是否存在

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

判斷函數的參數是否存在

    function fn( a, b){
        if( b == null ){
            //這里相當于 b===null || b === undefined 的簡寫
        }
    }

從純JS的角度看，JSON就是對象，并且只有兩個API

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

JSON也是一種輕量級的文本數據交換格式.

Object

Array

Boolean

Number

String

Function

Date

RegExp

Error

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

window.onload: 頁面中所有數據加載完成后，才會執行，包括圖片，css等

DOMContentLoaded: DOM結構加載完成后執行，需要等待圖片等其他資源加載完成

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

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

//Fisher–Yates shuffle費雪耶茲隨機置亂算法) ！！！推薦

   
    //算法思想：從0~i（i的變化為 n-1到0遞減）中隨機取得一個下標，和最后一個元素（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]

原型鏈是針對構造函數的，比如我創建了一個函數并通過變量new了一個函數，那這個函數就會繼承創建處理函數的屬性，如果訪問這個函數的屬性時，并沒有在new處理的變量中寫該屬性，那么就會往上,根據protype逐級向上查找，這個查找的過程就叫原型鏈。

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

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

所有的函數，都有一個prototype屬性，也可稱之為顯式原型，屬性值是一個普通的對象

所有的引用類型（數組，對象，函數），__proto__屬性值指向它的構造函數的prototype屬性值

當試圖得到一個對象的某個屬性時，如果這個對象本身沒有這個屬性，那么會去它的__proto__中去找。

由于它的隱式原型等于它的顯式原型，所以也會去 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);

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

}

創建一個對象

this指向這個新對象

執行代碼，即對this賦值

return this。 默認有return，不用寫

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

//instanceof運算符用于測試構造函數的prototype屬性是否出現在對象的原型鏈中的任何位置
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; //用來鏈式調用
    }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)
})

`作用域是針對變量的，比如我創建了一個函數，這個函數中包含了另外一個函數。那么該變量中就有3個作用域
全局作用域》函數作用域》內層函數的作用域
作用域的特點就是，先在自己的變量范圍中查找，如果找不到，就會沿著作用域往上找。
`

變量定義

函數聲明（注意和函數表達式的區別）

預解析

注意：this要在執行時才能確認值，定義時無法確認

作為構造函數執行

作為對象屬性執行

作為普通函數執行

call apply bind

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

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


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

f1("seek",20)

`當一個函數的返回值是另外一個函數，而返回的那個函數如果調用了其父函數內部的其它變量，
如果返回的這個函數在外部被執行，就產生了閉包。
表現形式：使函數外部能夠調用函數內部定義的變量。`

閉包的使用場景

函數作為返回值

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

函數作為參數來傳遞

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

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

自由變量

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

閉包的兩個場景

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

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

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

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

 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， 因為9并不小于4

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

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

sort 排序

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

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

map 對元素重新組裝，生成新數組

//map適用范圍還是較廣的，學會思考
 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) {
            //如果不傳參數，則默認為當前時間
            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 重復10個0, 防止隨機數出現少于10位數的情況
    random = random.slice(0,10)
    console.log(random); //0.70728618  每次返回的只有10位數的字符串

function foreach(info, fn)
{
        //數組處理
        if(info instanceof Array)
        {
          info.forEach(fn)
        }else{
           //對象處理
           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(); //阻止默認事件
 })

//使用代理，由父級幫忙去做

 

    a1
    a2
    ffffd
    a5
    


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

//HTML結構
 

    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() 方法用于檢測字符串是否匹配給定的正則表達式。
            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指向為e
    console.log(this.toElement.innerHTML)
})

 //用于打點統計
 //使用CDN
 // 使用JSONP

JS中，在函數外部無法訪問函數內部的值，使用閉包就可以做到。

優點：

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

全局變量可能會造成命名沖突，使用閉包不用擔心這個問題，因為它是私有化，加強了封裝性。

缺點

由于閉包是駐留在內存中的,會增大內存使用量，使用不當很容易造成內存泄露,降低程序的性能。

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

Last-Modified: http1.0推出的，指服務器文件的最后修改時間，瀏覽器會帶上If-Modified-Since向服務器發送請求，與服務器文件修改時間Last-Modified做對比，如果時間不同，則獲取數據返回200，否則返回304后調用瀏覽器本地硬盤的緩存。

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

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

public:緩存可以被多用戶共享，例如360瀏覽器可以登錄不同賬號，電腦系統可以切換不同賬號

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

no-cache:不會被緩存。

no-store:不允許被存儲

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