摘要:路徑由零或多個(gè)符號(hào)隔開(kāi)的字符串,一般用來(lái)表示主機(jī)上的一個(gè)目錄或文件地址。
JS高級(jí)與進(jìn)階
目錄======================
基礎(chǔ) 2
Web API 45
面向?qū)ο缶幊? 170
案例:貪吃蛇 179
繼承 179
函數(shù)進(jìn)階 223
正則表達(dá)式 284
目錄======================
1.基礎(chǔ)
1.1.變量聲明 1.1.1 關(guān)鍵字var 儲(chǔ)存數(shù)據(jù)的內(nèi)存空間 1.2.數(shù)據(jù)類型 1.2.1 基本數(shù)據(jù)類型 ; number string boolean null undefined 1.2.2 復(fù)雜數(shù)據(jù)類型 object function 1.3.類型檢測(cè) 1.3.1 typeof 檢測(cè)基本數(shù)據(jù)類型 (語(yǔ)法:typeof 變量||字面量) 數(shù)字類型返回 "number" 字符串返回"string" boolean返回"boolean" 復(fù)雜數(shù)據(jù)類型統(tǒng)一返回object 特殊 null返回object function返回function 1.3.2 instancof 判斷對(duì)象的實(shí)例 語(yǔ)法:實(shí)例對(duì)象 instancof 構(gòu)造函數(shù) 返回值 true || false 1.3.3 constructor 返回對(duì)象的構(gòu)造函數(shù) 語(yǔ)法:obj.constructor 返回構(gòu)造函數(shù)名 1.3.4 Object.prototype.toString.call(); 字符串返回:"[object String]" 數(shù)字返回:"[object Number]" null返回:"[object Null]" undefined返回:"[object Undefined]" object返回:"[object Object]" boolean返回:"[object Boolean]" 數(shù)組返回:"[object Array]" 1.4 類型轉(zhuǎn)換 1.4.1 轉(zhuǎn)換成number 方法:Number()、parseInt() 、parseFloat() 通過(guò)運(yùn)算符轉(zhuǎn)換 轉(zhuǎn)換不成功返回NAN 1.4.2 轉(zhuǎn)換成:string 方法:.toString()、String、通過(guò)字符串拼接 + 1.4.3 boolean Boolean() 、!!取反 值得注意的是 :0 "" null undefined NaN //會(huì)轉(zhuǎn)換成false 其它都會(huì)轉(zhuǎn)換成true 1.5 操作符 1.5.1 算術(shù)運(yùn)算符 +-/* 1.5.2 一元運(yùn)算符 ++ -- ! 1.5.3 賦值運(yùn)算符 = += -+ /+ *+ 1.5.4 邏輯運(yùn)算符 && || 1.5.5 關(guān)系運(yùn)算符 > < >= <= 1.5.6 相等運(yùn)算== != !== === 1.5.7 優(yōu)先級(jí) () > 一元> 算術(shù) > 關(guān)系 > 邏輯(先&&后||) > 賦值 不同類型直接操作符號(hào)隱式轉(zhuǎn)換 轉(zhuǎn)換規(guī)則: 有數(shù)字或者boolean 轉(zhuǎn)數(shù)字比較 (++ -- 運(yùn)算符相當(dāng)于加一 減一所以是轉(zhuǎn)成數(shù)字) 沒(méi)有數(shù)字和bool 有字符串 轉(zhuǎn)換成字符串 復(fù)雜數(shù)據(jù)類型比較地址 其中值得注意是 等等 和 全等的比較轉(zhuǎn)換 x y = = = = = 0 false true false "" false true false "" 0 true false "0" 0 true false "17" 17 true false null undefined true false null 0 false false null false false false undefined false false false 0 NaN false false "foo" NaN false false NaN NaN false false 1. null == undefined 返回的是true 2. null 和undefined 和其他類型判斷相等的時(shí)候,不轉(zhuǎn)換類型 3. 一般只要有NaN參與的運(yùn)算,返回都是NaN NaN轉(zhuǎn)換成boolean 是false . NaN != NaN 返回的是true; 1.6 流程控制語(yǔ)句 1.6.1 分支結(jié)構(gòu) 1:if(){...}else {..} 2.switch (){ case value: break; default: break; } 1.6.2 三元運(yùn)算 語(yǔ)法: 條件? 表達(dá)式1 :表達(dá)式2 1.6.3 循環(huán)語(yǔ)句 for(var i=0;i<10;i++){ 循環(huán)體 } for(var key in obj){} while(條件){循環(huán)體 } do{ 循環(huán)體 }while ( 條件); //至少執(zhí)行一次 1.7 數(shù)組 1.7.1 創(chuàng)建數(shù)組 1、字面量var arr = []; 2、構(gòu)造函數(shù) var arr = new Array(); 1.7.2.數(shù)組操作 通過(guò)下標(biāo) 增刪改 1.8 函數(shù) 1.8.1 函數(shù)三要素 函數(shù)名 參數(shù) 返回值 1.8.2.聲明 1.字面量 var fn = function(a,b,c){return} 2.函數(shù)聲明 function fn(){} 3.函數(shù)調(diào)用 函數(shù)名() arguments對(duì)象 每個(gè)函數(shù)內(nèi)部都有一個(gè)arguments對(duì)象與形參對(duì)象 成映射關(guān)系 1.9.對(duì)象 1.9.1.概念:一類事物的抽象,在編程語(yǔ)言中理解成無(wú)序的屬性和方法的結(jié)合 創(chuàng)建對(duì)象 1.字面量 var obj = {}; 2.內(nèi)置構(gòu)造函數(shù) var obj = new Object(); 3.工廠模式 語(yǔ)法:function createP(name, age) { var o = new Object(); o.name = name; o.age = age; o.sayUrl= function() { alert(this.age); } return o; } var obj = createP("OTT","18"); 4.自定義構(gòu)造函數(shù) 語(yǔ)法:function P(name ,age){ this.name = name; this.age = age; } 行內(nèi)約定:一般來(lái)說(shuō)構(gòu)造函數(shù)首字母大寫(xiě) 1.9.2 屬性操作 1.通過(guò) 點(diǎn)語(yǔ)法 中括號(hào)語(yǔ)法操作 obj.name 或者 obj["name"] 2.delete obj.key 刪除對(duì)象屬性 1.10.內(nèi)置對(duì)象 1.10.1 Array 數(shù)組的方法 array.push(value);//將一個(gè)或多個(gè)元素添加到數(shù)組的結(jié)尾,返回length array.pop();//從數(shù)組中刪除最后一個(gè)元素 改變了數(shù)組的長(zhǎng)度 返回被刪除的元素 array.unshift(value);//將一個(gè)或多個(gè)元素添加到數(shù)組的開(kāi)頭 返回length array.shift();//從數(shù)組中刪除第一個(gè)元素,改變了數(shù)組的長(zhǎng)度 返回被刪除的元素 array.reverse();//翻轉(zhuǎn)數(shù)組,返回翻轉(zhuǎn)過(guò)的數(shù)組 原數(shù)組不變 array.sort();//默認(rèn)排序順序是根據(jù)字符串Unicode碼點(diǎn) 可以傳函數(shù).sort(function (a,b){return });返回值<=0 位置不變 返回值大于0 交換位置 原數(shù)組發(fā)生改變 concat:數(shù)組合并,不會(huì)影響原來(lái)的數(shù)組,會(huì)返回一個(gè)新數(shù)組 join(str);以str將數(shù)組連接成字符串 slice(begin, end):復(fù)制數(shù)組的一部分到一個(gè)新數(shù)組,并返回這個(gè)新數(shù)組 splice(begin,num,val); 在begin位置刪除num個(gè)元素 并將val填補(bǔ)到該位置 返回被踢除的元素 原數(shù)組發(fā)生改變 forEach(function(ele,i){ });遍歷數(shù)組的每一項(xiàng) 無(wú)返回值 map(function(ele,i){ });為數(shù)組的每項(xiàng)執(zhí)行回調(diào)函數(shù)并將返回值存到數(shù)組 返回這個(gè)數(shù)組 原數(shù)組不變 (注意不會(huì)忽略數(shù)組的 空項(xiàng)(值為null undefined...) 實(shí)際上數(shù)組的內(nèi)置對(duì)象都不會(huì)忽略空項(xiàng)目) filter(functiong( ele ,i){});為數(shù)組的每項(xiàng)執(zhí)行回調(diào)函數(shù)并將返回值為true的項(xiàng)目 存到數(shù)組 返回這個(gè)數(shù)組 原數(shù)組不變 reduce(functin(a,b){ return a;},a);為數(shù)組的每項(xiàng)執(zhí)行回調(diào)函數(shù) 并將a帶入到下次循環(huán) 最后返回a 如果不傳參數(shù)那么默認(rèn)是前一項(xiàng) 原數(shù)組不變 1.10.2 String 對(duì)象 charAt("要查詢的字符") //獲取指定位置處字符 charCodeAt(index) //獲取指定位置處字符的ASCII碼 indexOf:獲取某個(gè)字符第一次出現(xiàn)的位置,如果沒(méi)有,返回-1 lastIndexOf:從后面開(kāi)始查找第一次出現(xiàn)的位置。如果沒(méi)有,返回-1 trim();//去除字符串兩邊的空格,內(nèi)部空格不會(huì)去除 toUpperCase()//全部轉(zhuǎn)換成大寫(xiě)字母 toLowerCase()//全部轉(zhuǎn)換成小寫(xiě)字母 concat字符串拼接返回新的字符串 一般都用 + 號(hào) slice(start,end)包含頭不包含尾返回一個(gè)新的字符串,end為負(fù)值從后往前 原字符串不變 substring(start,end)包含頭,不包含尾 返回一個(gè)新的字符串 原字符串不變 substr(從start開(kāi)始,截取length個(gè)字符)(推薦) split:將字符串分割成數(shù)組,原字符串不改變(很常用) replace(searchValue, replaceValue)//參數(shù):searchValue:需要替換的值 ? replaceValue:用來(lái)替換的值 1.10.3 Data 日期對(duì)象 創(chuàng)建:var d = new Data();或者 Data.now(); d.getTime() // 返回毫秒數(shù)和valueOf()結(jié)果一樣,valueOf()內(nèi)部調(diào)用的getTime() d.getMilliseconds() getSeconds() // 返回0-59 getMinutes() // 返回0-59 getHours() // 返回0-23 getDay() // 返回星期幾 0周日 6周6 getDate() // 返回當(dāng)前月的第幾天 getMonth() // 返回月份,***從0開(kāi)始*** getFullYear() //返回4位的年份 如 2016 1.10.4 Math 算術(shù)對(duì)象 Math.PI // 圓周率 Math.random()// 生成隨機(jī)數(shù) Math.floor()/Math.ceil()// 向下取整/向上取整 Math.round()// 取整,四舍五入 Math.abs() // 絕對(duì)值 Math.max()/Math.min()// 求最大和最小值 Math.sin()/Math.cos() // 正弦/余弦 Math.power()/Math.sqrt() // 求指數(shù)次冪/求平方根 內(nèi)置對(duì)象中Math是對(duì)象 而其他的是構(gòu)造函數(shù) 需要用new構(gòu)建 1.11 值類型與引用類型 1.值類型:簡(jiǎn)單類型,變量在存儲(chǔ)的時(shí)候,存儲(chǔ)的是值本身 2.引用類型:復(fù)雜類型,變量在存儲(chǔ)的時(shí)候,存儲(chǔ)的是對(duì)象的地址
2 Web API
2.1 概念 1.Application Programming Interface,應(yīng)用程序編程接口 2.web api 是瀏覽器提供的一套操作瀏覽器功能和頁(yè)面元素的API(BOM和DOM) 2.2 DOM 1.DOM的概念 Document Object Model 文檔對(duì)象模型 是W3C組織推薦的處理可擴(kuò)展標(biāo)記語(yǔ)言的標(biāo)準(zhǔn)編程接口??梢詣?dòng)態(tài)地訪問(wèn)程序和腳本,對(duì)web文檔進(jìn)行增刪改查 。DOM是一種基于樹(shù)的API文檔,它要求在處理過(guò)程中整個(gè)文檔都表示在存儲(chǔ)器中 2.DOM操作 獲取頁(yè)面元素 id選擇器document.getElementById("id") 通過(guò)id獲取頁(yè)面元素 返回一個(gè)dom對(duì)象 class選擇器 document.getElementsByClassName(""類名) 通過(guò)類名獲取頁(yè)面元素 返回一個(gè)偽數(shù)組 無(wú)論的多個(gè)元素還是一個(gè)元素 標(biāo)簽選擇器 document.getElementsByTageName(“標(biāo)簽名”) 通過(guò)標(biāo)簽名獲取元素 返回一個(gè)偽數(shù)組 無(wú)論獲取是多個(gè)還是一個(gè)元素 name屬性選擇器 document.getElementsByName("name名"); 通過(guò)表單元素的name屬性獲取元素 永遠(yuǎn)返回一個(gè)偽數(shù)組 css選擇器 document.querySelector("同css選擇器寫(xiě)法") 返回dom元素 document.querySelectorAll() 返回偽數(shù)組 2.注冊(cè)事件 1.事件三要素 事件源、事件名、處理方法 2.注冊(cè)事件的方式 元素.onclick = function(){} //重復(fù)注冊(cè)事件后面覆蓋前面的 元素.addEventListener("click",function(){ },boolean)//參數(shù):事件名 回調(diào)函數(shù) 是否事件冒泡 重復(fù)注冊(cè)事件不會(huì)覆蓋 第三個(gè)參數(shù)默認(rèn) false即冒泡傳遞 當(dāng)值為true時(shí),事件使用捕獲傳遞 注意:IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 3.attachEvent(""元素"",function(){},boolean) IE8版本之前的方法 事件不會(huì)覆蓋 3.移除事件 1.元素.onclick = null; 利用null覆蓋掉前面的注冊(cè)事件 2..removeEventListener("事件名", 函數(shù)名, false); 想要移除事件 那么在之前注冊(cè)時(shí)必須有函數(shù)名 注意:IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 3.detachEvent("onclick", 函數(shù)名) 早期IE方法 4.兼容性封裝 1.注冊(cè)事件 function addEventListener(element, type, fn) { if (element.addEventListener) { element.addEventListener(type, fn, false); } else if (element.attachEvent){ element.attachEvent("on" + type,fn); } else { element["on"+type] = fn; } }; 2.注冊(cè)事件 function removeEventListener(element, type, fn) { if (element.removeEventListener) { element.removeEventListener(type, fn, false); } else if (element.detachEvent) { element.detachEvent("on" + type, fn); } else { element["on"+type] = null; } } 5.屬性操作 1.非表單元素的屬性 href、title、id、src、className、innerHTML和innerText 2.表單元素的屬性 value 用于大部分表單元素的內(nèi)容獲取(option除外innerText) type 可以獲取input標(biāo)簽的類型(輸入框或復(fù)選框等) disabled 禁用屬性(ture||false) checked 復(fù)選框選中屬性(ture||false) selected 下拉菜單選中屬性(ture||false) 3.自定義屬性操作 getAttribute() 獲取標(biāo)簽行內(nèi)屬性 setAttribute() 設(shè)置標(biāo)簽行內(nèi)屬性 removeAttribute() 移除標(biāo)簽行內(nèi)屬性 與element.屬性的區(qū)別: 此法獲取不到行內(nèi)添加的自定義屬性 element.屬性 是在獲取的元素對(duì)象上直接添加獲取屬性刪除用 dellete element.property 4.樣式屬性操作 1.使用style方式設(shè)置的樣式 通過(guò)此方法設(shè)置的樣式屬性是行內(nèi)樣式 設(shè)置寬高等需要帶上“px” //ES5新增方法 document.getComputedStyle(元素,null) 獲取計(jì)算過(guò)的屬性 5.類名操作 1.element.className =“” 設(shè)置獲取元素的class屬性 通過(guò)此方法設(shè)置類名會(huì)覆蓋原有類名 element.removeClass() 2.//ES5新增方法 element.classList 通過(guò)此法設(shè)置不會(huì)覆蓋直接追擊 ele.classList.add();添加 .classList.remove();刪除 .classlist.toggle();切換類名 6.創(chuàng)建元素 1.document.write 2.element.innerHTML = """";性能較差,一般先進(jìn)行字符串拼接才添加到頁(yè)面避免頻繁操作 3.document.createElement("標(biāo)簽名"); 7.節(jié)點(diǎn)操作 1.添加刪除克隆 節(jié)點(diǎn)方法 A.appendChild(B)將B元素添加到A元素中 同時(shí)將B元素從原來(lái)的位置刪除 A.insertBefore(B) 將B元素添加到A元素的起始位置 A.removeChild(B) 將B元從A元素中移除 A.replaceChild(B) 替換掉A元素下面的元素 A.cloneNode()參數(shù)boolean類型 表示深度復(fù)制 返回 一個(gè)克隆出來(lái)的來(lái)元素 克隆出來(lái)的元素跟原來(lái)是元素不關(guān)聯(lián) 結(jié)appendChild使用 2.選擇節(jié)點(diǎn) parentNode 父元節(jié)點(diǎn) childNodes 子節(jié)點(diǎn) children 子元素 nextSibling/previousSibling 上/下一個(gè)兄弟節(jié)點(diǎn) nextElementsibling/previousElementSibling 上/下一個(gè)兄弟元素 firstChild/lastChild 第一/最后 一個(gè)子元素 8.事件對(duì)象 1.onclick = function (e){e. } 2.事件對(duì)象兼容性處理 e= e || window.event; 3.常用事件對(duì)象屬性 1. type 獲取事件類型 2. event.screenX/e.screenY 相對(duì)屏幕左上角的位置 3. clientX/clientY 相對(duì)瀏覽器窗口位置 所有瀏覽器都支持 4. pageX/pageY IE8以前不支持,頁(yè)面位置window.pageX 5. event.target || event.srcElement 用于獲取觸發(fā)事件的元素 6. event.preventDefault() 取消默認(rèn)行為 7. eventPhase屬性可以查看事件觸發(fā)時(shí)所處的階段 8. event.stopPropagation();阻止冒泡 IE低版本 event.cancelBubble = true; 標(biāo)準(zhǔn)中已廢棄 4.事件的三個(gè)階段 1. 事件的捕獲階段 2. 事件的目標(biāo)階段(觸發(fā)自己的事件) 3. 事件的冒泡階段 9.事件委托 1.概念:事件委托 給父元素注冊(cè)事件 通過(guò)e.target || e.srcElement 獲取觸發(fā)事件的元素 2.3 BOM 2.3.1 概念 BOM(Browser Object Model) 是指瀏覽器對(duì)象模型,瀏覽器對(duì)象模型提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動(dòng)的對(duì)象結(jié)構(gòu)。BOM由多個(gè)對(duì)象組成,其中代表瀏覽器窗口的Window對(duì)象是BOM的頂層對(duì)象,其他對(duì)象都是該對(duì)象的子對(duì)象 2.3.2 常用的方法 alert()提示彈窗 prompt()彈出輸入框 confirm()彈出選擇框 onload 頁(yè)面加載事件 setTimeout()和clearTimeout() 定時(shí)器 2.3.3 window.location對(duì)象 常用方法 1.location.href = "";設(shè)置||獲取地址瀏覽 (常用作js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)) 2.location.search 地址欄參數(shù)獲取 3.location.reload(); 刷新頁(yè)面 參數(shù) (true/false)是否強(qiáng)制刷新 4.url組成 scheme://host:port/path?query#fragment scheme:通信協(xié)議 常用的http,ftp,maito等 host:主機(jī) 服務(wù)器(計(jì)算機(jī))域名系統(tǒng) (DNS) 主機(jī)名或 IP 地址。 port:端口號(hào) 整數(shù),可選,省略時(shí)使用方案的默認(rèn)端口,如http的默認(rèn)端口為80。 path:路徑 由零或多個(gè)"/"符號(hào)隔開(kāi)的字符串,一般用來(lái)表示主機(jī)上的一個(gè)目錄或文件地址。 query:查詢 可選,用于給動(dòng)態(tài)網(wǎng)頁(yè)傳遞參數(shù),可有多個(gè)參數(shù),用"&"符號(hào)隔開(kāi),每個(gè)參數(shù)的名和值用"="符號(hào)隔開(kāi)。例如:name=zs fragment:信息片斷 字符串,錨點(diǎn). 2.3.4.history對(duì)象 常用方法 history.back();返回 跟后退按鈕等效 history.forward();前進(jìn) history.go(1);參數(shù) 1前進(jìn) -1后退 0當(dāng)前頁(yè)面 2.3.5.navigator對(duì)象 常用方法 userAgent 可以判斷用戶瀏覽器的類型 platform 可以判斷瀏覽器所在的系統(tǒng)平臺(tái)類型. 2.3.6.screen對(duì)象 screen.width 屏幕寬度 screen.height 屏幕高度 screen.availWidth 瀏覽器可用寬度 screen.availHeight 瀏覽可用高度 2.3.7.offset家族 ele.offsetWidth 獲取元素寬度height + paddnig + border ele.offsetHeight 獲取元素高度 (注意:不帶單位 只能獲取 不能設(shè)置)設(shè)置通過(guò)style.Width ele.offsetParent 返回最近的具有非靜態(tài)定位的父元素 ele.offsetLeft 獲取相對(duì)父元素的真實(shí)left值 left + margin ele.offsetTop 獲取相對(duì)父元素的真實(shí)top值 top + margin 2.3.8.scroll家族 ele.scrollHeight 獲取自身內(nèi)容的高度 可能超出盒子大小 ele.scrollWidth ele.scrollLeft 水平滾動(dòng)條 滾動(dòng)的距離 ele.scrollTop 垂直滾動(dòng)條 滾動(dòng)的距離 最常用的是用來(lái)獲取頁(yè)面被卷去的寬度和高度 獲取頁(yè)面滾動(dòng)距離的兼容性處理 function scroll() { return { top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0 }; } 2.3.9.client家族 1.用于獲取元素可視區(qū)的大小 ele.clientHeight/.clientWidth 盒子可視區(qū)域的大小 clientleftclienttop 獲取border寬度 如果內(nèi)容沒(méi)有滾動(dòng)條clientWidth與scrollWidth相同 2.獲取頁(yè)面可視區(qū)的大小 window.innerWidth window.innerHeight //IE678 document.documentElement.clientWidth 3.頁(yè)面可視區(qū)大小兼容性封裝 function client() { return { width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0, height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0 }; }
3.面向?qū)ο缶幊?/p>
3.1.基本概念 3.1.1.什么是對(duì)象? 我們常說(shuō)萬(wàn)物皆對(duì)象,很籠統(tǒng),在計(jì)算機(jī)中最早在c語(yǔ)言中把具有特定長(zhǎng)度的類型,稱作為對(duì)象類型;后來(lái)我們說(shuō)內(nèi)存中的一塊有效區(qū)域叫對(duì)象; 我把對(duì)象理解成具有某些屬性和方法的變量 而創(chuàng)造出這些變量的抽象叫做類 3.1.2.什么是面向?qū)ο螅? 面向?qū)ο笫且环N思想,通過(guò)調(diào)用對(duì)象的某種方法和屬性來(lái)完成某件事情,當(dāng)然這個(gè)對(duì)象是我們創(chuàng)造出來(lái)的,我們把可能在多個(gè)地方會(huì)使用的到的功能賦給對(duì)象,在調(diào)用 3.1.3.特性 1.封裝性 只需要關(guān)注對(duì)象提供的方法如何使用,而不需要關(guān)心對(duì)象對(duì)象的內(nèi)部具體實(shí)現(xiàn) 2.繼承 一個(gè)對(duì)象沒(méi)有的一些屬性和方法,另外一個(gè)對(duì)象有,拿過(guò)來(lái)用,就實(shí)現(xiàn)了繼承 3.多態(tài) 指在一棵繼承樹(shù)中的類中可以有多個(gè)同名但不同方法體以及不同形參的方法。多態(tài)有兩種情況:覆蓋和重載 3.2.創(chuàng)建的方式 3.2.1.內(nèi)置構(gòu)造函數(shù)Object var obj = new Object(); 3.2.2.對(duì)象字面量 var obj = {}; 3.2.3.工廠函數(shù) 本質(zhì)上就是函數(shù)內(nèi) 返回對(duì)象 function p (x,y){ retrun {name : x,age : y} } 3.2.4.自定義構(gòu)造函數(shù) 行內(nèi)通約:首字母大寫(xiě) 構(gòu)造函數(shù)一定要使用new關(guān)鍵字 1.new 的作用 在內(nèi)存中開(kāi)辟空間(對(duì)象obj) 調(diào)用構(gòu)造函數(shù) 讓構(gòu)造函數(shù)的this指向新的對(duì)象 本質(zhì)上就是在構(gòu)造函數(shù)中var this = obj; 返回 this 3.3.原型 3.3.1.原型基本概念prototype 1.prototype是一個(gè)對(duì)象 2.所有函數(shù)自帶prototyoe屬性 3.作用:存儲(chǔ)公共方法 3.3.2.構(gòu)造函數(shù)、原型、實(shí)例的關(guān)系 1.實(shí)例化對(duì)象能夠訪直接問(wèn)構(gòu)造函數(shù)的prototype 2.構(gòu)造函數(shù)的.prototype == 實(shí)例的.__proto__ 原型的constructor 指向構(gòu)造函數(shù) 3.3.3.__proto__屬性 原型連 1.所有對(duì)象都有 __proto__ 指向構(gòu)造函數(shù)的prototype 2.構(gòu)造函數(shù)的.prototype == 實(shí)例的.__proto__ 例Array.prototype == [].__proto__ 3.3.4.屬性查找原則 1先在自身尋找 當(dāng)實(shí)力具有某個(gè)屬性時(shí)自動(dòng)屏蔽原型對(duì)應(yīng)屬性 哪怕屬性值為null 通過(guò)delete操作符完全刪除屬性重新指向原型 2.找不到再沿著__proto__一直往上找 找不到返回undefined 3.3.5.constructor屬性 1.原型對(duì)象prototype 包含constructor 指向構(gòu)造函數(shù) 3.4.原型鏈 3.4.1.原型鏈基本概念 對(duì)象的原型和原型的連接 Object是頂層對(duì)象的構(gòu)造函數(shù) Object.prototype.__proto__ ==null 3.4.2.Object.prototype成員 1.constructor 指向了Object 構(gòu)造函數(shù) 2.對(duì)象.hasOwnProperty(屬性) 判斷某個(gè)屬性是否來(lái)自實(shí)例 1.""屬性""in""對(duì)象"" in操作符只要通過(guò)對(duì)象能夠訪問(wèn)的可枚舉的屬性就返回 true 3.構(gòu)造函數(shù).prototype.isPrototypeOf(對(duì)象) 確定原型和實(shí)例之間是否存在關(guān)系 4.對(duì)象.propertyIsEnumerable(屬性名) 判斷對(duì)象的屬性是否可枚舉 注意:只能判斷自身屬性,原型上的需要用.__proto__.propertyIsEnumerable(); 設(shè)置不可枚舉屬性 Object.defineProperty(對(duì)象,屬性,{value : "",enumerable : false}) 5.A.isPrototypeof(B),判斷A是否在B的原型鏈上 6.toString() 當(dāng)對(duì)象需要隱式轉(zhuǎn)換時(shí)系統(tǒng)自動(dòng)調(diào)用 返回值 [object 類型] 常用Object.prototype.toString.call("");做類型判斷 7.toLocaleString() 在沒(méi)重寫(xiě)的情況下跟toString一樣 內(nèi)置對(duì)象Date String ..重新了次方法 8.valueOf() 返回 將對(duì)象轉(zhuǎn)換成簡(jiǎn)單類型 如果轉(zhuǎn)換不成功 再次調(diào)用toString 3.4.3.Object 內(nèi)置方法( 函數(shù)也是對(duì)象也可以內(nèi)置方法) 1.Object.keys(對(duì)象)返回一個(gè)包含所有可枚舉屬性的字符串?dāng)?shù)組 2.Object.getOwnPropertyNames()返回實(shí)例的所有屬性 無(wú)論是否可以枚舉 3.Object.getPrototypeOf(對(duì)象) 返回對(duì)象的原型 3.4.4.instanceof運(yùn)算符 判斷對(duì)象是否是構(gòu)造函數(shù)的實(shí)例
5.繼承
5.1.概念 自己沒(méi)有的屬性、方法 借用別人的 5.2.混入式繼承 通過(guò)拷貝 將別人的屬性和方法 混入到自身 例: var ott = { name : ""OTT"", extend : function (object){ if(object && (object instanceof Object)){ for(var key in object){ this[key] = object[key]; } } } }; ott.extend({}); 5.3.原型式繼承 5.3.1.特點(diǎn):原型定義公共的屬性和方法 實(shí)例定義自身屬性 5.3.2.優(yōu)點(diǎn):最大程度的節(jié)省內(nèi)存空間 同時(shí)還支持參數(shù)傳遞 例 function OTT(){ this.name = ""ott""; } //改變?cè)椭赶? OTT.prototype = { //此法如需要指定constructor 重新指向構(gòu)造函數(shù) constructor : OTT, say : function (){ ...} } 5.4.原型+混入式繼承 不更改 原型指向 在原型上添加extent 方法 5.5.經(jīng)典繼承 ES5提供Object.create(); 參數(shù)對(duì)象A 返回一個(gè)新對(duì)象B B繼承自A 例 var pp = {x:d}; var pp = Object.create(pp); 5.6.寄生構(gòu)造函數(shù)模式 用途 : 一般在特殊的情況下用來(lái)為對(duì)象創(chuàng)建構(gòu)造函數(shù) 注意:此模式實(shí)例跟構(gòu)造函數(shù)和構(gòu)造函數(shù)的原型沒(méi)有關(guān)系 例.function Person(name, age){ var o = new Object(); o.name = name; o.age = age; o.sayName = function(){ alert(this.name); }; return o; } var p1 = new Person(""Nicholas"", 29); p1.sayName(); //""Nicholas"" 5.7.穩(wěn)妥式繼承||安全式繼承 用途 用于安全的擴(kuò)展內(nèi)置對(duì)象 例 function MyArray(){ } MyArray.prototype = []; MyArray.prototypr.push = function (){console.log(""hehe"");} var arr = new MyArray(); arr.push();//hehe
6.函數(shù)進(jìn)階
6.1.定義函數(shù)的三種方式 6.1.1.字面量 var fn = function (){} 6.1.2.表達(dá)式 function fn(){} 6.1.3.構(gòu)造函數(shù)式:(作用 執(zhí)行字符串形式的代碼 ) //參數(shù) (arg1,arg2....,函數(shù)體) 當(dāng)只有一個(gè)參數(shù)式默認(rèn)為函數(shù)體 //所有參數(shù)都必須是字符串 var fn = new Function(""a"",""a"",""console.log(a+b)""); 匿名函數(shù)自調(diào)用 原理將函數(shù)變成表達(dá)式 (function (){})(); (function (){}()); !function (){}(); //通過(guò)運(yùn)算符將匿名行數(shù)變成表達(dá)式 6.2.eval 的介紹 6.2.1 作用 1.將字符串當(dāng)代碼執(zhí)行 2.將json數(shù)據(jù)轉(zhuǎn)換成js代碼 6.2.2 利用eval 執(zhí)行字符串的特性 將JSON數(shù)據(jù)轉(zhuǎn)換成js對(duì)象 eval(""(""+json+"")""); 6.2.3.JSON介紹 概念:JSON是數(shù)據(jù)格式 用于多語(yǔ)言交換 對(duì)象轉(zhuǎn)換成JSON JSON.stringify(對(duì)象) 返回json字符串 JSON.parse(json) 返回js對(duì)象 6.3.函數(shù)調(diào)用this指向 6.3.1 函數(shù)調(diào)用模式 當(dāng)函數(shù)被調(diào)用this指向window 格式 : 函數(shù)名(); 6.3.2 方法調(diào)用模式 當(dāng)函數(shù)是某個(gè)對(duì)象的方法this指向該對(duì)象 格式 : obj.fn(); 6.3.3. 構(gòu)造函數(shù)調(diào)用模式 this指向新對(duì)象 格式 var obj = new 函數(shù)名(); 6.3.4. 方法借調(diào)模式 call apply bind 1. call 作用: 調(diào)用函數(shù)并指定this指向 格式:fn.call(this,arg1,agr2...); 第一個(gè)參數(shù)如果沒(méi)有那就是指向window 后面的參數(shù)規(guī)則和函數(shù)一致 2. 偽數(shù)組 擴(kuò)展 特點(diǎn) 1、有l(wèi)ength屬性 2、有下標(biāo)屬性 0 1 2 3.... 3、不能用數(shù)組的方法 借調(diào)數(shù)組push方法 Array.prototype.push.call(偽數(shù)組,“參數(shù)”); ;[].join.call(偽數(shù)組,""-""); 3.apply 參數(shù):第一個(gè)參數(shù)是 this指向 第二個(gè)參數(shù)是實(shí)參數(shù)組 哪怕只有一個(gè)實(shí)參也必須實(shí)參 4.bind 給函數(shù)綁定一個(gè)this指向 原函數(shù)this指向不變 返回一個(gè)指定this的新函數(shù) 格式:var newfn = fn.bing(obj); 6.4 函數(shù)也是對(duì)象 1.Function.prototype == fn.__proto__; fn.__proto__.__proto__== Object.prototype; 函數(shù)頂層 Funtion.__proto__ == Funtion.prototype 6.5 Function.prototype成員 1.arguments 實(shí)參列表 偽數(shù)組 2.length 函數(shù)形參的長(zhǎng)度 3.name 函數(shù)名 函數(shù)定義以后不可更改 4.caller 返回函數(shù) 位于哪個(gè)函數(shù)中 6.6 預(yù)解析 6.6.1 鋪墊 1. 字面量:(直接量) 從字面能看出值和類型 55 “55”true [] {} 2.變量: 必須要聲明才能使用的存數(shù)值的內(nèi)存空間 ***瀏覽器可以直接字面量 而不需要提前聲明 6.6.2 作用 目的 1.把變量和函數(shù)提升到作用域的頂端 2.開(kāi)辟存儲(chǔ)空間 存儲(chǔ)變量 6.7.3.規(guī)則 1.全局 1、將變量聲明提升 賦值不提升 同名覆蓋 2、將函數(shù)聲明 提升整個(gè)函數(shù)體 同名覆蓋 3、執(zhí)行代碼 執(zhí)行過(guò)程中忽略所有聲明 直接賦值 2.函數(shù) 形成在函數(shù)執(zhí)行前 執(zhí)行結(jié)束釋放空間 1、將變量聲明和形參提升 賦值不提升 同名覆蓋 2、將形參數(shù)和實(shí)參值相統(tǒng)一 3、將函數(shù)聲明 提升整個(gè)函數(shù)體 同名覆蓋 4、執(zhí)行代碼 執(zhí)行過(guò)程中忽略所有聲明 直接賦值 6.7 作用域與作用域鏈 6.7.1 鋪墊 : 全局變量 :定義在全局的變量 全局都可以訪問(wèn) 局部變量:定義的函數(shù)體內(nèi)部的變量 只有在函數(shù)體內(nèi)可以訪問(wèn) 6.7.2.作用域概念 作用域是一條規(guī)則 決定變量定義存儲(chǔ)在哪里 查找變量時(shí)在自身作用域鏈上查找 6.7.3.作用域鏈 1、多層嵌套函數(shù)形成的鏈?zhǔn)疥P(guān)系 2、作用 存儲(chǔ)自身可訪問(wèn)的變量范圍 3、變量查找原則 現(xiàn)在自身作用域查找 查找不到在去自己是作用域鏈上查找 4、當(dāng)整個(gè)作用域鏈都沒(méi)有時(shí)候 1、如果是調(diào)用則報(bào)錯(cuò) 2、如果是賦值操作 那么就在全局創(chuàng)建一個(gè)變量并賦值(隱式全局) 6.8 詞法作用域 6.8.1 又叫 靜態(tài)作用域 在函數(shù)聲明時(shí)作用域已經(jīng)確定 跟函數(shù)的調(diào)用無(wú)關(guān) 6.9 遞歸函數(shù) 1.概念 : 函數(shù)內(nèi)部直接或者間接調(diào)用自己叫遞歸 2.注意 : 遞歸一定要有出口[結(jié)束條件] 否則超出最大調(diào)用棧 6.10 閉包 1. 概念 將函數(shù)A內(nèi)部的函數(shù)B保存到A的外部形成閉包 格式 當(dāng)一個(gè)函數(shù)被保存到外部時(shí)一定產(chǎn)生閉包 function fn1(){ var num = 1; function fn2(){ num++; } return f2; } var temp = fn1(); 2 作用 將函數(shù)內(nèi)部的變量保存到函數(shù)外部使用 3 內(nèi)存問(wèn)題 垃圾回收 引用計(jì)數(shù) 當(dāng)一個(gè)引用類型有零個(gè)指針指向的時(shí)候 系統(tǒng)會(huì)自動(dòng)回收 環(huán)境標(biāo)記 進(jìn)入環(huán)境是標(biāo)記
7.正則表達(dá)式
7.1.正則創(chuàng)建 7.1.1.概念 : 用于匹配規(guī)則的表達(dá)式 7.1.2.作用 :字符串校驗(yàn) 7.1.3.創(chuàng)建 7.1.3.1 構(gòu)造函數(shù) var reg = new RegExp(/d/,g); 7.1.3.2 字面量 var reg = /^d/g; 7.2.元字符 7.2.1 . 除了換行和回車(chē)以外的任意字符[^ ] 7.2.2 . 匹配 . 7.2.3 d 所有的數(shù)字字符[0-9] 7.2.4 D 所有的非數(shù)字字符[^0-9] 7.2.5 w 所有的單詞字符 [a-zA-Z0-9_] 7.2.6 W 所有的非單詞字符[^a-zA-Z0-9_] 7.2.7 s 空字符 [ 空格] 7.2.8 S 非空字符[^ ] 7.2.9 |或優(yōu)先級(jí)最低 ()表達(dá)式優(yōu)先級(jí)最高 []一個(gè)字符的范圍 7.2.10 [^]非 ^開(kāi)始 $結(jié)束 /^abc$/精確匹配 必須是同一個(gè)單詞 7.2.11.量詞 * 0次或0次以上 {0,} + 1次或1次以上 {1,} ? 0次或者1次 {0,1} {n,m} 出現(xiàn)n到m次 () $1 $2 表示表達(dá)式匹配到的項(xiàng) 7.3.正則匹配 7.3.1.reg.test(str); 7.3.2.參數(shù) g 全局匹配 global i忽略大小寫(xiě)ignore 7.4.字符串方法 7.4.1.str.replace(//g,""""); 7.5.正則提取 str.match(reg) 返回?cái)?shù)組
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/90316.html
摘要:入冬了,寒風(fēng)呼嘯,白雪飄飄,此刻窩在家里學(xué)習(xí)應(yīng)當(dāng)是極好的。為了滿足大家的需求,小編火速為大家整理了史上最全的資料。 showImg(https://segmentfault.com/img/remote/1460000007586577?w=900&h=500); 入冬了,寒風(fēng)呼嘯,白雪飄飄,此刻窩在家里學(xué)習(xí)應(yīng)當(dāng)是極好的。為了滿足大家的需求,小編火速為大家整理了史上最全的Docker資...
摘要:在嚴(yán)格模式下調(diào)用函數(shù)則不影響默認(rèn)綁定?;卣{(diào)函數(shù)丟失綁定是非常常見(jiàn)的。因?yàn)橹苯又付ǖ慕壎▽?duì)象,稱之為顯示綁定。調(diào)用時(shí)強(qiáng)制把的綁定到上顯示綁定無(wú)法解決丟失綁定問(wèn)題。 (關(guān)注福利,關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻,包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)) 本周正式開(kāi)始前端進(jìn)階的第三期,本周的主題是this全面解析,今天是第9天。 本計(jì)劃一共28期,每期重點(diǎn)攻克一個(gè)面試重...
摘要:二什么是文件磁盤(pán)上的文件就是文件。文件指針變量定義是一個(gè)指向類型數(shù)據(jù)的指針變量。表示向何種流中輸出,可以是標(biāo)準(zhǔn)輸出流,也可以是文件流。文件結(jié)構(gòu)體指針,將要讀取的文件流。 ...
摘要:數(shù)組去重,一般都是在面試的時(shí)候才會(huì)碰到,一般是要求手寫(xiě)數(shù)組去重方法的代碼。如果是被提問(wèn)到,數(shù)組去重的方法有哪些你能答出其中的種,面試官很有可能對(duì)你刮目相看。數(shù)組去重的方法一利用去重中最常用不考慮兼容性,這種去重的方法代碼最少。 數(shù)組去重,一般都是在面試的時(shí)候才會(huì)碰到,一般是要求手寫(xiě)數(shù)組去重方法的代碼。如果是被提問(wèn)到,數(shù)組去重的方法有哪些?你能答出其中的10種,面試官很有可能對(duì)你刮目相看...
一:線程基礎(chǔ)知識(shí) 1.并發(fā)編程的基本概念 2. 線程的基本操作 3.線程之間的通信wait和notify 4.join和yield以及sleep詳解 5. synchronized關(guān)鍵字講解 6. volatile原理 7. 線程組 8.線程優(yōu)先級(jí) 9.守護(hù)線程 10.ThreadLocal 二:JDK并發(fā)包 1.jdk并發(fā)工具類 重入鎖 信號(hào)量 讀寫(xiě)鎖 CountDownLatch cyclic...
閱讀 1720·2023-04-25 18:19
閱讀 2148·2021-10-26 09:48
閱讀 1207·2021-10-09 09:44
閱讀 1816·2021-09-09 11:35
閱讀 3097·2019-08-30 15:54
閱讀 2131·2019-08-30 11:26
閱讀 2346·2019-08-29 17:06
閱讀 971·2019-08-29 16:38