摘要:高級與進階目錄基礎面向對象編程繼承函數進階正則表達式目錄基礎變量聲明關鍵字儲存數據的內存空間數據類型基本數據類型復雜數據類型類型檢測檢測基本數據類型語法變量字面量數字類型返回字符串返回返回復雜數據類型統一返回特殊返回返回判斷對象的實例語法實
JS高級與進階
目錄======================
基礎 2
Web API 45
面向對象編程 170
繼承 179
函數進階 223
正則表達式 284
目錄======================
1.基礎
1.1.變量聲明 1.1.1 關鍵字var 儲存數據的內存空間 1.2.數據類型 1.2.1 基本數據類型 ; number string boolean null undefined 1.2.2 復雜數據類型 object function 1.3.類型檢測 1.3.1 typeof 檢測基本數據類型 (語法:typeof 變量||字面量) 數字類型返回 "number" 字符串返回"string" boolean返回"boolean" 復雜數據類型統一返回object 特殊 null返回object function返回function 1.3.2 instancof 判斷對象的實例 語法:實例對象 instancof 構造函數 返回值 true || false 1.3.3 constructor 返回對象的構造函數 語法:obj.constructor 返回構造函數名 1.3.4 Object.prototype.toString.call(); 字符串返回:"[object String]" 數字返回:"[object Number]" null返回:"[object Null]" undefined返回:"[object Undefined]" object返回:"[object Object]" boolean返回:"[object Boolean]" 數組返回:"[object Array]" 1.4 類型轉換 1.4.1 轉換成number 方法:Number()、parseInt() 、parseFloat() 通過運算符轉換 轉換不成功返回NAN 1.4.2 轉換成:string 方法:.toString()、String、通過字符串拼接 + 1.4.3 boolean Boolean() 、!!取反 值得注意的是 :0 "" null undefined NaN //會轉換成false 其它都會轉換成true 1.5 操作符 1.5.1 算術運算符 +-/* 1.5.2 一元運算符 ++ -- ! 1.5.3 賦值運算符 = += -+ /+ *+ 1.5.4 邏輯運算符 && || 1.5.5 關系運算符 > < >= <= 1.5.6 相等運算== != !== === 1.5.7 優先級 () > 一元> 算術 > 關系 > 邏輯(先&&后||) > 賦值 不同類型直接操作符號隱式轉換 轉換規則: 有數字或者boolean 轉數字比較 (++ -- 運算符相當于加一 減一所以是轉成數字) 沒有數字和bool 有字符串 轉換成字符串 復雜數據類型比較地址 其中值得注意是 等等 和 全等的比較轉換 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 和其他類型判斷相等的時候,不轉換類型 3. 一般只要有NaN參與的運算,返回都是NaN NaN轉換成boolean 是false . NaN != NaN 返回的是true; 1.6 流程控制語句 1.6.1 分支結構 1:if(){...}else {..} 2.switch (){ case value: break; default: break; } 1.6.2 三元運算 語法: 條件? 表達式1 :表達式2 1.6.3 循環語句 for(var i=0;i<10;i++){ 循環體 } for(var key in obj){} while(條件){循環體 } do{ 循環體 }while ( 條件); //至少執行一次 1.7 數組 1.7.1 創建數組 1、字面量var arr = []; 2、構造函數 var arr = new Array(); 1.7.2.數組操作 通過下標 增刪改 1.8 函數 1.8.1 函數三要素 函數名 參數 返回值 1.8.2.聲明 1.字面量 var fn = function(a,b,c){return} 2.函數聲明 function fn(){} 3.函數調用 函數名() arguments對象 每個函數內部都有一個arguments對象與形參對象 成映射關系 1.9.對象 1.9.1.概念:一類事物的抽象,在編程語言中理解成無序的屬性和方法的結合 創建對象 1.字面量 var obj = {}; 2.內置構造函數 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.自定義構造函數 語法:function P(name ,age){ this.name = name; this.age = age; } 行內約定:一般來說構造函數首字母大寫 1.9.2 屬性操作 1.通過 點語法 中括號語法操作 obj.name 或者 obj["name"] 2.delete obj.key 刪除對象屬性 1.10.內置對象 1.10.1 Array 數組的方法 array.push(value);//將一個或多個元素添加到數組的結尾,返回length array.pop();//從數組中刪除最后一個元素 改變了數組的長度 返回被刪除的元素 array.unshift(value);//將一個或多個元素添加到數組的開頭 返回length array.shift();//從數組中刪除第一個元素,改變了數組的長度 返回被刪除的元素 array.reverse();//翻轉數組,返回翻轉過的數組 原數組不變 array.sort();//默認排序順序是根據字符串Unicode碼點 可以傳函數.sort(function (a,b){return });返回值<=0 位置不變 返回值大于0 交換位置 原數組發生改變 concat:數組合并,不會影響原來的數組,會返回一個新數組 join(str);以str將數組連接成字符串 slice(begin, end):復制數組的一部分到一個新數組,并返回這個新數組 splice(begin,num,val); 在begin位置刪除num個元素 并將val填補到該位置 返回被踢除的元素 原數組發生改變 forEach(function(ele,i){ });遍歷數組的每一項 無返回值 map(function(ele,i){ });為數組的每項執行回調函數并將返回值存到數組 返回這個數組 原數組不變 (注意不會忽略數組的 空項(值為null undefined...) 實際上數組的內置對象都不會忽略空項目) filter(functiong( ele ,i){});為數組的每項執行回調函數并將返回值為true的項目 存到數組 返回這個數組 原數組不變 reduce(functin(a,b){ return a;},a);為數組的每項執行回調函數 并將a帶入到下次循環 最后返回a 如果不傳參數那么默認是前一項 原數組不變 1.10.2 String 對象 charAt("要查詢的字符") //獲取指定位置處字符 charCodeAt(index) //獲取指定位置處字符的ASCII碼 indexOf:獲取某個字符第一次出現的位置,如果沒有,返回-1 lastIndexOf:從后面開始查找第一次出現的位置。如果沒有,返回-1 trim();//去除字符串兩邊的空格,內部空格不會去除 toUpperCase()//全部轉換成大寫字母 toLowerCase()//全部轉換成小寫字母 concat字符串拼接返回新的字符串 一般都用 + 號 slice(start,end)包含頭不包含尾返回一個新的字符串,end為負值從后往前 原字符串不變 substring(start,end)包含頭,不包含尾 返回一個新的字符串 原字符串不變 substr(從start開始,截取length個字符)(推薦) split:將字符串分割成數組,原字符串不改變(很常用) replace(searchValue, replaceValue)//參數:searchValue:需要替換的值 replaceValue:用來替換的值 1.10.3 Data 日期對象 創建:var d = new Data();或者 Data.now(); d.getTime() // 返回毫秒數和valueOf()結果一樣,valueOf()內部調用的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 算術對象 Math.PI // 圓周率 Math.random()// 生成隨機數 Math.floor()/Math.ceil()// 向下取整/向上取整 Math.round()// 取整,四舍五入 Math.abs() // 絕對值 Math.max()/Math.min()// 求最大和最小值 Math.sin()/Math.cos() // 正弦/余弦 Math.power()/Math.sqrt() // 求指數次冪/求平方根 內置對象中Math是對象 而其他的是構造函數 需要用new構建 1.11 值類型與引用類型 1.值類型:簡單類型,變量在存儲的時候,存儲的是值本身 2.引用類型:復雜類型,變量在存儲的時候,存儲的是對象的地址
2 Web API
2.1 概念 1.Application Programming Interface,應用程序編程接口 2.web api 是瀏覽器提供的一套操作瀏覽器功能和頁面元素的API(BOM和DOM) 2.2 DOM 1.DOM的概念 Document Object Model 文檔對象模型 是W3C組織推薦的處理可擴展標記語言的標準編程接口。可以動態地訪問程序和腳本,對web文檔進行增刪改查 。DOM是一種基于樹的API文檔,它要求在處理過程中整個文檔都表示在存儲器中 2.DOM操作 獲取頁面元素 id選擇器document.getElementById("id") 通過id獲取頁面元素 返回一個dom對象 class選擇器 document.getElementsByClassName(""類名) 通過類名獲取頁面元素 返回一個偽數組 無論的多個元素還是一個元素 標簽選擇器 document.getElementsByTageName(“標簽名”) 通過標簽名獲取元素 返回一個偽數組 無論獲取是多個還是一個元素 name屬性選擇器 document.getElementsByName("name名"); 通過表單元素的name屬性獲取元素 永遠返回一個偽數組 css選擇器 document.querySelector("同css選擇器寫法") 返回dom元素 document.querySelectorAll() 返回偽數組 2.注冊事件 1.事件三要素 事件源、事件名、處理方法 2.注冊事件的方式 元素.onclick = function(){} //重復注冊事件后面覆蓋前面的 元素.addEventListener("click",function(){ },boolean)//參數:事件名 回調函數 是否事件冒泡 重復注冊事件不會覆蓋 第三個參數默認 false即冒泡傳遞 當值為true時,事件使用捕獲傳遞 注意:IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 3.attachEvent(""元素"",function(){},boolean) IE8版本之前的方法 事件不會覆蓋 3.移除事件 1.元素.onclick = null; 利用null覆蓋掉前面的注冊事件 2..removeEventListener("事件名", 函數名, false); 想要移除事件 那么在之前注冊時必須有函數名 注意:IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 3.detachEvent("onclick", 函數名) 早期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 用于大部分表單元素的內容獲取(option除外innerText) type 可以獲取input標簽的類型(輸入框或復選框等) disabled 禁用屬性(ture||false) checked 復選框選中屬性(ture||false) selected 下拉菜單選中屬性(ture||false) 3.自定義屬性操作 getAttribute() 獲取標簽行內屬性 setAttribute() 設置標簽行內屬性 removeAttribute() 移除標簽行內屬性 與element.屬性的區別: 此法獲取不到行內添加的自定義屬性 element.屬性 是在獲取的元素對象上直接添加獲取屬性刪除用 dellete element.property 4.樣式屬性操作 1.使用style方式設置的樣式 通過此方法設置的樣式屬性是行內樣式 設置寬高等需要帶上“px” //ES5新增方法 document.getComputedStyle(元素,null) 獲取計算過的屬性 5.類名操作 1.element.className =“” 設置獲取元素的class屬性 通過此方法設置類名會覆蓋原有類名 element.removeClass() 2.//ES5新增方法 element.classList 通過此法設置不會覆蓋直接追擊 ele.classList.add();添加 .classList.remove();刪除 .classlist.toggle();切換類名 6.創建元素 1.document.write 2.element.innerHTML = """";性能較差,一般先進行字符串拼接才添加到頁面避免頻繁操作 3.document.createElement("標簽名"); 7.節點操作 1.添加刪除克隆 節點方法 A.appendChild(B)將B元素添加到A元素中 同時將B元素從原來的位置刪除 A.insertBefore(B) 將B元素添加到A元素的起始位置 A.removeChild(B) 將B元從A元素中移除 A.replaceChild(B) 替換掉A元素下面的元素 A.cloneNode()參數boolean類型 表示深度復制 返回 一個克隆出來的來元素 克隆出來的元素跟原來是元素不關聯 結appendChild使用 2.選擇節點 parentNode 父元節點 childNodes 子節點 children 子元素 nextSibling/previousSibling 上/下一個兄弟節點 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 用于獲取觸發事件的元素 6. event.preventDefault() 取消默認行為 7. eventPhase屬性可以查看事件觸發時所處的階段 8. event.stopPropagation();阻止冒泡 IE低版本 event.cancelBubble = true; 標準中已廢棄 4.事件的三個階段 1. 事件的捕獲階段 2. 事件的目標階段(觸發自己的事件) 3. 事件的冒泡階段 9.事件委托 1.概念:事件委托 給父元素注冊事件 通過e.target || e.srcElement 獲取觸發事件的元素 2.3 BOM 2.3.1 概念 BOM(Browser Object Model) 是指瀏覽器對象模型,瀏覽器對象模型提供了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成,其中代表瀏覽器窗口的Window對象是BOM的頂層對象,其他對象都是該對象的子對象 2.3.2 常用的方法 alert()提示彈窗 prompt()彈出輸入框 confirm()彈出選擇框 onload 頁面加載事件 setTimeout()和clearTimeout() 定時器 2.3.3 window.location對象 常用方法 1.location.href = "";設置||獲取地址瀏覽 (常用作js實現頁面跳轉) 2.location.search 地址欄參數獲取 3.location.reload(); 刷新頁面 參數 (true/false)是否強制刷新 4.url組成 scheme://host:port/path?query#fragment scheme:通信協議 常用的http,ftp,maito等 host:主機 服務器(計算機)域名系統 (DNS) 主機名或 IP 地址。 port:端口號 整數,可選,省略時使用方案的默認端口,如http的默認端口為80。 path:路徑 由零或多個"/"符號隔開的字符串,一般用來表示主機上的一個目錄或文件地址。 query:查詢 可選,用于給動態網頁傳遞參數,可有多個參數,用"&"符號隔開,每個參數的名和值用"="符號隔開。例如:name=zs fragment:信息片斷 字符串,錨點. 2.3.4.history對象 常用方法 history.back();返回 跟后退按鈕等效 history.forward();前進 history.go(1);參數 1前進 -1后退 0當前頁面 2.3.5.navigator對象 常用方法 userAgent 可以判斷用戶瀏覽器的類型 platform 可以判斷瀏覽器所在的系統平臺類型. 2.3.6.screen對象 screen.width 屏幕寬度 screen.height 屏幕高度 screen.availWidth 瀏覽器可用寬度 screen.availHeight 瀏覽可用高度 2.3.7.offset家族 ele.offsetWidth 獲取元素寬度height + paddnig + border ele.offsetHeight 獲取元素高度 (注意:不帶單位 只能獲取 不能設置)設置通過style.Width ele.offsetParent 返回最近的具有非靜態定位的父元素 ele.offsetLeft 獲取相對父元素的真實left值 left + margin ele.offsetTop 獲取相對父元素的真實top值 top + margin 2.3.8.scroll家族 ele.scrollHeight 獲取自身內容的高度 可能超出盒子大小 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.用于獲取元素可視區的大小 ele.clientHeight/.clientWidth 盒子可視區域的大小 clientleftclienttop 獲取border寬度 如果內容沒有滾動條clientWidth與scrollWidth相同 2.獲取頁面可視區的大小 window.innerWidth window.innerHeight //IE678 document.documentElement.clientWidth 3.頁面可視區大小兼容性封裝 function client() { return { width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0, height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0 }; }
3.面向對象編程
3.1.基本概念 3.1.1.什么是對象? 我們常說萬物皆對象,很籠統,在計算機中最早在c語言中把具有特定長度的類型,稱作為對象類型;后來我們說內存中的一塊有效區域叫對象; 我把對象理解成具有某些屬性和方法的變量 而創造出這些變量的抽象叫做類 3.1.2.什么是面向對象? 面向對象是一種思想,通過調用對象的某種方法和屬性來完成某件事情,當然這個對象是我們創造出來的,我們把可能在多個地方會使用的到的功能賦給對象,在調用 3.1.3.特性 1.封裝性 只需要關注對象提供的方法如何使用,而不需要關心對象對象的內部具體實現 2.繼承 一個對象沒有的一些屬性和方法,另外一個對象有,拿過來用,就實現了繼承 3.多態 指在一棵繼承樹中的類中可以有多個同名但不同方法體以及不同形參的方法。多態有兩種情況:覆蓋和重載 3.2.創建的方式 3.2.1.內置構造函數Object var obj = new Object(); 3.2.2.對象字面量 var obj = {}; 3.2.3.工廠函數 本質上就是函數內 返回對象 function p (x,y){ retrun {name : x,age : y} } 3.2.4.自定義構造函數 行內通約:首字母大寫 構造函數一定要使用new關鍵字 1.new 的作用 在內存中開辟空間(對象obj) 調用構造函數 讓構造函數的this指向新的對象 本質上就是在構造函數中var this = obj; 返回 this 3.3.原型 3.3.1.原型基本概念prototype 1.prototype是一個對象 2.所有函數自帶prototyoe屬性 3.作用:存儲公共方法 3.3.2.構造函數、原型、實例的關系 1.實例化對象能夠訪直接問構造函數的prototype 2.構造函數的.prototype == 實例的.__proto__ 原型的constructor 指向構造函數 3.3.3.__proto__屬性 原型連 1.所有對象都有 __proto__ 指向構造函數的prototype 2.構造函數的.prototype == 實例的.__proto__ 例Array.prototype == [].__proto__ 3.3.4.屬性查找原則 1先在自身尋找 當實力具有某個屬性時自動屏蔽原型對應屬性 哪怕屬性值為null 通過delete操作符完全刪除屬性重新指向原型 2.找不到再沿著__proto__一直往上找 找不到返回undefined 3.3.5.constructor屬性 1.原型對象prototype 包含constructor 指向構造函數 3.4.原型鏈 3.4.1.原型鏈基本概念 對象的原型和原型的連接 Object是頂層對象的構造函數 Object.prototype.__proto__ ==null 3.4.2.Object.prototype成員 1.constructor 指向了Object 構造函數 2.對象.hasOwnProperty(屬性) 判斷某個屬性是否來自實例 1.""屬性""in""對象"" in操作符只要通過對象能夠訪問的可枚舉的屬性就返回 true 3.構造函數.prototype.isPrototypeOf(對象) 確定原型和實例之間是否存在關系 4.對象.propertyIsEnumerable(屬性名) 判斷對象的屬性是否可枚舉 注意:只能判斷自身屬性,原型上的需要用.__proto__.propertyIsEnumerable(); 設置不可枚舉屬性 Object.defineProperty(對象,屬性,{value : "",enumerable : false}) 5.A.isPrototypeof(B),判斷A是否在B的原型鏈上 6.toString() 當對象需要隱式轉換時系統自動調用 返回值 [object 類型] 常用Object.prototype.toString.call("");做類型判斷 7.toLocaleString() 在沒重寫的情況下跟toString一樣 內置對象Date String ..重新了次方法 8.valueOf() 返回 將對象轉換成簡單類型 如果轉換不成功 再次調用toString 3.4.3.Object 內置方法( 函數也是對象也可以內置方法) 1.Object.keys(對象)返回一個包含所有可枚舉屬性的字符串數組 2.Object.getOwnPropertyNames()返回實例的所有屬性 無論是否可以枚舉 3.Object.getPrototypeOf(對象) 返回對象的原型 3.4.4.instanceof運算符 判斷對象是否是構造函數的實例
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.優點:最大程度的節省內存空間 同時還支持參數傳遞 例 function OTT(){ this.name = ""ott""; } //改變原型指向 OTT.prototype = { //此法如需要指定constructor 重新指向構造函數 constructor : OTT, say : function (){ ...} } 5.4.原型+混入式繼承 不更改 原型指向 在原型上添加extent 方法 5.5.經典繼承 ES5提供Object.create(); 參數對象A 返回一個新對象B B繼承自A 例 var pp = {x:d}; var pp = Object.create(pp); 5.6.寄生構造函數模式 用途 : 一般在特殊的情況下用來為對象創建構造函數 注意:此模式實例跟構造函數和構造函數的原型沒有關系 例.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.穩妥式繼承||安全式繼承 用途 用于安全的擴展內置對象 例 function MyArray(){ } MyArray.prototype = []; MyArray.prototypr.push = function (){console.log(""hehe"");} var arr = new MyArray(); arr.push();//hehe
6.函數進階
6.1.定義函數的三種方式 6.1.1.字面量 var fn = function (){} 6.1.2.表達式 function fn(){} 6.1.3.構造函數式:(作用 執行字符串形式的代碼 ) //參數 (arg1,arg2....,函數體) 當只有一個參數式默認為函數體 //所有參數都必須是字符串 var fn = new Function(""a"",""a"",""console.log(a+b)""); 匿名函數自調用 原理將函數變成表達式 (function (){})(); (function (){}()); !function (){}(); //通過運算符將匿名行數變成表達式 6.2.eval 的介紹 6.2.1 作用 1.將字符串當代碼執行 2.將json數據轉換成js代碼 6.2.2 利用eval 執行字符串的特性 將JSON數據轉換成js對象 eval(""(""+json+"")""); 6.2.3.JSON介紹 概念:JSON是數據格式 用于多語言交換 對象轉換成JSON JSON.stringify(對象) 返回json字符串 JSON.parse(json) 返回js對象 6.3.函數調用this指向 6.3.1 函數調用模式 當函數被調用this指向window 格式 : 函數名(); 6.3.2 方法調用模式 當函數是某個對象的方法this指向該對象 格式 : obj.fn(); 6.3.3. 構造函數調用模式 this指向新對象 格式 var obj = new 函數名(); 6.3.4. 方法借調模式 call apply bind 1. call 作用: 調用函數并指定this指向 格式:fn.call(this,arg1,agr2...); 第一個參數如果沒有那就是指向window 后面的參數規則和函數一致 2. 偽數組 擴展 特點 1、有length屬性 2、有下標屬性 0 1 2 3.... 3、不能用數組的方法 借調數組push方法 Array.prototype.push.call(偽數組,“參數”); ;[].join.call(偽數組,""-""); 3.apply 參數:第一個參數是 this指向 第二個參數是實參數組 哪怕只有一個實參也必須實參 4.bind 給函數綁定一個this指向 原函數this指向不變 返回一個指定this的新函數 格式:var newfn = fn.bing(obj); 6.4 函數也是對象 1.Function.prototype == fn.__proto__; fn.__proto__.__proto__== Object.prototype; 函數頂層 Funtion.__proto__ == Funtion.prototype 6.5 Function.prototype成員 1.arguments 實參列表 偽數組 2.length 函數形參的長度 3.name 函數名 函數定義以后不可更改 4.caller 返回函數 位于哪個函數中 6.6 預解析 6.6.1 鋪墊 1. 字面量:(直接量) 從字面能看出值和類型 55 “55”true [] {} 2.變量: 必須要聲明才能使用的存數值的內存空間 ***瀏覽器可以直接字面量 而不需要提前聲明 6.6.2 作用 目的 1.把變量和函數提升到作用域的頂端 2.開辟存儲空間 存儲變量 6.7.3.規則 1.全局 1、將變量聲明提升 賦值不提升 同名覆蓋 2、將函數聲明 提升整個函數體 同名覆蓋 3、執行代碼 執行過程中忽略所有聲明 直接賦值 2.函數 形成在函數執行前 執行結束釋放空間 1、將變量聲明和形參提升 賦值不提升 同名覆蓋 2、將形參數和實參值相統一 3、將函數聲明 提升整個函數體 同名覆蓋 4、執行代碼 執行過程中忽略所有聲明 直接賦值 6.7 作用域與作用域鏈 6.7.1 鋪墊 : 全局變量 :定義在全局的變量 全局都可以訪問 局部變量:定義的函數體內部的變量 只有在函數體內可以訪問 6.7.2.作用域概念 作用域是一條規則 決定變量定義存儲在哪里 查找變量時在自身作用域鏈上查找 6.7.3.作用域鏈 1、多層嵌套函數形成的鏈式關系 2、作用 存儲自身可訪問的變量范圍 3、變量查找原則 現在自身作用域查找 查找不到在去自己是作用域鏈上查找 4、當整個作用域鏈都沒有時候 1、如果是調用則報錯 2、如果是賦值操作 那么就在全局創建一個變量并賦值(隱式全局) 6.8 詞法作用域 6.8.1 又叫 靜態作用域 在函數聲明時作用域已經確定 跟函數的調用無關 6.9 遞歸函數 1.概念 : 函數內部直接或者間接調用自己叫遞歸 2.注意 : 遞歸一定要有出口[結束條件] 否則超出最大調用棧 6.10 閉包 1. 概念 將函數A內部的函數B保存到A的外部形成閉包 格式 當一個函數被保存到外部時一定產生閉包 function fn1(){ var num = 1; function fn2(){ num++; } return f2; } var temp = fn1(); 2 作用 將函數內部的變量保存到函數外部使用 3 內存問題 垃圾回收 引用計數 當一個引用類型有零個指針指向的時候 系統會自動回收 環境標記 進入環境是標記
7.正則表達式
7.1.正則創建 7.1.1.概念 : 用于匹配規則的表達式 7.1.2.作用 :字符串校驗 7.1.3.創建 7.1.3.1 構造函數 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 所有的數字字符[0-9] 7.2.4 D 所有的非數字字符[^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 |或優先級最低 ()表達式優先級最高 []一個字符的范圍 7.2.10 [^]非 ^開始 $結束 /^abc$/精確匹配 必須是同一個單詞 7.2.11.量詞 * 0次或0次以上 {0,} + 1次或1次以上 {1,} ? 0次或者1次 {0,1} {n,m} 出現n到m次 () $1 $2 表示表達式匹配到的項 7.3.正則匹配 7.3.1.reg.test(str); 7.3.2.參數 g 全局匹配 global i忽略大小寫ignore 7.4.字符串方法 7.4.1.str.replace(//g,""""); 7.5.正則提取 str.match(reg) 返回數組
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90709.html
摘要:前言月份開始出沒社區,現在差不多月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了一般來說,差不多到了轉正的時候,會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客,博文推薦分享給大家。 1.前言 6月份開始出沒社區,現在差不多9月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了!一般來說,差不多到了轉正的時候,會進行總結或者分享會議!那么今天我就...
摘要:書籍如下面向對象編程指南,風格輕松易懂,比較適合初學者,原型那塊兒講得透徹,種繼承方式呢。還有另一件事情是,比如發現自己某個知識點不太清楚,可以單獨去百度。 作者:小不了鏈接:https://zhuanlan.zhihu.com/p/...來源:知乎著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。 鑒于時不時,有同學私信問我(老姚,下同)怎么學前端的問題。這里統一回...
摘要:目錄一創建項目二配置路由三靜態資源四模板引擎五結語是由原班人馬打造的超輕量服務端框架與相比,除了自由度更高,可以自行引入中間件之外,更重要的是使用了,從而避免了回調地獄不過也是因為代碼升級,所以需要以上的環境一創建項目手動創建一個項目目錄, 目錄 一、創建項目二、配置路由三、靜態資源四、模板引擎五、結語 Koa 是由 Express 原班人馬打造的超輕量服務端框架與 Express 相...
摘要:目錄一創建項目二配置路由三靜態資源四模板引擎五結語是由原班人馬打造的超輕量服務端框架與相比,除了自由度更高,可以自行引入中間件之外,更重要的是使用了,從而避免了回調地獄不過也是因為代碼升級,所以需要以上的環境一創建項目手動創建一個項目目錄, 目錄 一、創建項目二、配置路由三、靜態資源四、模板引擎五、結語 Koa 是由 Express 原班人馬打造的超輕量服務端框架與 Express 相...
閱讀 1631·2021-10-27 14:13
閱讀 1868·2021-10-11 10:59
閱讀 3367·2021-09-24 10:26
閱讀 1925·2019-08-30 12:48
閱讀 3041·2019-08-30 12:46
閱讀 2033·2019-08-30 11:16
閱讀 1414·2019-08-30 10:48
閱讀 2740·2019-08-29 16:54