參考: 《JavaScript》高級(jí)程序設(shè)計(jì)第21章:Ajax和Comet jQuery中Ajax操作
用法: 都能繼承另一個(gè)對(duì)象的方法和屬性,區(qū)別在于參數(shù)列表不一樣 區(qū)別: Function.apply(obj, args) args是一個(gè)數(shù)組,作為參數(shù)傳給Function Function.call(obj, arg1, arg2,...) arg*是參數(shù)列表 apply一個(gè)妙用: 可以將一個(gè)數(shù)組默認(rèn)的轉(zhuǎn)化為一個(gè)參數(shù)列表 舉個(gè)栗子: 有一個(gè)數(shù)組arr要push進(jìn)一個(gè)新的數(shù)組中去, 如果用call的話需要把數(shù)組中的元素一個(gè)個(gè)取出來再push, 而用apply只有Array.prototype.push.apply(this, arr)
用法: bind()函數(shù)會(huì)創(chuàng)建一個(gè)新函數(shù), 為綁定函數(shù)。當(dāng)調(diào)用這個(gè)綁定函數(shù)時(shí),綁定函數(shù)會(huì)以創(chuàng)建它時(shí)傳入bind方法的第一個(gè)參數(shù)作為this,傳入bind方法的第二個(gè)以及以后的參數(shù)加上綁定函數(shù)運(yùn)行時(shí)本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來調(diào)用原函數(shù). 一個(gè)綁定函數(shù)也能使用new操作符創(chuàng)建對(duì)象:這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。提供的 this 值被忽略,同時(shí)調(diào)用時(shí)的參數(shù)被提供給模擬函數(shù)。
事件委托利用了事件冒泡, 只指定一個(gè)事件處理程序, 就可以管理某一類型的所有事件. 例: html部分: 要點(diǎn)擊li彈出其id html部分 <ul id="list"> <li id="li-1">Li 2</li> <li id="li-2">Li 3</li> <li id="li-3">Li 4</li> <li id="li-4">Li 5</li> <li id="li-5">Li 6</li> <li id="li-6">Li 7</li> </ul> //js部分 document.getElementById("list").addHandler("click", function(e){ var e = e || window.event; var target = e.target || e.srcElement; if(target.nodeName.toUpperCase == "LI"){ console.log("List item", e,target.id, "was clicked!"); } });
this 在 JavaScript 中主要由以下五種使用場(chǎng)景。 作為函數(shù)調(diào)用,this 綁定全局對(duì)象,瀏覽器環(huán)境全局對(duì)象為 window 。 內(nèi)部函數(shù)內(nèi)部函數(shù)的 this 也綁定全局對(duì)象,應(yīng)該綁定到其外層函數(shù)對(duì)應(yīng)的對(duì)象上,這是 JavaScript的缺陷,用that替換。 作為構(gòu)造函數(shù)使用,this 綁定到新創(chuàng)建的對(duì)象。 作為對(duì)象方法使用,this 綁定到該對(duì)象。 使用apply或call調(diào)用 this 將會(huì)被顯式設(shè)置為函數(shù)調(diào)用的第一個(gè)參數(shù)。
參考:js怎么實(shí)現(xiàn)繼承?
AMD是依賴提前加載 CMD是依賴延時(shí)加載
哈希表(Hash table,也叫散列表),是根據(jù)關(guān)鍵碼值(Key value)而直接進(jìn)行訪問的數(shù)據(jù)結(jié)構(gòu)。也就是說,它通過把關(guān)鍵碼值映射到表中一個(gè)位置來訪問記錄,以加快查找的速度。這個(gè)映射函數(shù)叫做散列函數(shù),存放記錄的數(shù)組叫做散列表。 使用哈希查找有兩個(gè)步驟: 使用哈希函數(shù)將被查找的鍵轉(zhuǎn)換為數(shù)組的索引。在理想的情況下,不同的鍵會(huì)被轉(zhuǎn)換為不同的索引值,但是在有些情況下我們需要處理多個(gè)鍵被哈希到同一個(gè)索引值的情況。 所以哈希查找的第二個(gè)步驟就是處理沖突。處理哈希碰撞沖突。有很多處理哈希碰撞沖突的方法,比如拉鏈法和線性探測(cè)法。 元素特征轉(zhuǎn)變?yōu)閿?shù)組下標(biāo)的方法就是散列法。散列法當(dāng)然不止一種,下面列出三種比較常用的: 1,除法散列法 最直觀的一種,上圖使用的就是這種散列法,公式: index = value % 16 學(xué)過匯編的都知道,求模數(shù)其實(shí)是通過一個(gè)除法運(yùn)算得到的,所以叫“除法散列法”。 2,平方散列法 求index是非常頻繁的操作,而乘法的運(yùn)算要比除法來得省時(shí)(對(duì)現(xiàn)在的CPU來說,估計(jì)我們感覺不出來),所以我們考慮把除法換成乘法和一個(gè)位移操作。公式: index = (value * value) >> 28 (右移,除以2^28。記法:左移變大,是乘。右移變小,是除。) 如果數(shù)值分配比較均勻的話這種方法能得到不錯(cuò)的結(jié)果,但我上面畫的那個(gè)圖的各個(gè)元素的值算出來的index都是0——非常失敗。也許你還有個(gè)問題,value如果很大,value * value不會(huì)溢出嗎?答案是會(huì)的,但我們這個(gè)乘法不關(guān)心溢出,因?yàn)槲覀兏静皇菫榱双@取相乘結(jié)果,而是為了獲取index。 3,斐波那契(Fibonacci)散列法 解決沖突的方法:
將大小為M 的數(shù)組的每一個(gè)元素指向一個(gè)條鏈表,鏈表中的每一個(gè)節(jié)點(diǎn)都存儲(chǔ)散列值為該索引的鍵值對(duì),這就是拉鏈法. 對(duì)采用拉鏈法的哈希實(shí)現(xiàn)的查找分為兩步,首先是根據(jù)散列值找到等一應(yīng)的鏈表,然后沿著鏈表順序找到相應(yīng)的鍵。
使用數(shù)組中的空位解決碰撞沖突 參考:淺談算法和數(shù)據(jù)結(jié)構(gòu): 十一 哈希表 哈希表的工作原理
閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù). 創(chuàng)建閉包常見方式,就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù). 作用: 匿名自執(zhí)行函數(shù) (function (){ ... })(); 創(chuàng)建了一個(gè)匿名的函數(shù),并立即執(zhí)行它,由于外部無法引用它內(nèi)部的變量,因此在執(zhí)行完后很快就會(huì)被釋放,關(guān)鍵是這種機(jī)制不會(huì)污染全局對(duì)象。 緩存, 可保留函數(shù)內(nèi)部的值 實(shí)現(xiàn)封裝 實(shí)現(xiàn)模板 參考: js閉包的用途
什么是偽數(shù)組: 偽數(shù)組是能通過Array.prototype.slice 轉(zhuǎn)換為真正的數(shù)組的帶有l(wèi)ength屬性的對(duì)象 比如arguments對(duì)象,還有像調(diào)用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對(duì)象都屬于偽數(shù)組 我們可以通過Array.prototype.slice.call(fakeArray)將偽數(shù)組轉(zhuǎn)變?yōu)檎嬲腁rray對(duì)象: 返回新數(shù)組而不會(huì)修改原數(shù)組 參考:偽數(shù)組
null表示沒有對(duì)象, 即此處不該有此值. 典型用法: (1) 作為函數(shù)的參數(shù),表示該函數(shù)的參數(shù)不是對(duì)象。 (2) 作為對(duì)象原型鏈的終點(diǎn)。 ( 3 ) null可以作為空指針. 只要意在保存對(duì)象的值還沒有真正保存對(duì)象,就應(yīng)該明確地讓該對(duì)象保存null值. undefined表示缺少值, 即此處應(yīng)該有值, 但還未定義. (1)變量被聲明了,但沒有賦值時(shí),就等于undefined。 (2) 調(diào)用函數(shù)時(shí),應(yīng)該提供的參數(shù)沒有提供,該參數(shù)等于undefined。 (3)對(duì)象沒有賦值的屬性,該屬性的值為undefined。 (4)函數(shù)沒有返回值時(shí),默認(rèn)返回undefined。 undeclared即為被污染的命名, 訪問沒有被聲明的變量, 則會(huì)拋出異常, 終止執(zhí)行. 即undeclared是一種語(yǔ)法錯(cuò)誤 參考: undefined與null的區(qū)別
從目標(biāo)元素開始,往頂層元素傳播。途中如果有節(jié)點(diǎn)綁定了相應(yīng)的事件處理函數(shù),這些函數(shù)都會(huì)被一次觸發(fā)。如果想阻止事件起泡,可以使用e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)來組織事件的冒泡傳播。
而函數(shù)定義(語(yǔ)句以function關(guān)鍵字開始)是不能被立即執(zhí)行的,這無疑會(huì)導(dǎo)致語(yǔ)法的錯(cuò)誤(SyntaxError)。當(dāng)函數(shù)定義代碼段包裹在括號(hào)內(nèi),使解析器可以將之識(shí)別為函數(shù)表達(dá)式,然后調(diào)用。IIFE: (function foo(){})() 區(qū)分 (function(){})(); 和 (function(){}()); 其實(shí)兩者實(shí)現(xiàn)效果一樣。 函數(shù)字面量:首先聲明一個(gè)函數(shù)對(duì)象,然后執(zhí)行它。(function () { alert(1); })(); 優(yōu)先表達(dá)式:由于Javascript執(zhí)行表達(dá)式是從圓括號(hào)里面到外面,所以可以用圓括號(hào)強(qiáng)制執(zhí)行聲明的函數(shù)。(function () { alert(2); }());
DOM元素的attribute和property兩者是不同的東西。attribute翻譯為“特性”,property翻譯為“屬性”。 attribute是一個(gè)特性節(jié)點(diǎn),每個(gè)DOM元素都有一個(gè)對(duì)應(yīng)的attributes屬性來存放所有的attribute節(jié)點(diǎn),attributes是一個(gè)類數(shù)組的容器,說得準(zhǔn)確點(diǎn)就是NameNodeMap,不繼承于Array.prototype,不能直接調(diào)用Array的方法。attributes的每個(gè)數(shù)字索引以名值對(duì)(name=”value”)的形式存放了一個(gè)attribute節(jié)點(diǎn)。<div class="box" id="box" gameid="880">hello</div> property就是一個(gè)屬性,如果把DOM元素看成是一個(gè)普通的Object對(duì)象,那么property就是一個(gè)以名值對(duì)(name=”value”)的形式存放在Object中的屬性。要添加和刪除property和普通的對(duì)象類似。 很多attribute節(jié)點(diǎn)還有一個(gè)相對(duì)應(yīng)的property屬性,比如上面的div元素的id和class既是attribute,也有對(duì)應(yīng)的property,不管使用哪種方法都可以訪問和修改。 總之,attribute節(jié)點(diǎn)都是在HTML代碼中可見的,而property只是一個(gè)普通的名值對(duì)屬性。
document.ready和onload的區(qū)別——JavaScript文檔加載完成事件。頁(yè)面加載完成有兩種事件: 一是ready,表示文檔結(jié)構(gòu)已經(jīng)加載完成(不包含圖片等非文字媒體文件) 二是onload,指示頁(yè)面包含圖片等文件在內(nèi)的所有元素都加載完成。 jQuery中$(function(){});他的作用或者意義就是:在DOM加載完成后就可以可以對(duì)DOM進(jìn)行操作。一般情況先一個(gè)頁(yè)面響應(yīng)加載的順序是,域名解析-加載html-加載js和css-加載圖片等其他信息。
在所有的函數(shù) (或者所有最外層函數(shù)) 的開始處加入 "use strict"; 指令啟動(dòng)嚴(yán)格模式。 "嚴(yán)格模式"有兩種調(diào)用方法 1)將"use strict"放在腳本文件的第一行,則整個(gè)腳本都將以"嚴(yán)格模式"運(yùn)行。如果這行語(yǔ)句不在第一行,則無效,整個(gè)腳本以"正常模式"運(yùn)行。如果不同模式的代碼文件合并成一個(gè)文件,這一點(diǎn)需要特別注意。 2)將整個(gè)腳本文件放在一個(gè)立即執(zhí)行的匿名函數(shù)之中。 好處
壞處 同樣的代碼,在"嚴(yán)格模式"中,可能會(huì)有不一樣的運(yùn)行結(jié)果;一些在"正常模式"下可以運(yùn)行的語(yǔ)句,在"嚴(yán)格模式"下將不能運(yùn)行
核心( ECMAScript) , 文檔對(duì)象模型(DOM), 瀏覽器對(duì)象模型(BOM)
DOM是針對(duì)HTML和XML文檔的一個(gè)API(應(yīng)用程序編程接口). DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹, 允許開發(fā)人員添加, 移除和修改頁(yè)面的某一部分. 常用的DOM方法: getElementById(id) getElementsByTagName() appendChild(node) removeChild(node) replaceChild() insertChild() createElement() createTextNode() getAttribute() setAttribute() 常用的DOM屬性 innerHTML 節(jié)點(diǎn)(元素)的文本值 parentNode 節(jié)點(diǎn)(元素)的父節(jié)點(diǎn) childNodes attributes 節(jié)點(diǎn)(元素)的屬性節(jié)點(diǎn) 參考: HTML DOM 方法
Undefined, Null, Boolean, Number, String Object是復(fù)雜數(shù)據(jù)類型, 其本質(zhì)是由一組無序的名值對(duì)組成的.
基本類型如上題所示. 引用類型則有: Object, Array, Date, RegExp, Function 存儲(chǔ) 基本類型值在內(nèi)存中占據(jù)固定大小的空間,因此被保存在棧內(nèi)存中 引用類型的值是對(duì)象, 保存在堆內(nèi)存中. 包含引用類型的變量實(shí)際上包含的并不是對(duì)象本身, 而是一個(gè)指向改對(duì)象的指針 復(fù)制 從一個(gè)變量向另一個(gè)變量復(fù)制基本類型的值, 會(huì)創(chuàng)建這個(gè)值的一個(gè)副本 從一個(gè)變量向另一個(gè)變量復(fù)制引用類型的值, 復(fù)制的其實(shí)是指針, 因此兩個(gè)變量最終都指向同一個(gè)對(duì)象 檢測(cè)類型 確定一個(gè)值是哪種基本類型可以用typeof操作符, 而確定一個(gè)值是哪種引用類型可以使用instanceof操作符
js是一門具有自動(dòng)垃圾回收機(jī)制的編程語(yǔ)言,開發(fā)人員不必關(guān)心內(nèi)存分配和回收問題 離開作用域的值將被自動(dòng)標(biāo)記為可以回收, 因此將在垃圾收集期間被刪除 "標(biāo)記清除"是目前主流的垃圾收集算法, 這種算法的思路是給當(dāng)前不使用的值加上標(biāo)記, 然后再回收其內(nèi)存 另一種垃圾收集算法是"引用計(jì)數(shù)", 這種算法的思想是跟蹤記錄所有值被引用的次數(shù). js引擎目前都不再使用這種算法, 但在IE中訪問非原生JS對(duì)象(如DOM元素)時(shí), 這種算法仍然可能會(huì)導(dǎo)致問題 當(dāng)代碼中存在循環(huán)引用現(xiàn)象時(shí), "引用計(jì)數(shù)" 算法就會(huì)導(dǎo)致問題 解除變量的引用不僅有助于消除循環(huán)引用現(xiàn)象, 而且對(duì)垃圾收集也有好處. 為了確保有效地回收內(nèi)存, 應(yīng)該及時(shí)解除不再使用的全局對(duì)象, 全局對(duì)象屬性以及循環(huán)引用變量的引用
try-catch 和with延長(zhǎng)作用域. 因?yàn)樗麄兌紩?huì)創(chuàng)建一個(gè)新的變量對(duì)象. 這兩個(gè)語(yǔ)句都會(huì)在作用域鏈的前端添加一個(gè)變量對(duì)象. 對(duì)with語(yǔ)句來說, 會(huì)將指定的對(duì)象添加到作用域鏈中. 對(duì)catch語(yǔ)句來說, 會(huì)創(chuàng)建一個(gè)新的變量對(duì)象, 其中包含的是被拋出的錯(cuò)誤對(duì)象的聲明. 當(dāng)try代碼塊中發(fā)生錯(cuò)誤時(shí),執(zhí)行過程會(huì)跳轉(zhuǎn)到catch語(yǔ)句,然后把異常對(duì)象推入一個(gè)可變對(duì)象并置于作用域的頭部。在catch代碼塊內(nèi)部,函數(shù)的所有局部變量將會(huì)被放在第二個(gè)作用域鏈對(duì)象中。請(qǐng)注意,一旦catch語(yǔ)句執(zhí)行完畢,作用域鏈機(jī)會(huì)返回到之前的狀態(tài)。try-catch語(yǔ)句在代碼調(diào)試和異常處理中非常有用,因此不建議完全避免。你可以通過優(yōu)化代碼來減少catch語(yǔ)句對(duì)性能的影響。一個(gè)很好的模式是將錯(cuò)誤委托給一個(gè)函數(shù)處理 with(object) {statement}。它的意思是把object添加到作用域鏈的頂端 //代碼片段 function buildUrl(){ var qs = "?debug=true"; //with接收l(shuí)ocation對(duì)象, 因此其變量對(duì)象中就包含了location對(duì)象的所有屬性和方法, 而這個(gè)變量對(duì)象被添加到了作用域鏈的前端 with(location){ //這里的href其實(shí)是location.href. 創(chuàng)建了一個(gè)名為url的變量, 就成了函數(shù)執(zhí)行環(huán)境的一部分 var url = href + qs; } return url; } 參考: js try、catch、finally語(yǔ)句還有with語(yǔ)句 JavaScript 開發(fā)進(jìn)階:理解 JavaScript 作用域和作用域鏈
方法調(diào)用模型 var obj = { func : function(){};} obj.func() 函數(shù)調(diào)用模式 var func = function(){} func(); 構(gòu)造器調(diào)用模式 apply/ call調(diào)用模式
捕獲->處于目標(biāo)->冒泡,IE應(yīng)該是只有冒泡沒有捕獲。 事件代理就是在父元素上綁定事件來處理,通過event對(duì)象的target來定位。
用定時(shí)器 setTimeout和setInterval
js動(dòng)畫: 使用定時(shí)器 setTimeout和setInterval CSS : transition , animation transition 包含4種屬性:transition-delaytransition-durationtransition-propertytransition-timing-function,對(duì)應(yīng)動(dòng)畫的4種屬性: 延遲、持續(xù)時(shí)間、對(duì)應(yīng)css屬性和緩動(dòng)函數(shù), transform 包含7種屬性:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-directionanimation-iteration-countanimation-fill-modeanimation-play-state,它們可以定義動(dòng)畫名稱,持續(xù)時(shí)間,緩動(dòng)函數(shù),動(dòng)畫延遲,動(dòng)畫方向,重復(fù)次數(shù),填充模式。 HTML5 動(dòng)畫 canvas svg webgl 參考:前端動(dòng)畫效果實(shí)現(xiàn)的簡(jiǎn)單比較
封裝, 繼承, 多態(tài)
hasOwnPrototype
1) 箭頭操作符 inputs=>outputs: 操作符左邊是輸入的參數(shù),而右邊則是進(jìn)行的操作以及返回的值 2) 支持類, 引入了class關(guān)鍵字. ES6提供的類實(shí)際上就是JS原型模式的包裝 3) 增強(qiáng)的對(duì)象字面量.
4) 字符串模板: ES6中允許使用反引號(hào) ` 來創(chuàng)建字符串,此種方法創(chuàng)建的字符串里面可以包含由美元符號(hào)加花括號(hào)包裹的變量${vraible}。 5) 自動(dòng)解析數(shù)組或?qū)ο笾械闹?。比如若一個(gè)函數(shù)要返回多個(gè)值,常規(guī)的做法是返回一個(gè)對(duì)象,將每個(gè)值做為這個(gè)對(duì)象的屬性返回。但在ES6中,利用解構(gòu)這一特性,可以直接返回一個(gè)數(shù)組,然后數(shù)組中的值會(huì)自動(dòng)被解析到對(duì)應(yīng)接收該值的變量中。 6) 默認(rèn)參數(shù)值: 現(xiàn)在可以在定義函數(shù)的時(shí)候指定參數(shù)的默認(rèn)值了,而不用像以前那樣通過邏輯或操作符來達(dá)到目的了。 7) 不定參數(shù)是在函數(shù)中使用命名參數(shù)同時(shí)接收不定數(shù)量的未命名參數(shù)。在以前的JavaScript代碼中我們可以通過arguments變量來達(dá)到這一目的。不定參數(shù)的格式是三個(gè)句點(diǎn)后跟代表所有不定參數(shù)的變量名。比如下面這個(gè)例子中,…x代表了所有傳入add函數(shù)的參數(shù)。 8) 拓展參數(shù)則是另一種形式的語(yǔ)法糖,它允許傳遞數(shù)組或者類數(shù)組直接做為函數(shù)的參數(shù)而不用通過apply。 9) let和const關(guān)鍵字: 可以把let看成var,只是它定義的變量被限定在了特定范圍內(nèi)才能使用,而離開這個(gè)范圍則無效。const則很直觀,用來定義常量,即無法被更改值的變量。 10) for of值遍歷 每次循環(huán)它提供的不是序號(hào)而是值。 11) iterator, generator 12) 模塊 13) Map, Set, WeakMap, WeakSet 14) Proxy可以監(jiān)聽對(duì)象身上發(fā)生了什么事情,并在這些事情發(fā)生后執(zhí)行一些相應(yīng)的操作。一下子讓我們對(duì)一個(gè)對(duì)象有了很強(qiáng)的追蹤能力,同時(shí)在數(shù)據(jù)綁定方面也很有用處。 15) Symbols Symbol 通過調(diào)用symbol函數(shù)產(chǎn)生,它接收一個(gè)可選的名字參數(shù),該函數(shù)返回的symbol是唯一的。之后就可以用這個(gè)返回值做為對(duì)象的鍵了。Symbol還可以用來創(chuàng)建私有屬性,外部無法直接訪問由symbol做為鍵的屬性值。 16) Math, Number, String, Object的新API 17) Promises是處理異步操作的一種模式 參考:ES6新特性概覽
獲取節(jié)點(diǎn): getElementById() getElementsByTagName() 節(jié)點(diǎn)遍歷:先序遍歷DOM樹的5種方法
可以自定義一個(gè)函數(shù) //代碼片段 .border-radius(@values) { -webkit-border-radius: @values; -moz-border-radius: @values; border-radius: @values; } div { .border-radius(10px); }
參考:JavaScript異步編程的Promise模式
使用jQuery圖片預(yù)加載插件Lazy Load 1.加載jQuery, 與jquery.lazyload.js 2.設(shè)置圖片的占位符為data-original, 給圖片一個(gè)特別的標(biāo)簽,比如class=".lazy" 3.然后延遲加載: $('img.lazy').lazyload();這個(gè)函數(shù)可以選擇一些參數(shù): 3.1.圖片預(yù)先加載距離:threshold,通過設(shè)置這個(gè)值,在圖片未出現(xiàn)在可視區(qū)域的頂部距離這個(gè)值時(shí)加載。 3.2.事件綁定加載的方式:event 3.3.圖片限定在某個(gè)容器內(nèi):container 使用js實(shí)現(xiàn)圖片加載: 就是new一個(gè)圖片對(duì)象, 綁定onload函數(shù), 賦值url 用CSS實(shí)現(xiàn)圖片的預(yù)加載 寫一個(gè)CSS樣式設(shè)置一批背景圖片,然后將其隱藏 改進(jìn): 使用js來推遲預(yù)加載時(shí)間, 防止與頁(yè)面其他內(nèi)容一起加載 用Ajax實(shí)現(xiàn)預(yù)加載 其實(shí)就是通過ajax請(qǐng)求請(qǐng)求圖片地址. 還可以用這種方式加載css,js文件等
我在回答這個(gè)題的時(shí)候說是兩個(gè)事件, 先執(zhí)行捕獲的后執(zhí)行冒泡的. 其實(shí)是不對(duì)的. 綁定在目標(biāo)元素上的事件是按照綁定的順序執(zhí)行的!!!! 即: 綁定在被點(diǎn)擊元素的事件是按照代碼順序發(fā)生,其他元素通過冒泡或者捕獲“感知”的事件,按照W3C的標(biāo)準(zhǔn),先發(fā)生捕獲事件,后發(fā)生冒泡事件。所有事件的順序是:其他元素捕獲階段事件 -> 本元素代碼順序事件 -> 其他元素冒泡階段事件 。 參考: JavaScript-父子dom同時(shí)綁定兩個(gè)點(diǎn)擊事件,一個(gè)用捕獲,一個(gè)用冒泡時(shí)執(zhí)行順序
使用匿名函數(shù), (立即執(zhí)行函數(shù)) (function(){...})() 使用es6 塊級(jí)作用域引入了兩種新的聲明形式,可以用它們定義一個(gè)只存在于某個(gè)語(yǔ)句塊中的變量或常量.這兩種新的聲明關(guān)鍵字為: let: 語(yǔ)法上非常類似于var, 但定義的變量只存在于當(dāng)前的語(yǔ)句塊中 const: 和let類似,但聲明的是一個(gè)只讀的常量 使用let代替var可以更容易的定義一個(gè)只在某個(gè)語(yǔ)句塊中存在的局部變量,而不用擔(dān)心它和函數(shù)體中其他部分的同名變量有沖突.在let語(yǔ)句內(nèi)部用var聲明的變量和在let語(yǔ)句外部用var聲明的變量沒什么差別,它們都擁有函數(shù)作用域,而不是塊級(jí)作用域.
因?yàn)閖s中數(shù)據(jù)類型分為基本數(shù)據(jù)類型(number, string, boolean, null, undefined)和引用類型值(對(duì)象, 數(shù)組, 函數(shù)). 這兩類對(duì)象在復(fù)制克隆的時(shí)候是有很大區(qū)別的. 原始類型存儲(chǔ)的是對(duì)象的實(shí)際數(shù)據(jù), 而對(duì)象類型存儲(chǔ)的是對(duì)象的引用地址(對(duì)象的實(shí)際內(nèi)容單獨(dú)存放, 為了減少數(shù)據(jù)開銷通常放在內(nèi)存中). 此外, 對(duì)象的原型也是引用對(duì)象, 它把原型的屬性和方法放在內(nèi)存中, 通過原型鏈的方式來指向這個(gè)內(nèi)存地址. 于是克隆也會(huì)分為兩類: 淺度克隆: 原始類型為值傳遞, 對(duì)象類型仍為引用傳遞 深度克隆: 所有元素或?qū)傩跃耆珡?fù)制, 與原對(duì)象完全脫離, 也就是說所有對(duì)于新對(duì)象的修改都不會(huì)反映到原對(duì)象中 深度克隆實(shí)現(xiàn): //代碼片段 function clone(obj){ if(typeof(obj)== 'object'){ var result = obj instanceof Array ? [] : {}; for(var i in obj){ var attr = obj[i]; result[i] = arguments.callee(attr); } return result; } else { return obj; } }; 參考: JavaScript深克隆 javascript中對(duì)象的深度克隆 |
|