數(shù)組的增加

array.push()   向數(shù)組末尾添加元素，返回的是添加后新數(shù)組的長(zhǎng)度，原有數(shù)組改變
array.unshift()  向數(shù)組開頭添加元素，返回的是添加后新數(shù)組的長(zhǎng)度，原有數(shù)組改變
array.splice(n,m)   從索引n開始刪除m個(gè)元素，把刪除的內(nèi)容當(dāng)做新數(shù)組返回，原有數(shù)組
array.concat()
// ES6的合并數(shù)組
[...arr1, ...arr2, ...arr3]
Array.prototype.push.apply(arr1,arr2);)----將arr2追加到arr1中，返回?cái)?shù)組的長(zhǎng)度

數(shù)組的刪除

array.pop() 刪除數(shù)組的最后一項(xiàng)，返回的是刪除的那一項(xiàng)，原有數(shù)組改變
array.shift() 刪除數(shù)組的的第一項(xiàng)，返回的是刪除的那一項(xiàng)，原有數(shù)組改變
splice(n,m,x) 從索引n開始刪除m個(gè)元素，然后插入元素x，把刪除的內(nèi)容當(dāng)做新數(shù)組返回，原有數(shù)組改變。作刪除使用，x不傳入數(shù)據(jù)既可。
slice(n,m) 從索引n開始刪除m個(gè)元素,返回刪除項(xiàng)，原數(shù)組不變
length   減小數(shù)組的長(zhǎng)度，實(shí)際是從數(shù)組尾部刪除元素，改變?cè)瓟?shù)組。

改

其實(shí)只有一種 splice(),但delete方法，我個(gè)人感覺算修改不屬于刪除，詳情請(qǐng)見實(shí)例

查

indeOf() 
lastIndexOf()
find()
findIndex()
includes()
[1, 4, -5, 10].find((n) => n < 0)    // -5
[1, 4, -5, 10].findIndex((n) => n < 0)    // 2
[1, 2, 3].includes(2)     // true

排序
array.reverse() 把數(shù)組倒過來(lái)排序，原有數(shù)組改變
array.sort() 可以實(shí)現(xiàn)由大到小或者由小到大的排序 但是直接寫sort只能排序十以內(nèi)的數(shù)字

數(shù)組 對(duì)象 字符串 的轉(zhuǎn)換；

array -->string：

join("+") 把數(shù)組的每一項(xiàng)拿出來(lái)用指定分隔符隔開 ；
tostring 把數(shù)組的每一項(xiàng)拿出來(lái)用逗號(hào)隔開，原有數(shù)組不變

obj --> string

JSON.parse(); //可以將json字符串轉(zhuǎn)換成json對(duì)象
JSON.stringify(); //可以將json對(duì)象轉(zhuǎn)換成json對(duì)符串    

string-->array:

split(“,”)

obj --> array：

For… in循環(huán)賦值法
Array.from()

number --> array

Array.of()

string --> number (4種)

Number() 
parseFloat()  //  如果parseInt()和parseFloat()不能夠把指定的字符串轉(zhuǎn)換為數(shù)字，它們就會(huì)返回NaN  parseInt(""eleven"); // Returns Nan 
parseInt()  // parseInt()是取整，即丟棄小數(shù)部分,保留整數(shù)部分 parseInt(2.7) ==>3 
+number // var c = +"2"  typeof c ---number

string <-- number (4種)
var c = String(number)
var c = number + ""
var c = number.toString(8) // 將number 轉(zhuǎn)換成8進(jìn)制的數(shù)字 且c的類型是string
var c = number.toFixed(1); //數(shù)字轉(zhuǎn)換為字符串，并且顯示小數(shù)點(diǎn)后的指定的位數(shù) 例 number = 123.476,則c= 123.5"

深淺拷貝
對(duì)象和數(shù)組的拷貝有兩種
淺拷貝即 拷貝了指針指向，當(dāng)一個(gè)對(duì)象的值改變會(huì)影響另一個(gè)對(duì)象的值。
深拷貝， 拷貝的是真正的值。2者相互獨(dú)立，互不干擾。
淺拷貝的方法4種方法
slice() concat() 賦值法 遍歷
注：concat 和 slice 對(duì)一維數(shù)組 能算是深拷貝;2維的 是淺拷貝

var  a= [1,2,3,4]
b= a.concat();
c=a.concat();
b[0] = 5;
c[0] = 6;
a // [1,2,3,4]
b // [5,2,3,4]
c // [6,2,3,4]
var  aa= [[1,1],[2,2],3,4]
bb= aa.concat();
cc=aa.concat();
bb[1][0] = 5;
cc[0] = 6;
aa // [[1,1],[5,2],3,4]
b // [[1,1],[5,2],3,4]
c // [6,[5,2],3,4]
var shallowCopy = function(obj) {

// 只拷貝對(duì)象
if (typeof obj !== "object") return;
// 根據(jù)obj的類型判斷是新建一個(gè)數(shù)組還是對(duì)象
var newObj = obj instanceof Array ? [] : {};
// 遍歷obj，并且判斷是obj的屬性才拷貝
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        newObj[key] = obj[key];
    }
}
return newObj;
}

深拷貝的方法5種方法：
一維數(shù)組和對(duì)象的concat slice法 JSON.parse(JSON.stringify(arr)) 和遍歷法 解構(gòu)賦值法
示例：（前3種畢竟簡(jiǎn)單，這里也不表述）
解構(gòu)賦值法：const a1 = [1, 2]; const a2 = [...a1];或者const [...a2] = a1;

var deepCopy = function(obj) {

if (typeof obj !== "object") return;
var newObj = obj instanceof Array ? [] : {};
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        newObj[key] = typeof obj[key] === "object" ? deepCopy(obj[key]) : obj[key];
    }
}
return newObj;
} 

還有一些常用方法如filter() forEach() map() every() some()

詳情請(qǐng)見：最全最細(xì)致的數(shù)組的方法整理 es5+es6

ES5的屬性特性包括下面六個(gè)：
? configurable: 表示能否通過delete來(lái)刪除屬性從而重新定義屬性，能夠修改屬性的特性,默認(rèn)為true
? enumberable: 表示是否能通過for-in循環(huán)返回屬性。默認(rèn)為true
? writable: 是否可以修改屬性, 默認(rèn)為true
? value: 包含這個(gè)屬性的數(shù)據(jù)值。讀取屬性值時(shí)3,從這個(gè)屬性讀，寫入屬性時(shí)，把新值保存到這個(gè)位置。默認(rèn)值為undefine.
? getter: 在讀取屬性時(shí)，調(diào)用的函數(shù)
? setter: 在寫入屬性時(shí)調(diào)用的函數(shù)
? 特別注意：一旦調(diào)用了Object.defineProperty方法之后，那些未定義的特性值除了configurable為false之外，其他都為undefined;

? DOM是針對(duì)HTML和XML文檔的一個(gè)API(應(yīng)用程序編程接口). DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹, 允許開發(fā)人員添加, 移除和修改頁(yè)面的某一部分.
? 常用的DOM方法:
1)查找
a) getElementById(id) //通過元素Id，唯一性
b) getElementsByTagName() //通過標(biāo)簽名稱
c) getElementsByName() //通過元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)，

  會(huì)得到一個(gè)數(shù)組，其中包括id等于name值的)

2）添加、移除、替換、插入 復(fù)制
c) appendChild(node) // 可添加 可移動(dòng)位置;可添加元素 可添加文本
d) removeChild(node)
e) replaceChild(取代別人的mode,已有節(jié)點(diǎn)) // 替換已有節(jié)點(diǎn)
f) insertBefore(插入節(jié)點(diǎn),已有節(jié)點(diǎn)) //在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)
g) cloneNode(true/false) //深淺復(fù)制

3)創(chuàng)建

createDocumentFragment()    //創(chuàng)建一個(gè)DOM片段
 createElement()  //創(chuàng)建一個(gè)具體的元素 div  p  span
 createTextNode()   //創(chuàng)建一個(gè)文本節(jié)點(diǎn)

4)
i) getAttribute()
j) setAttribute()

5 常用的DOM屬性
a) innerHTML 節(jié)點(diǎn)(元素)的文本值
b) parentNode 節(jié)點(diǎn)(元素)的父節(jié)點(diǎn)
c) childNodes
d) attributes 節(jié)點(diǎn)(元素)的屬性節(jié)點(diǎn)

6.兩個(gè)節(jié)點(diǎn)的關(guān)系

為了方便書寫，以下用dom來(lái)表示獲取的HTML的節(jié)點(diǎn)。

dom.style.width/height

　　這種方式只能取到dom元素內(nèi)聯(lián)樣式所設(shè)置的寬高，也就是說(shuō)如果該節(jié)點(diǎn)的樣式是在style標(biāo)簽中或外聯(lián)的CSS文件中設(shè)置的話，通過這種方法是獲取不到dom的寬高的。

dom.currentStyle.width/height

　 這種方式獲取的是在頁(yè)面渲染完成后的結(jié)果，就是說(shuō)不管是哪種方式設(shè)置的樣式，都能獲取到。
　 但這種方式只有IE瀏覽器支持。

window.getComputedStyle(dom).width/height

　　這種方式的原理和2是一樣的，這個(gè)可以兼容更多的瀏覽器，通用性好一些。

dom.getBoundingClientRect().width/height

　　這種方式是根據(jù)元素在視窗中的絕對(duì)位置來(lái)獲取寬高的

dom.offsetWidth/offsetHeight
這個(gè)就沒什么好說(shuō)的了，最常用的，也是兼容最好的。

主要考核 事件處理程序 和event對(duì)象及其屬性和方法

var EventUtil = {
        addHandler: function(element,type,handler) {//添加事件處理程序
            if(element.addEventListener) {
                element.addEventListener(type,handler,false)
            } else if(element.attachEvent){
                element.attachEvent("on" + type, handler);
            } else {
                element["on" + type] = handler;
            }
        },
        removeHandler:function(element,type,handler) {//移除事件處理程序
            if(element.removeEventListener) {
                element.removeEventListener(type,handler,false)
            }
        },
        getEvent:function(event){// 獲取事件對(duì)象
            return event ? event : window.event;
        },
        getTarget:function(event){// 獲取事件的目標(biāo)
            return event.target || event.srcElement;
        },
        preventDefault(){
            (event) =>{
                if(event.preventDefault){event.preventDefault()}
                else {event.returnValue= false}
            }
        },
        stopPropagation(){
             (event) =>{
                if(event.stopPropagation){event.stopPropagation()}
                else {event.cancelBubble= true;}
            }
        }
    }
    var list = document.getElementById("list")
    EventUtil.addHandler(list,"click",function(ev){
        event= EventUtil.getEvent(ev);
        var target = EventUtil.getTarget(event);
        alert(target.id);
    })

方法有很多，閉包法、立即執(zhí)行函數(shù)法、、事件委托法；
但本題主要考核 DOM事件流 利用事件委托，減少dom操作，提高性能

var list = document.getElementById("list")
 list.onclick = function(ev){
       var ev = ev || window.event; 　　　　
       var target = ev.target || ev.srcElement;
       console.log(target.id);
     }

原生的寫法

 var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function(){
       if(xhr.readyState == 4){
           console.log(xhr.status)
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status ==304){
               var hh = xhr.responseText;
               var haha1 = document.getElementById("wokao");
               haha1.innerHTML = hh;
            }else{
                alert("failed11",xhr.status);
            } 
        }
    }
   xhr.open("get","http://10.10.65.109:8888/text.json",true);
   xhr.setRequestHeader("Accept", "application/json"); 
 //  xhr.responseType = "json";
   xhr.send(null);
   

何為異步？ 異步與同步的概念
實(shí)現(xiàn)異步的方法：回調(diào) 事件 promise
Ajax最大特性：可以實(shí)現(xiàn)動(dòng)態(tài)不刷新（局部刷新）.
優(yōu)點(diǎn)：

通過異步模式，提升了用戶體驗(yàn)
優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用
Ajax在客戶端運(yùn)行，承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作，減少了大用戶量下的服務(wù)器負(fù)載。

缺點(diǎn)

1、ajax不支持瀏覽器back按鈕。
2、安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。
3、對(duì)搜索引擎的支持比較弱。
4、破壞了程序的異常機(jī)制。
5、不容易調(diào)試。

**post 和get的區(qū)別：**

? GET請(qǐng)求會(huì)將參數(shù)跟在URL后進(jìn)行傳遞，而POST請(qǐng)求則是作為HTTP消息的實(shí)體內(nèi)容發(fā)送給WEB服務(wù)器。當(dāng)然在Ajax請(qǐng)求中，這種區(qū)別對(duì)用戶是不可見的。
? GET方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存起來(lái)，因此其他人就可以從瀏覽器的歷史記錄中讀取到這些數(shù)據(jù)，例如賬號(hào)和密碼等。在某種情況下，GET方式會(huì)帶來(lái)嚴(yán)重的安全問題。而POST方式相對(duì)來(lái)說(shuō)就可以避免這些問題。
? "GET方式提交的數(shù)據(jù)最多只能是1024字節(jié)"，post無(wú)
? get請(qǐng)求和post請(qǐng)求在服務(wù)器端的區(qū)別:在客戶端使用get請(qǐng)求時(shí),服務(wù)器端使用Request.QueryString來(lái)獲取參數(shù),而客戶端使用post請(qǐng)求時(shí),服務(wù)器端使用Request.Form來(lái)獲取參數(shù).

**適用場(chǎng)景：**
POST用于創(chuàng)建資源，資源的內(nèi)容會(huì)被編入HTTP請(qǐng)示的內(nèi)容中。例如，處理訂貨表單、在數(shù)據(jù)庫(kù)中加入新數(shù)據(jù)行等。

當(dāng)請(qǐng)求無(wú)副作用時(shí)（如進(jìn)行搜索），便可使用GET方法；當(dāng)請(qǐng)求有副作用時(shí)（如添加數(shù)據(jù)行），則用POST方法。

若符合下列任一情況，則用POST方法：

請(qǐng)求的結(jié)果有持續(xù)性的副作用，例如，數(shù)據(jù)庫(kù)內(nèi)添加新的數(shù)據(jù)行。

若使用GET方法，則表單上收集的數(shù)據(jù)可能讓URL過長(zhǎng)。

要傳送的數(shù)據(jù)不是采用7位的ASCII編碼。
若符合下列任一情況，則用GET方法：

請(qǐng)求是為了查找資源，HTML表單數(shù)據(jù)僅用來(lái)幫助搜索。

請(qǐng)求結(jié)果無(wú)持續(xù)性的副作用。

收集的數(shù)據(jù)及HTML表單內(nèi)的輸入字段名稱的總長(zhǎng)不超過1024個(gè)字符。

對(duì)cookie localStorage sessionStorage的理解

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

**cookie:**

? cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）。
? cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），記會(huì)在瀏覽器和服務(wù)器間來(lái)回傳遞。
? sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
? 存儲(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)閉
? 作用域不同:
? sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面；
? localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
? Web Storage 支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。
? Web Storage 的 api 接口使用更方便。
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。

而localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。
Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie的大小是受限的，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie都會(huì)被發(fā)送過去，這樣無(wú)形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用。

除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。
總之：cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生
cookie優(yōu)點(diǎn)：極高的擴(kuò)展性和可用性 缺點(diǎn)： 數(shù)量和長(zhǎng)度受限、安全問題
cookie 和session 的區(qū)別：
1、cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙

考慮到安全應(yīng)當(dāng)使用session。

3、session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多，會(huì)比較占用你服務(wù)器的性能

 考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。

4、單個(gè)cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。
5、所以個(gè)人建議：

將登陸信息等重要信息存放為SESSION
其他信息如果需要保留，可以放在COOKIE中

IE支持currentStyle，F(xiàn)Irefox使用getComputStyle

IE 使用innerText，F(xiàn)irefox使用textContent

濾鏡方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num

事件方面：IE：attachEvent：火狐是addEventListener

鼠標(biāo)位置：IE是event.clientX；火狐是event.pageX

IE使用event.srcElement；Firefox使用event.target

IE中消除list的原點(diǎn)僅需margin:0即可達(dá)到最終效果；FIrefox需要設(shè)置margin:0;padding:0以及l(fā)ist-style:none

CSS圓角：ie7以下不支持圓角

原則，那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象。

javascript 的this主要是看如何調(diào)用這個(gè)函數(shù)，而不是這個(gè)函數(shù)所在的作用域。obj.fn() fn中的 this 就是 obj。 fn() this是undifine, 而在js進(jìn)入函數(shù)之前，會(huì)有 if(!this) { this = window} 這樣的操作。

this 一共有六種不同的值：

普通函數(shù)調(diào)用，this為全局對(duì)象或是undefined

作為對(duì)象的方法，this為那個(gè)對(duì)象

new 表達(dá)式，this為以該函數(shù)為原型的新創(chuàng)建的對(duì)象

使用 apply/call指定 this

用bind綁定固定的this

事件處理函數(shù)中的this是當(dāng)前的觸發(fā)事件的DOM元素(event.currentTarget)
IE attachEvent添加的事件處理函數(shù)中this為window

    
    


在嚴(yán)格模式下，一般的函數(shù)調(diào)用中 this 的值是 undefined。

    show this

測(cè)試DOM元素(event.currentTarget)
測(cè)試DOM元素IE
    

1.函數(shù)的調(diào)用方式

方法調(diào)用模型 var obj = { func : function(){};} obj.func()

函數(shù)調(diào)用模式　　var aa = function(){} aa();

構(gòu)造器調(diào)用模式

apply/ call調(diào)用模式

立即執(zhí)行函數(shù)(function(){}())

區(qū)別：函數(shù)調(diào)用模式，有函數(shù)提升的；即aa() 無(wú)需必須在var aa = function(){} 后面

2.return的含義

注：return不一定非得用在function 中，也可以直接放在html中，如:onsubmit="return false";

語(yǔ)法：return 表達(dá)式;
含義：語(yǔ)句結(jié)束函數(shù)執(zhí)行，返回調(diào)用函數(shù)，而且把表達(dá)式的值作為函數(shù)的結(jié)果
通常函數(shù)經(jīng)過一系列的處理后需要給外部返回一個(gè)值,這個(gè)值一般用return返回出去,也可以是說(shuō)return是向函數(shù)返回返回值,并終止函數(shù)的運(yùn)行.

return;

含義：即 return null 無(wú)函數(shù)返回值；
能中斷方法的執(zhí)行，但無(wú)法阻止事件的默認(rèn)行為。
把控制權(quán)返回給頁(yè)面。

return false;

    含義：相當(dāng)于終止符；
    1. 一般是用來(lái)取消默認(rèn)動(dòng)作的。比如，終止表單提交。比如你單擊一個(gè)鏈接除了觸發(fā)你的onclick事件外
    還會(huì)觸發(fā)一個(gè)默認(rèn)事件就是執(zhí)行頁(yè)面的跳轉(zhuǎn)。
    所以如果你想取消對(duì)象的默認(rèn)動(dòng)作（event.preventDefault();）就可以return false。
    2. return false 只在當(dāng)前函數(shù)有效，不會(huì)影響其他外部函數(shù)的執(zhí)行
    

retrun true；

    含義：相當(dāng)于執(zhí)行符。執(zhí)行終止默認(rèn)的事件行為
     返回正確的處理結(jié)果。

? 閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù). 創(chuàng)建閉包常見方式,就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù).
作用:
1.匿名自執(zhí)行函數(shù) (function (){ ... })(); 創(chuàng)建了一個(gè)匿名的函數(shù)，并立即執(zhí)行它，由于外部無(wú)法引用它內(nèi)部的變量，因此在執(zhí)行完后很快就會(huì)被釋放，關(guān)鍵是這種機(jī)制不會(huì)污染全局對(duì)象。
2.緩存, 可保留函數(shù)內(nèi)部的值
3.實(shí)現(xiàn)封裝
4.實(shí)現(xiàn)模板
5.給了js函數(shù)生成函數(shù)的能力，增加了js代碼的抽象能力
缺點(diǎn)
1.造成內(nèi)存泄露；變量?jī)?nèi)存無(wú)法被標(biāo)記，導(dǎo)致內(nèi)存不會(huì)被垃圾回收機(jī)制回收。
為什么要用
局部變量無(wú)法共享和長(zhǎng)久的保存，而全局變量可能造成變量污染，所以我們希望有一種機(jī)制既可以長(zhǎng)久的保存變量又不會(huì)造成全局污染。
如何使用
1.定義外層函數(shù)，封裝被保護(hù)的局部變量。
2.定義內(nèi)層函數(shù)，執(zhí)行對(duì)外部函數(shù)變量的操作。
3.外層函數(shù)返回內(nèi)層函數(shù)的對(duì)象，并且外層函數(shù)被調(diào)用，結(jié)果保存在一個(gè)全局的變量中。

var getNum;
function getCounter() { 
    var n = 1; 
    var inner = function () { return n++; }
    return inner;
}

getNum = getCounter();
console.log(getNum()); //1   2 3 4

apply 、 call 、bind 三者都是用來(lái)改變函數(shù)的this對(duì)象的指向的；
apply 、 call 、bind 三者第一個(gè)參數(shù)都是this要指向的對(duì)象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用后續(xù)參數(shù)傳參；
bind是返回對(duì)應(yīng)函數(shù)，便于稍后調(diào)用；
apply 、call 則是立即調(diào)用 。

function fn(a,b){
    console.log(this);
    console.log(a);
    console.log(b);
}
// bind(this,args...)
bf = fn.bind("Bind this",10); // 沒有任何輸出，也就是說(shuō)沒有執(zhí)行這個(gè)函數(shù)
bf(); // "Bind this",10,undefined
bf(20);// “Bind this”,10,20
// 原函數(shù)不受影響
fn(1,2); //window， 1，2
bf2 = fn.bind("Bind this",1,2);
bf2(); // "Bind this",1,2

// call(this,args...)
fn.call("Call this",1) // "Call this",1,undefined
fn.call("Call this",1,2) // "Call this",1,2

// apply(this,[args])
fn.apply("Apply this",[1]) // "Apply this",1,undefined
fn.apply("Apply this",[1,2]) // "Apply this",1,2

特性，即封裝、繼承、多態(tài)
此處內(nèi)容較多，便不詳細(xì)敘述。注意一下繼承的方式
繼承6方式：
　　1、拷貝繼承：通用型 有new無(wú)new都可以用
　　2、類式繼承：new構(gòu)造函數(shù)---利用構(gòu)造函數(shù)（類）繼承的方式
　　3、原型繼承：無(wú)new的對(duì)象---借助原型來(lái)實(shí)現(xiàn)對(duì)象繼承對(duì)象
　　4. 屬性繼承：調(diào)用父類的構(gòu)造函數(shù)call
　　5. 方法繼承：用for in的形式 拷貝繼承（jq也用拷貝繼承）

嚴(yán)格模式”的目的，主要有以下幾個(gè)：

消除Javascript語(yǔ)法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;

　　- 消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全；
　　- 提高編譯器效率，增加運(yùn)行速度；
　　- 為未來(lái)新版本的Javascript做好鋪墊。
“嚴(yán)格模式”體現(xiàn)了Javascript更合理、更安全、更嚴(yán)謹(jǐn)?shù)陌l(fā)展方向

1.延遲加載有些 js 代碼并不是頁(yè)面初始化的時(shí)候就立刻需要的，而稍后的某些情況才需要的。延遲加載就是一開始并不加載這些暫時(shí)不用的js，而是在需要的時(shí)候或稍后再通過js 的控制來(lái)異步加載。
JS延遲加載有助于提高頁(yè)面加載速度。

js的進(jìn)程由解析和執(zhí)行構(gòu)成。所有的延遲加載方式都只是延遲了執(zhí)行過程。解析從未停止
js的執(zhí)行順序是自上而下。
延遲加載幾種方式：

defer 屬性 defer的作用是，告訴瀏覽器，等到DOM加載完成后，再執(zhí)行指定腳本。
async 屬性 async的作用是，使用另一個(gè)進(jìn)程下載腳本，下載時(shí)不會(huì)阻塞渲染，下載好了 就執(zhí)行。
動(dòng)態(tài)創(chuàng)建DOM方式  document.createElement 
使用jQuery的getScript方法
使用setTimeout延遲方法
讓JS最后加載（放在文檔尾部）

2.同步加載，又稱阻塞模式，會(huì)阻止瀏覽器的后續(xù)處理，停止了后續(xù)的解析，因此停止了后續(xù)的文件加載（如圖像）、渲染、代碼執(zhí)行。

3.異步加載：也就是說(shuō)第一個(gè)fun請(qǐng)求數(shù)據(jù)時(shí)，數(shù)據(jù)還未返回時(shí)便開始執(zhí)行第二個(gè)fun了
代表：ajax 回調(diào) 事件 promise

4.預(yù)加載
一種瀏覽器機(jī)制，使用瀏覽器空閑時(shí)間來(lái)預(yù)先下載/加載用戶接下來(lái)很可能會(huì)瀏覽的頁(yè)面/資源，當(dāng)用戶訪問某個(gè)預(yù)加載的鏈接時(shí)，如果從緩存命中,頁(yè)面就得以快速呈現(xiàn)
5.圖片延遲加載的方式

許多OO語(yǔ)言支持兩種繼承方式：接口繼承和實(shí)現(xiàn)繼承。
接口繼承只繼承方法簽名，實(shí)現(xiàn)繼承則繼承實(shí)際的方法。
由于函數(shù)無(wú)簽名，在JavaScript中無(wú)法實(shí)現(xiàn)接口繼承。所以只能實(shí)現(xiàn)方法繼承。
實(shí)現(xiàn)繼承主要依賴原型鏈。
基本思想：利用原型，讓那個(gè)一個(gè)引用類型繼承另一個(gè)引用類型的屬性和方法。A.prototype= new B();讓原型對(duì)象等于另一個(gè)類型的實(shí)例。
所有函數(shù)的默認(rèn)原型都是Object的實(shí)例
即A繼承了B ；B 繼承了Object;

什么是原型對(duì)象。我們知道每個(gè)構(gòu)造函數(shù)一旦創(chuàng)建都有prototype指針指向它的原型對(duì)象（構(gòu)造函數(shù).prototype）。而原型對(duì)象（構(gòu)造函數(shù).prototype）會(huì)默認(rèn)生成一個(gè)constructor指針又指向構(gòu)造函數(shù)。在創(chuàng)建實(shí)例時(shí)，每個(gè)實(shí)例有一個(gè)__proto__指向該原型對(duì)象。原型對(duì)象內(nèi)創(chuàng)建的所有方法會(huì)被所有實(shí)例共享。
例：

 Function.prototype = {    
        constructor : Function,
        __proto__ : parent prototype,
        some prototype properties: ...
    };

原型對(duì)象中的方法屬性是被所有實(shí)例共享的。如果含有引用類型的屬性，如數(shù)組，修改person1中的數(shù)組屬性，也會(huì)導(dǎo)致person2中的該屬性發(fā)生變化。

什么是原型鏈？
函數(shù)的原型對(duì)象constructor默認(rèn)指向函數(shù)本身，原型對(duì)象除了有原型屬性外，為了實(shí)現(xiàn)繼承，還有一個(gè)原型鏈指針proto，該指針指向上一層的原型對(duì)象，而上一層的原型對(duì)象的結(jié)構(gòu)依然類似，這樣利用proto一直指向Object的原型對(duì)象上，而Object的原型對(duì)象用Object.prototype.proto = null表示原型鏈的最頂端，如此變形成了javascript的原型鏈繼承，同時(shí)也解釋了為什么所有的javascript對(duì)象都具有Object的基本方法。

原型鏈就是創(chuàng)建一個(gè)構(gòu)造函數(shù)，它會(huì)默認(rèn)生成一個(gè)prototype屬性并指向原型對(duì)象。使用下一個(gè)構(gòu)造函數(shù)的原型對(duì)象作為這個(gè)構(gòu)造函數(shù)的實(shí)例。即 A.prototype = new B(); 在下下一個(gè)構(gòu)造函數(shù)的原型對(duì)象 = new nextFuction。這樣下去就會(huì)構(gòu)成一條實(shí)例與原型之間的鏈條，這就是原型鏈。

構(gòu)造函數(shù)A()和實(shí)例a1 a2之間的關(guān)系；var a1 = new A(); var a2 = new A();
實(shí)例a1與實(shí)例a2是獨(dú)立的
實(shí)例和原型的關(guān)系 a1.__proto__ = A.prototype
構(gòu)造函數(shù)A()和其原型的關(guān)系 A.prototype.constructor=A

6種繼承方式
原型鏈繼承本質(zhì):
是子用類型B的原型等于超類型的實(shí)例,
B.prototype= new A()

構(gòu)造函數(shù)繼承本質(zhì):
是子用類型的構(gòu)造函數(shù)內(nèi)部調(diào)用A(),
B(){A.call(this,**);}

組合繼承本質(zhì)
原型鏈和構(gòu)造函數(shù)的組合，原型繼承方法，構(gòu)造函數(shù)繼承屬性

原型式繼承本質(zhì):基于已有對(duì)象創(chuàng)建一個(gè)對(duì)象,
即對(duì)象A的淺拷貝,
var b= Object.create(A)

寄生式繼承本質(zhì):
創(chuàng)建一個(gè)用于封裝繼承過程的函數(shù),
function b(A){var clone = Object.create(A) ;clone.=;return clone;}

寄生組合繼承本質(zhì):
寄生式繼承超類型A的原型,并將結(jié)果賦值給子類型的原型;
或?qū)?duì)象A的原型淺拷貝，
function B(**){

A.call(this,**)

}
function c(A,B){var clone = Object.create(A.prototype); clone.constructor = B;B.prototype=clone;) ;}

 function Person(name) {
            this.name = ["123","456","789",name];
        }
        Person.prototype.go = function(){
            return console.log(this.name)
        }
        Person.prototype.sex = ["男","女"];
        var ren = new Person();
        console.log("構(gòu)造函數(shù)和原型的關(guān)系:",Person.prototype.constructor ===Person)
        console.log("實(shí)例和原型的關(guān)系",ren.__proto__ ===Person.prototype)
        
        // 原型鏈繼承 
        // 缺點(diǎn)1.不能向person中傳遞參數(shù)；
        // 缺點(diǎn)2.超類型的原型屬性會(huì)被其他實(shí)例共享，一個(gè)實(shí)例改變，則其他實(shí)例也改變。
        // 下面2個(gè)原型的順序不能換  
        function Shuagnfeng(love) {
            this.love = ["fd","fddfdf"]; 
        }
        Shuagnfeng.prototype = new Person();
        console.log("會(huì)誤會(huì)超類型Person:",Shuagnfeng.prototype.constructor ===Person) //true
        console.log("構(gòu)成原型鏈,",Shuagnfeng.prototype.__proto__ ===Person.prototype) //true
        Shuagnfeng.prototype.constructor ===Shuagnfeng;
        Shuagnfeng.prototype.goWork = function(){
           return  console.log("原型鏈繼承的方法");
        }
        var child = new Person();
Shuagnfeng.prototype.name.push(121);
console.log("超類型實(shí)例2 child",child.name);

        var xiaozhang = new Shuagnfeng("dff");
        var xiaozhang1 = new Shuagnfeng("zzz");
        xiaozhang.go();
        xiaozhang.goWork();   
        xiaozhang.name.push("只對(duì)xiaozhang增加屬于超類型Person中array值",22);
        xiaozhang.love.push("只對(duì)xiaozhang增加屬于構(gòu)造函數(shù)中array值",22);
        xiaozhang.sex.push("只對(duì)xiaozhang增加屬于超類型的原型中array值");

        console.log("xiaozhang.超類型Person中name",xiaozhang.name);
        console.log("xiaozhang1.超類型Person中name",xiaozhang1.name);
        console.log("xiaozhang.構(gòu)造函數(shù)中中l(wèi)ove",xiaozhang.love);
        console.log("xiaozhang1.構(gòu)造函數(shù)中l(wèi)ove",xiaozhang1.love);
        console.log("xiaozhang.超類型的原型中sex",xiaozhang.sex);
        console.log("xiaozhang1.超類型的原型中sex",xiaozhang1.sex);


// 構(gòu)造函數(shù)的繼承
// 優(yōu)點(diǎn)，不會(huì)改變引用類型的屬性，能傳遞參數(shù)
// 缺點(diǎn)無(wú)法復(fù)用方法；
        function Jianbo() {
            Person.call(this,"構(gòu)造函數(shù)的繼承")
        }
        var xiaonie = new Jianbo();
        console.log("構(gòu)造函數(shù)的繼承xiaonie.name可傳參數(shù)",xiaonie.name);
       // xiaonie.go(); // 不存在



// 組合繼承
// 原型鏈繼承方法、構(gòu)造函數(shù)繼承屬性
        function Nb(love) {
            Person.call(this,"nb")
            this.love = love
        }
        Nb.prototype = new Person("12");
        console.log("12",Nb.prototype.constructor ===Person) // true 
        console.log("13",Nb.prototype.constructor ===Nb)// false 因?yàn)橹貙懺?，?huì)使原型失去了constructor屬性
        Nb.prototype.constructor =Nb
         console.log("14",Nb.prototype.constructor ===Person) // false
        Nb.prototype.say = function(){
            console.log("say","say")
        }
        var nb= new Nb();
        var nb1= new Nb("組合繼承");
        nb.name.push("xiaoniubi");
        console.log("nb.name",nb.name);
        console.log("nb1.name",nb1.name);
        console.log("nb1.love",nb1.love);
        nb.go();
        nb.say();

// 原型式繼承Object.create()  將基礎(chǔ)對(duì)象傳給object()函數(shù) 
// 本質(zhì)是淺復(fù)制  副本的引用類型會(huì)被改變
// 缺點(diǎn)：引用類型的屬性會(huì)被共享  和原型鏈繼承差不多
// 使用場(chǎng)景： 讓一個(gè)對(duì)象與另一個(gè)對(duì)象的保持類似
function object(o){
    function F(){}
    F.prototype= o;
    return new F();
}
var animal = {
    name:"原型式繼承默認(rèn)值",
    friends:[1,2,3,4]
}
var haha= object(animal);
var gaga = Object.create(animal);
var haha1= object(animal);
console.log("haha",haha.name);
console.log("gaga",gaga.name);
haha.name="原型式繼承name值變了";
haha.friends.push("原型式繼承array值變了");
console.log("haha",haha.name);
console.log("haha1",haha1.name);
console.log("haha",haha.friends);
console.log("haha1",haha1.friends);

// 寄生式繼承
// 能繼承方法，但方法不能復(fù)用
function createAnother(original){
 var clone =  object(original);
 clone.say = function(){
    console.log("寄生式繼承方法")
 }
  return clone;
}

var hh = createAnother(animal);
hh.name="寄生式繼承"
console.log("hh",hh.name);
hh.say()       

// 寄生組合式
// 所有方式中最有效的方式 只調(diào)用繼承的構(gòu)造函數(shù)一次




// 判斷實(shí)例和原型的關(guān)系  使用instanceof 和 isPrototypeOf()
        console.log("實(shí)例和原型的關(guān)系",xiaozhang instanceof Shuagnfeng);
        console.log("實(shí)例和原型的關(guān)系",xiaozhang instanceof Person);
        console.log("實(shí)例和原型的關(guān)系",xiaozhang instanceof Object);
        console.log("實(shí)例和原型的關(guān)系",Object.prototype.isPrototypeOf(xiaozhang));
        console.log(xiaozhang.__proto__); 

事件處理程序 獲取事件對(duì)象 事件目標(biāo)
好處 減少DOM 操作 ，減少性能

造成跨域的原因：
瀏覽器的同源策略，即XMLHttpRequest(XHR)對(duì)象只能訪問同一域中的資源
這是種防止惡意行為的安全策略。
第二個(gè)：瀏覽器中不同域的框架之間是不能進(jìn)行js的交互操作的。

何謂同源:URL由協(xié)議、域名、端口和路徑組成，如果兩個(gè)URL的協(xié)議、域名和端口相同，則表示它們同源。

在瀏覽器中，

瀏覽器內(nèi)核又可以分成兩部分：
渲染引擎(layout engineer或者RenderingEngine)和JS引擎。
JS的引擎深入分析鏈接描述
10分鐘理解JS引擎的執(zhí)行機(jī)制
http://www.ruanyifeng.com/blo...
JS引擎負(fù)責(zé)對(duì)JavaScript進(jìn)行解釋、編譯和執(zhí)行，以使網(wǎng)頁(yè)達(dá)到一些動(dòng)態(tài)的效果。

js的幾種引入方式；
js引擎是單線程 異步的
--- 任務(wù)隊(duì)列 事件 和回調(diào)函數(shù) Event Loop
是通過的事件循環(huán)(event loop),實(shí)現(xiàn)單線程和異步的。
單線程：同一時(shí)刻只能執(zhí)行一個(gè)代碼塊
將要執(zhí)行的代碼放在任務(wù)隊(duì)列中，但js引擎執(zhí)行代碼塊結(jié)束，事件循環(huán)會(huì)執(zhí)行任務(wù)隊(duì)列中的下一個(gè)任務(wù)。
Event Loop 負(fù)責(zé)監(jiān)控代碼執(zhí)行和管理任務(wù)隊(duì)列。
異步的，即可通過事件 回調(diào)等方式，向任務(wù)隊(duì)列中添加新任務(wù)。

JS的執(zhí)行機(jī)制是

首先判斷JS是同步還是異步,同步就進(jìn)入主進(jìn)程,異步就進(jìn)入event table
異步任務(wù)在event table中注冊(cè)函數(shù),當(dāng)滿足觸發(fā)條件后,被推入event queue
同步任務(wù)進(jìn)入主線程后一直執(zhí)行,直到主線程空閑時(shí),才會(huì)去event queue中查看是否有可執(zhí)行的異步任務(wù),如果有就推入主進(jìn)程中
以上三步循環(huán)執(zhí)行,這就是event loop

準(zhǔn)確的劃分方式是:
macro-task(宏任務(wù))：包括整體代碼script，setTimeout，setInterval
micro-task(微任務(wù))：Promise，process.nextTick
按照這種分類方式:JS的執(zhí)行機(jī)制是

執(zhí)行一個(gè)宏任務(wù),過程中如果遇到微任務(wù),就將其放到微任務(wù)的【事件隊(duì)列】里
當(dāng)前宏任務(wù)執(zhí)行完成后,會(huì)查看微任務(wù)的【事件隊(duì)列】,并將里面全部的微任務(wù)依次執(zhí)行完
重復(fù)以上2步驟,結(jié)合event loop(1) event loop(2) ,就是更為準(zhǔn)確的JS執(zhí)行機(jī)制了。

7 錯(cuò)誤監(jiān)控
前端錯(cuò)誤的分類

運(yùn)行時(shí)錯(cuò)誤（代碼錯(cuò)誤）

資源加載錯(cuò)誤

接口錯(cuò)誤

錯(cuò)誤的捕獲方式

運(yùn)行時(shí)錯(cuò)誤的捕獲方式：

try...catch
window.onerror 含有詳細(xì)的error信息  
    window.onerror = function(msg, url, lineNo, columnNo, error){}
window.addEventListener("error")
     window.addEventListener("error", event =>  
        { console.log("addEventListener error:" + event.target); 
        }, true); 
   

資源加載錯(cuò)誤：

object.onerror（如img,script）
performance.getEntries()
Error事件捕獲

接口錯(cuò)誤：

    所有http請(qǐng)求都是基于xmlHttpRequest或者fetch封裝的。
    所以要捕獲全局的接口錯(cuò)誤，方法就是封裝xmlHttpRequest或者fetch

結(jié)論
1.使用window.onerror捕獲JS運(yùn)行時(shí)錯(cuò)誤
2.使用window.addEventListener(‘unhandledrejection’)捕獲未處理的promise reject錯(cuò)誤
3.重寫console.error捕獲console.error錯(cuò)誤
4.在跨域腳本上配置crossorigin="anonymous"捕獲跨域腳本錯(cuò)誤
window.addEventListener(‘error’)捕獲資源加載錯(cuò)誤。因?yàn)樗材懿东@js運(yùn)行時(shí)錯(cuò)誤，為避免重復(fù)上報(bào)js運(yùn)行時(shí)錯(cuò)誤，此時(shí)只有event.srcElement inatanceof HTMLScriptElement或HTMLLinkElement或HTMLImageElement時(shí)才上報(bào)
5.重寫window.XMLHttpRequest和window.fetch捕獲請(qǐng)求錯(cuò)誤

延伸：跨域的js運(yùn)行錯(cuò)誤可以捕獲嗎，錯(cuò)誤提示什么，應(yīng)該怎么處理？

可以。
Script error
1.在script標(biāo)簽增加crossorigin屬性
2.設(shè)置js資源響應(yīng)頭Access-Control-Allow-Orgin:*

上報(bào)錯(cuò)誤的基本原理

1. 采用Ajax通信方式上報(bào)
2. 利用Image對(duì)象上報(bào)

更多