做網(wǎng)站建設(shè)有哪些公司,一起做網(wǎng)店 網(wǎng)站打不開,wap網(wǎng)頁開發(fā),施工企業(yè)會(huì)計(jì)科目表文章目錄一、編程思想1. 面向過程編程2. 面向?qū)ο缶幊?. 面向過程 vs 面向?qū)ο蠖?gòu)造函數(shù)與原型4. 構(gòu)造函數(shù)實(shí)現(xiàn)面向?qū)ο?. 構(gòu)造函數(shù)的內(nèi)存問題三、原型系統(tǒng)6. 原型對(duì)象概念7. 原型中的 this 指向8. 擴(kuò)展內(nèi)置對(duì)象原型9. constructor 屬性10. 對(duì)象原型 __proto__11. 原型繼承1…文章目錄一、編程思想1. 面向過程編程2. 面向?qū)ο缶幊?. 面向過程 vs 面向?qū)ο蠖?、?gòu)造函數(shù)與原型4. 構(gòu)造函數(shù)實(shí)現(xiàn)面向?qū)ο?. 構(gòu)造函數(shù)的內(nèi)存問題三、原型系統(tǒng)6. 原型對(duì)象概念7. 原型中的 this 指向8. 擴(kuò)展內(nèi)置對(duì)象原型9. constructor 屬性10. 對(duì)象原型 __proto__11. 原型繼承12. 原型鏈查找規(guī)則13. instanceof 運(yùn)算符四、深淺拷貝--只針對(duì)引用類型14. 淺拷貝15. 深拷貝方法一遞歸實(shí)現(xiàn)方法二使用 JSON 方法有局限性方法三使用第三方庫lodash五、異常處理16. 異常處理機(jī)制六、this 指向與處理17. this 指向規(guī)則普通函數(shù)的 this箭頭函數(shù)的 this18. 改變 this 指向call() - 立即執(zhí)行apply() - 立即執(zhí)行數(shù)組參數(shù)bind() - 返回新函數(shù)三者區(qū)別總結(jié)七、防抖與節(jié)流19. 防抖Debounce20. 節(jié)流Throttle21. 防抖與節(jié)流的區(qū)別與應(yīng)用場景22. 相關(guān)事件補(bǔ)充總結(jié)一、編程思想1. 面向過程編程面向過程是一種傳統(tǒng)的編程范式它將程序視為一系列順序執(zhí)行的步驟。開發(fā)者需要分析問題將解決方案分解為一個(gè)個(gè)具體的步驟然后用函數(shù)實(shí)現(xiàn)這些步驟。特點(diǎn)關(guān)注如何做How to do以函數(shù)為中心組織代碼數(shù)據(jù)與操作分離示例制作蛋炒飯的過程準(zhǔn)備食材雞蛋、米飯、油、鹽打散雞蛋熱鍋下油炒雞蛋加入米飯調(diào)味翻炒出鍋裝盤2. 面向?qū)ο缶幊堂嫦驅(qū)ο缶幊蘋OP將程序視為一組相互作用的對(duì)象每個(gè)對(duì)象都是具有特定功能的獨(dú)立實(shí)體。三大特性封裝性將數(shù)據(jù)和方法隱藏在對(duì)象內(nèi)部只暴露必要的接口繼承性子類可以繼承父類的屬性和方法實(shí)現(xiàn)代碼復(fù)用多態(tài)性同一接口可以有不同的實(shí)現(xiàn)方式示例餐廳系統(tǒng)對(duì)象廚師、服務(wù)員、顧客、收銀員每個(gè)對(duì)象有明確的職責(zé)廚師負(fù)責(zé)烹飪服務(wù)員負(fù)責(zé)點(diǎn)菜上菜收銀員負(fù)責(zé)結(jié)賬3. 面向過程 vs 面向?qū)ο髮?duì)比維度面向過程面向?qū)ο蠛诵乃枷氩襟E分解對(duì)象交互代碼組織以函數(shù)為中心以對(duì)象為中心數(shù)據(jù)存儲(chǔ)數(shù)據(jù)與函數(shù)分離數(shù)據(jù)與方法封裝在一起適用場景簡單任務(wù)、一次性腳本復(fù)雜系統(tǒng)、長期維護(hù)項(xiàng)目復(fù)用性函數(shù)復(fù)用對(duì)象復(fù)用、繼承復(fù)用二、構(gòu)造函數(shù)與原型4. 構(gòu)造函數(shù)實(shí)現(xiàn)面向?qū)ο?/ 構(gòu)造函數(shù)類functionPerson(name,age){// 實(shí)例屬性this.namename;this.ageage;// 實(shí)例方法 - 每個(gè)實(shí)例都會(huì)創(chuàng)建獨(dú)立的方法副本this.sayHellofunction(){console.log(Hello, Im${this.name});};}// 創(chuàng)建實(shí)例constperson1newPerson(Alice,25);constperson2newPerson(Bob,30);console.log(person1.name);// Aliceconsole.log(person2.name);// Bob5. 構(gòu)造函數(shù)的內(nèi)存問題問題每個(gè)實(shí)例都會(huì)創(chuàng)建獨(dú)立的方法副本造成內(nèi)存浪費(fèi)functionPerson(name){this.namename;this.sayHifunction(){console.log(Hi, this.name);};}constp1newPerson(小明);constp2newPerson(小紅);console.log(p1.sayHip2.sayHi);// false - 兩個(gè)獨(dú)立的方法三、原型系統(tǒng)6. 原型對(duì)象概念JavaScript 中每個(gè)函數(shù)都有一個(gè)prototype屬性指向一個(gè)原型對(duì)象。所有實(shí)例共享原型對(duì)象上的屬性和方法。公共的屬性寫到構(gòu)造函數(shù)里面公共的方法寫到原型對(duì)象身上避免內(nèi)存浪費(fèi)JavaScript 中對(duì)象的工作機(jī)制當(dāng)訪問對(duì)象的屬性或方法時(shí)先在當(dāng)前實(shí)例對(duì)象是查找然后再去原型對(duì)象查找并且原型對(duì)象被所有實(shí)例共享。functionStar(uname,age){this.unameuname;// 公共屬性this.ageage;}// 公共方法寫到原型對(duì)象上Star.prototype.singfunction(){console.log(唱歌);}constldhnewStar(劉德華,55);constzxynewStar(張學(xué)友,58);// 所有實(shí)例共享同一個(gè)方法console.log(ldh.singzxy.sing);// true7. 原型中的 this 指向構(gòu)造函數(shù)和原型對(duì)象中的this都指向?qū)嵗膶?duì)象。letthat;functionStar(uname){thatthis;// 構(gòu)造函數(shù)中的this指向?qū)嵗龑?duì)象this.unameuname;}Star.prototype.singfunction(){thatthis;// 原型方法中的this指向?qū)嵗龑?duì)象console.log(唱歌);}constldhnewStar(劉德華);ldh.sing();console.log(thatldh);// true8. 擴(kuò)展內(nèi)置對(duì)象原型// 為數(shù)組添加自定義方法// 最大值方法Array.prototype.maxfunction(){returnMath.max(...this);}// 最小值方法Array.prototype.minfunction(){returnMath.min(...this);}// 求和方法Array.prototype.sumfunction(){returnthis.reduce((prev,item)previtem,0);}// 使用示例console.log([1,2,3].max());// 3console.log([1,2,3].min());// 1console.log([1,2,3].sum());// 6// 注意擴(kuò)展內(nèi)置對(duì)象原型需謹(jǐn)慎可能與其他庫沖突9. constructor 屬性每個(gè)原型對(duì)象都有一個(gè)constructor屬性指向其構(gòu)造函數(shù)。當(dāng)重寫原型對(duì)象時(shí)需要手動(dòng)設(shè)置constructor。functionPerson(name){this.namename;}constpnewPerson(Lucy);console.log(p.constructorPerson);// trueconsole.log(Person.prototype.constructorPerson);// true// 重置原型后需要恢復(fù) constructorPerson.prototype{// 需要手動(dòng)設(shè)置 constructorconstructor:Person,sayHello(){console.log(Hello);}};10. 對(duì)象原型proto每個(gè)對(duì)象都有一個(gè)__proto__屬性現(xiàn)代瀏覽器推薦使用Object.getPrototypeOf()指向其構(gòu)造函數(shù)的原型對(duì)象。注意proto是JS非標(biāo)準(zhǔn)屬性[[prototype]]和__proto__意義相同用來表明當(dāng)前實(shí)例對(duì)象指向哪個(gè)原型對(duì)象prototype__proto__對(duì)象原型里面也有一個(gè) constructor屬性指向創(chuàng)建該實(shí)例對(duì)象的構(gòu)造函數(shù)functionStar(){}constldhnewStar();// 對(duì)象原型指向構(gòu)造函數(shù)的原型對(duì)象console.log(ldh.__proto__Star.prototype);// true// 對(duì)象原型的constructor指向構(gòu)造函數(shù)console.log(ldh.__proto__.constructorStar);// true11. 原型繼承通過原型實(shí)現(xiàn)對(duì)象之間的繼承關(guān)系。// 父構(gòu)造函數(shù)functionPerson(){this.eyes2;this.head1;}// 子構(gòu)造函數(shù)functionWoman(){}// 核心通過原型繼承父構(gòu)造函數(shù)Woman.prototypenewPerson();// 指回原來的構(gòu)造函數(shù)Woman.prototype.constructorWoman;// 添加子構(gòu)造函數(shù)自己的方法Woman.prototype.babyfunction(){console.log(baby);}constrednewWoman();console.log(red.eyes);// 2繼承自Personred.baby();// baby自己的方法12. 原型鏈查找規(guī)則當(dāng)訪問對(duì)象屬性/方法時(shí)先在對(duì)象自身查找找不到則沿著__proto__到原型對(duì)象查找繼續(xù)沿著原型鏈向上查找直到Object.prototype如果到Object.prototype仍找不到返回undefinedfunctionPerson(){}constldhnewPerson();// 原型鏈關(guān)系console.log(ldh.__proto__Person.prototype);// trueconsole.log(Person.prototype.__proto__Object.prototype);// trueconsole.log(Object.prototype.__proto__null);// true// instanceof 檢查原型鏈console.log(ldhinstanceofPerson);// trueconsole.log(ldhinstanceofObject);// trueconsole.log(ArrayinstanceofObject);// true13. instanceof 運(yùn)算符判斷構(gòu)造函數(shù)的prototype是否出現(xiàn)在對(duì)象的原型鏈上。四、深淺拷貝–只針對(duì)引用類型14. 淺拷貝特點(diǎn)只拷貝對(duì)象的第一層屬性如果屬性值是引用類型則拷貝的是地址。// 淺拷貝方法constobj{name:Alice,hobbies:[reading,music],info:{age:25}};// 1. Object.assign()constcopy1Object.assign({},obj);// 2. 展開運(yùn)算符constcopy2{...obj};// 3. 數(shù)組淺拷貝constarr[1,2,{a:3}];constarrCopy1arr.slice();constarrCopy2[...arr];constarrCopy3arr.concat();// 淺拷貝的問題copy1.hobbies.push(sports);console.log(obj.hobbies);// [reading, music, sports] - 被修改了15. 深拷貝特點(diǎn)完全拷貝對(duì)象及其嵌套對(duì)象新舊對(duì)象完全獨(dú)立。方法一遞歸實(shí)現(xiàn)functiondeepCopy(newObj,oldObj){for(letkinoldObj){if(oldObj[k]instanceofArray){newObj[k][];deepCopy(newObj[k],oldObj[k]);}elseif(oldObj[k]instanceofObject){newObj[k]{};deepCopy(newObj[k],oldObj[k]);}else{newObj[k]oldObj[k];}}}方法二使用 JSON 方法有局限性constobj{name:Alice,hobbies:[reading,music],date:newDate()};constdeepCopyJSON.parse(JSON.stringify(obj));// 局限性// 1. 不能處理函數(shù)、undefined、Symbol// 2. 不能處理循環(huán)引用// 3. Date對(duì)象會(huì)變成字符串// 4. RegExp、Error對(duì)象會(huì)變成空對(duì)象// 5. 會(huì)丟失原型鏈方法三使用第三方庫lodashscriptsrchttps://cdn.jsdelivr.net/npm/lodash4/lodash.min.js/scriptscriptconstobj{name:Alice,hobbies:[reading,music]};constdeepCopy_.cloneDeep(obj);/script五、異常處理16. 異常處理機(jī)制總結(jié)throw拋出異常信息程序也會(huì)終止執(zhí)行throw后面跟的是錯(cuò)誤提示信息Error對(duì)象配合throw使用能夠設(shè)置更詳細(xì)的錯(cuò)誤信息總結(jié)try...catch用于捕獲錯(cuò)誤信息將預(yù)估可能發(fā)生錯(cuò)誤的代碼寫在try代碼段中如果try代碼段中出現(xiàn)錯(cuò)誤后會(huì)執(zhí)行catch代碼段并截獲到錯(cuò)誤信息messagefinally不管是否有錯(cuò)誤都會(huì)執(zhí)行// 1. throw 拋出異常functionfn(x,y){if(!x||!y){thrownewError(沒有參數(shù)傳遞進(jìn)來);}returnxy;}// 2. try...catch 捕獲異常try{// 可能發(fā)生錯(cuò)誤的代碼constpdocument.querySelector(p);p.style.colorred;}catch(err){// 處理錯(cuò)誤console.log(err.message);}finally{// 無論是否出錯(cuò)都會(huì)執(zhí)行的代碼alert(彈出對(duì)話框);}// 3. debugger 相當(dāng)于斷點(diǎn)調(diào)試六、this 指向與處理17. this 指向規(guī)則普通函數(shù)的 this// 規(guī)則誰調(diào)用this 指向誰// 1. 全局上下文functionglobalFunc(){console.log(this);// 嚴(yán)格模式undefined非嚴(yán)格模式window}globalFunc();// 2. 對(duì)象方法constuser{name:Alice,sayHi(){console.log(this.name);// this 指向?qū)嵗龑?duì)象}};user.sayHi();// Alice// 3. 方法賦值給變量constsayHiuser.sayHi;sayHi();// undefinedthis 指向 window 或 undefined// 4. 事件處理函數(shù)button.onclickfunction(){console.log(this);// 指向 button 元素};箭頭函數(shù)的 this// 規(guī)則繼承外層作用域的 this定義時(shí)確定無法改變constobj{name:Alice,// 普通函數(shù)方法regularFunc:function(){console.log(this.name);// AliceconstinnerArrow(){console.log(this.name);// Alice繼承外層 this};innerArrow();},// 箭頭函數(shù)方法不推薦arrowFunc:(){console.log(this);// 指向外層作用域的 this通常是 window}};// 不適合使用箭頭函數(shù)的場景// 1. 對(duì)象方法this 指向問題// 2. 構(gòu)造函數(shù)不能作為構(gòu)造函數(shù)// 3. 原型方法this 指向問題// 4. 事件處理函數(shù)this 不指向 DOM 元素18. 改變 this 指向call() - 立即執(zhí)行scriptconstobj{uname:pink}functionfn(x,y){console.log(this)console.log(xy)}// fn()// 1. 調(diào)用函數(shù)// 2. 改變this指向fn.call(obj,1,2)/scriptapply() - 立即執(zhí)行數(shù)組參數(shù)scriptconstobj{uname:pink,age:18}functionfn(x,y){console.log(this)console.log(xy)}// 1. 調(diào)用函數(shù)// 2. 改變this指向fn.apply(obj,[1,2])// 3. 返回值 本身就是在調(diào)用函數(shù)所以 返回值就是函數(shù)的返回值// 使用場景 求數(shù)組最大值// const max Math.max(1, 2, 3)// console.log(max)constarr[1,2,3]constmaxMath.max.apply(Math,arr)constminMath.min.apply(Math,arr)console.log(max,min)// console.log(Math.max(arr))console.log(Math.max(...arr))/scriptbind() - 返回新函數(shù)button發(fā)送短信/buttonscriptconstobj{uname:pink,age:18}functionfn(){console.log(this)}// 1. bind 不會(huì)調(diào)用函數(shù)// 2. 能改變this指向// 3. 返回值是個(gè)函數(shù)但這個(gè)函數(shù)的this是更改過的constfunfn.bind(obj)console.log(fun)fun()// 需求有一個(gè)按鈕點(diǎn)擊里面就禁用兩秒鐘之后開啟constbtndocument.querySelector(button)btn.addEventListener(click,function(){// 禁用按鈕this.disabledtruesetTimeout(function(){this.disabledfalse}.bind(this),2000)})/script三者區(qū)別總結(jié)方法調(diào)用方式參數(shù)傳遞返回值應(yīng)用場景call立即調(diào)用逐個(gè)傳遞函數(shù)執(zhí)行結(jié)果借用方法、明確參數(shù)個(gè)數(shù)apply立即調(diào)用數(shù)組傳遞函數(shù)執(zhí)行結(jié)果參數(shù)數(shù)組、數(shù)學(xué)計(jì)算bind不調(diào)用返回新函數(shù)可預(yù)先傳遞部分參數(shù)新函數(shù)永久綁定this事件處理、函數(shù)柯里化七、防抖與節(jié)流19. 防抖Debounce原理事件觸發(fā)后等待一段時(shí)間再執(zhí)行如果在這段時(shí)間內(nèi)再次觸發(fā)則重新計(jì)時(shí)。// 使用 lodash// _.debounce(func, [wait0], [options])// 手寫防抖函數(shù)functiondebounce(fn,t){lettimer;returnfunction(){if(timer)clearTimeout(timer);timersetTimeout(function(){fn();},t);}}20. 節(jié)流Throttle原理事件觸發(fā)后立即執(zhí)行但在指定時(shí)間內(nèi)只執(zhí)行一次。// 使用 lodash// _.throttle(func, [wait0], [options])// 手寫節(jié)流函數(shù)functionthrottle(fn,t){lettimernull;returnfunction(){if(!timer){timersetTimeout(function(){fn();timernull;},t);}}}21. 防抖與節(jié)流的區(qū)別與應(yīng)用場景特性防抖Debounce節(jié)流Throttle原理合并多次操作為一次固定時(shí)間內(nèi)只執(zhí)行一次執(zhí)行時(shí)機(jī)最后一次觸發(fā)后等待一段時(shí)間執(zhí)行固定時(shí)間間隔執(zhí)行重置時(shí)機(jī)每次觸發(fā)都重置計(jì)時(shí)器時(shí)間間隔內(nèi)只執(zhí)行一次應(yīng)用場景搜索框輸入、窗口調(diào)整大小滾動(dòng)事件、鼠標(biāo)移動(dòng)、高頻點(diǎn)擊22. 相關(guān)事件補(bǔ)充視頻播放進(jìn)度保存使用節(jié)流實(shí)現(xiàn)視頻播放進(jìn)度的定時(shí)保存和恢復(fù)。// 定時(shí)保存進(jìn)度video.ontimeupdate_.throttle((){localStorage.setItem(currentTime,video.currentTime);},1000);// 恢復(fù)進(jìn)度video.onloadeddata(){video.currentTimelocalStorage.getItem(currentTime)||0;};總結(jié)JavaScript 進(jìn)階知識(shí)涵蓋了面向?qū)ο缶幊痰暮诵母拍?、原型系統(tǒng)、高級(jí)函數(shù)技巧以及性能優(yōu)化策略。掌握這些內(nèi)容對(duì)于編寫高質(zhì)量、可維護(hù)的 JavaScript 代碼至關(guān)重要面向?qū)ο笏枷霂椭M織復(fù)雜代碼結(jié)構(gòu)原型與繼承是 JavaScript 獨(dú)特而強(qiáng)大的特性深淺拷貝正確處理對(duì)象復(fù)制避免意外修改異常處理提升代碼健壯性this 機(jī)制是理解 JavaScript 執(zhí)行上下文的關(guān)鍵防抖節(jié)流優(yōu)化高頻事件性能