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