摘要：使用代理不使用代理改变了指向为可以跨域的三个标签用于打点统计使用使用月日面试闭包的优缺点中，在函数外部无法访问函数内部的值，使用闭包就可以做到。全局变量可能会造成命名冲突，使用闭包不用担心这个问题，因为它是私有化，加强了封装性。

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靠谱。