什么是面向?qū)ο螅?/h1>一、 首先面向?qū)ο笥腥筇攸c:
什么是封裝?
1. 封裝:減少代碼冗余,提高代碼重復(fù)利用率
什么是繼承?
2. 繼承:減少內(nèi)存消耗? 重復(fù)使用的代碼寫一遍就行了(子類繼承父類)
什么是多態(tài)?
3. 多態(tài):多態(tài)主要針對繼承,對父類方法重寫,并且子類之間的這個方法表現(xiàn)不一樣,這就叫多態(tài),或者 父類定義一個方法沒去實現(xiàn),由子類去實現(xiàn),并且表現(xiàn)不一樣,這就叫多態(tài)。
4. 目的:生成一些具有功能的對象? 一個叫屬性一個叫方法
二、 重載和重寫:
1. 封裝:減少代碼冗余,提高代碼重復(fù)利用率
2. 繼承:減少內(nèi)存消耗? 重復(fù)使用的代碼寫一遍就行了(子類繼承父類)
3. 多態(tài):多態(tài)主要針對繼承,對父類方法重寫,并且子類之間的這個方法表現(xiàn)不一樣,這就叫多態(tài),或者 父類定義一個方法沒去實現(xiàn),由子類去實現(xiàn),并且表現(xiàn)不一樣,這就叫多態(tài)。
4. 目的:生成一些具有功能的對象? 一個叫屬性一個叫方法
在js里面沒有函數(shù)重載的,但是有函數(shù)重寫
1. 函數(shù)重寫:在js中,因為一旦變量名相同,后者會把前者覆蓋掉
2. 函數(shù)重載:函數(shù)名相同,跟據(jù)參數(shù)類型來決定使用那個函數(shù)。
3. 重載:主要針對的函數(shù)的數(shù)據(jù)類型
對象
那么什么是對象?
對象:任何實體都是對象,擁有屬性和方法兩大特征。
什么是屬性什么是方法呢?
屬性:描述事物的特點。
方法:事物擁有的行為。
如何理解面向?qū)ο螅?br>
面向?qū)ο缶褪峭ㄟ^函數(shù)封裝得到一個類,通過這個類實例出一個子對象,在函數(shù)封裝的過程中,寫在函數(shù)里面的屬性是私有的 寫在prototype里面的是可繼承的公有屬性,實例(對象)在操作自己自己屬性的時候會看屬性是私有的還是公有的,私有的就直接使用,公有的就通過原型鏈(__proto__)查找。
什么是原型鏈:
?????? Duixiang.shuxing的時候首先看這個屬性是不是私有的 私有的就直接使用,如果私有的屬性沒有 就找公有的 公有的有就使用 沒有就按照__proto__找他,的類上有沒有 直到找到基類object 如果object沒有就undefined了 這種查找機(jī)制叫原型鏈。
三、繼承
繼承分es5的七大繼承和es6的繼承
1. 在es5有七大繼承
1. 拷貝
拷貝分為淺拷貝和深拷貝
淺拷貝:其實就是將一個對象的屬性一個一個的復(fù)制到另一個對象中去主要針對第一層的屬性。借助for? in
深拷貝:將屬性值也一個一個的遍歷賦值
2. 原型繼承:
將父類的實例賦給子類的原型,這就是原型繼承,將父類私有和公有都繼承在子類原型上,成為子類的公有屬性
B.prototype=new A()
3. call 繼承:
將父類私有的繼承為子類私有的
4. 冒充對象繼承:
將父類私有和公有都繼承為子類私有的
5. 混合繼承:
私有繼承為私有的,公有的和私有的再次繼承為公有的,混合繼承啊call和原型繼承的結(jié)合,私有的被繼承兩次
6. 組合繼承:
私有繼承私有,公有繼承為公有的
7. 中間類繼承 -->?
使其他數(shù)據(jù)類型也可以使用其他內(nèi)置對象的方法賦值為內(nèi)置類的原型 主要運(yùn)用于參數(shù)
Arguments不是一個數(shù)組,沒有array的哪些自帶的方法,現(xiàn)在我們想arguments有array的哪些方法,將arguments的原型指向array內(nèi)置類的原型。
Es6的繼承
Extends? 繼承
1. 子類繼承父類 使用extends 關(guān)鍵字
2. 代碼塊里 需要使用 super 關(guān)鍵字
3. 子類繼承父類
4. Super 既可以充當(dāng)函數(shù) 也可以充當(dāng)對象
1. 充當(dāng)函數(shù)時,只能在子類的構(gòu)造函數(shù)中使用,且必須放在第一行調(diào)用,指向父類的構(gòu)造函數(shù),只有super 調(diào)用之后,子類才可以使用 this關(guān)鍵字,指向子類的實例對象
2. 充當(dāng)對象時,放在普通函數(shù)中,super 指向父類的原型prototype
3. 放在靜態(tài)方法中 super 執(zhí)行當(dāng)前父類本身
四、數(shù)據(jù)類型
數(shù)據(jù)類型有兩大數(shù)據(jù)類型:
基本數(shù)據(jù)類型和引用數(shù)據(jù)類型(復(fù)合數(shù)據(jù)類型)
基本數(shù)據(jù)類型分:number,string,null,undefined,boolean
引用數(shù)據(jù)類型:object,function,array
二者的區(qū)別:
基本數(shù)據(jù)類型就是簡單的操作值
引用數(shù)據(jù)類型會開辟一個新的內(nèi)存空間把內(nèi)存空間的地址賦值給變量
不管是基本數(shù)據(jù)類型或引用數(shù)據(jù)類型都來源與基類object
二者的值分別保存在那?
基本數(shù)據(jù)類型的值保存在棧內(nèi)存中的簡單數(shù)據(jù)段,按值訪問。
引用數(shù)據(jù)類型的值是指保存在堆內(nèi)存中的對象
數(shù)據(jù)類型能干什么?
不同的數(shù)據(jù)類型有不同的意義和不同的使用方法,就像吃飯的時候用的勺子,碗,筷子等工具一樣,每一樣都有不同的用處,不同的地方使用不同的工具才能很好完成任務(wù)。
五、作用域
1. 首先什么是作用域?
是瀏覽器給js的生存環(huán)境也叫(棧內(nèi)存)
2. 什么時候會有作用域的形成?
瀏覽器天生有一個全局叫window
函數(shù)執(zhí)行時候會形成一個私有的
3. 作用域的分類?
Es5有兩個
1. 分全局作用域
2. 私有作用域
Es6有
3. 沒有塊作用域(ES6有了)
4. 自己對作用域的簡單理解?
*就是一塊地盤 一個代碼塊所在的區(qū)域
*它是靜態(tài)的(相對于上下文對象),在編寫代碼時就確定了,js代碼是從上到下執(zhí)行
5. 作用域的作用是什么?
隔離變量,不同作用域下同名變量不會沖突
6. 作用域和堆內(nèi)存的區(qū)別?
1. 作用域是函數(shù)執(zhí)行的時候產(chǎn)生fn()
2. 函數(shù)執(zhí)行的時候首先會開辟一個新的內(nèi)存空間叫棧內(nèi)存(環(huán)境或作用域)
3. 數(shù)據(jù)類型在賦值的時候會開辟一個新的內(nèi)存空間叫堆內(nèi)存(存放代碼塊的)
二者都會形成一個內(nèi)存地址
7. 作用域鏈和原型鏈的區(qū)別?
原型鏈主要針對對象的屬性來說的
作用域鏈主要針對變量來說的
8. 作用域與執(zhí)行上下文的區(qū)別
1.區(qū)別1
*全局作用域之外,每個函數(shù)都會創(chuàng)建自己的作用域,作用域在函數(shù)定義的時候就已經(jīng)確定了,
N+1 1是全局作用域,
而不是在函數(shù)調(diào)用時。
*全局執(zhí)行上下文是在全局作用域確定之后,js代碼馬上執(zhí)行之前創(chuàng)建
*函數(shù)執(zhí)行上下文環(huán)境是在調(diào)函數(shù)時,函數(shù)體代碼執(zhí)行之前創(chuàng)建
2.區(qū)別2
*作用域是靜態(tài)的,只是函數(shù)定義好了就存在,而且不會再變化
*上下文環(huán)境是動態(tài)的,調(diào)用函數(shù)時創(chuàng)建,函數(shù)調(diào)用結(jié)束時候上下文環(huán)境就會釋放
3.聯(lián)系
*上下文環(huán)境(對象)是從屬于所在作用域
*全局上下文環(huán)境==》全局作用域
*函數(shù)(局部)上下文環(huán)境==》對應(yīng)的函數(shù)使用域
9. 作用域鏈?
????? 函數(shù)內(nèi)部的變量被使用時,首先會在自己的私有作用域下查找是否有這個變量,
有就直接使用,沒有就會向他的上一級查找,父級就使用父級的,父級沒有就會以此繼續(xù)向
上查找直到window為止,window有就使用沒有就is not defined。這種查找機(jī)制我們叫作用域鏈。
10. 變量提升和函數(shù)提升的區(qū)別?
變量提升和函數(shù)提升 都叫預(yù)解釋。都是瀏覽器的。
11. 變量提升?
js執(zhí)行前,瀏覽器會給一個全局作用域window
window分兩個模塊 一個存儲模塊 一個執(zhí)行模塊
存儲模塊 找到所有的var和function關(guān)鍵字給這些變量添加內(nèi)存地址
執(zhí)行模塊 代碼從上到下執(zhí)行 遇到變量就回去存儲模塊查找 有和沒有
有,就看你賦值沒有 賦值了就是后面的值 沒有賦值就是undefined
如果沒找到結(jié)果就是xxx is not defined
Es6的塊級作用域
1. 什么是塊級作用域?
帶{}的都是塊級作用域,if(){} for(){} 對象{},函數(shù)不是塊級作用域,因為函數(shù)本身就是個私有作用域
塊級作用域就是私有作用域
2. 塊級作用域的小知識?
1.Var和function 沒有塊級作用域的這個概念。
2. let和const有塊級這個作用域
3. 作用域是對于變量的
3. 塊級作用域和對象的區(qū)別?
1. 這是個塊級作用域

2. {} 如果想表示對象,不能放在行首,就是前面不能沒東西,如果{} 前面沒有東西 就是塊級作用域。

3. 里面必須加一個() 因為如果不加就是個塊級作用域,我們要把eval轉(zhuǎn)成對象,對象前面不能沒東西

六、閉包
Js有兩大神獸 一是原型 二是閉包
1. 如何產(chǎn)生閉包?
當(dāng)一個嵌套的內(nèi)部(子)函數(shù)引用了嵌套的外部(父)函數(shù)的變量(函數(shù))時(變量值可以是function),
就產(chǎn)生了閉包。
2. 閉包到底是什么?
1. 使用chrome調(diào)試查看
2. 理解1:閉包是嵌套的內(nèi)部函數(shù)(絕大部分人)
3. 理解2:包含被引用變量(函數(shù))的對象(極少數(shù)人)
4. 注意:閉包存在于嵌套的內(nèi)部函數(shù)中
3. 產(chǎn)生閉包的條件?
1. 函數(shù)嵌套
2. 內(nèi)部函數(shù)引用了外部函數(shù)的數(shù)據(jù)(變量/函數(shù))還要執(zhí)行內(nèi)部函數(shù)。
執(zhí)行函數(shù)定義就會產(chǎn)生閉包(不用調(diào)用內(nèi)部函數(shù),但要調(diào)用外部函數(shù))不調(diào)外部函數(shù),內(nèi)部函數(shù)就無法定義。
4. 產(chǎn)生閉包的有幾個條件?
1有外部函數(shù)。
2.有內(nèi)部函數(shù)。
3.內(nèi)部函數(shù)引用外部函數(shù)體。
5. 怎么知道閉包創(chuàng)建幾個?
就看外部函數(shù)執(zhí)行幾次。
6. 閉包的作用?
1. 使用函數(shù)內(nèi)部變量在函數(shù)執(zhí)行完后,依然存活在內(nèi)存中(延長局部變量的生命周期)
2. 讓函數(shù)外部可以操作(讀寫)到函數(shù)內(nèi)部的數(shù)據(jù)(變量/函數(shù))
7. 閉包的生命周期
閉包是個對象,對象是有產(chǎn)生和死亡的。
1. 什么時候產(chǎn)生?
1. 嵌套內(nèi)部函數(shù)定義執(zhí)行完時就產(chǎn)生了(不是在調(diào)用)
2. 執(zhí)行完函數(shù)定義,創(chuàng)建好內(nèi)部函數(shù)對象就產(chǎn)生
2. 什么時候死亡?
1. 包含閉包的函數(shù)對象成為垃圾對象就死亡了。之所以成為垃圾對象是因為引用它的變量不在引用它了。
Var fn = fn()
fn=null?這樣閉包就死亡了
8. 閉包的作用?
1. 延長了外面局部變量的生命周期
2. 分情況可能是一點也可能是缺點
9. 閉包的缺點?(內(nèi)存泄漏)
1. 函數(shù)執(zhí)行完后,函數(shù)內(nèi)的局部變量沒有釋放,占有內(nèi)存時間會變長(這個邊長如果你需要就是優(yōu)點,如果不需要就變成缺點)
2. 容易造成內(nèi)存泄漏
如果用完這個數(shù)組對象不用了就讓f=null最大的數(shù)組對象就被釋放了
如果不釋放array這塊占用了非常大的空間這就叫內(nèi)存泄漏
3. 解決方法
1.能不用閉包就不用
2.及時釋放
八、DomBom http
Dom
1.什么是dom對象?
1. DOM對象 dom的全稱? document object model
2. Dom 主要研究html中的節(jié)點(標(biāo)簽)對節(jié)點進(jìn)行操作,改變標(biāo)簽,改變標(biāo)簽屬性,改變css樣式,添加事件等。Dom研究是的對象是document
2.dom創(chuàng)建的優(yōu)缺點?
優(yōu)點:是一個獨立的個體,不會影響到原有的元素
缺點:處理數(shù)據(jù)量過大會比較麻煩,會造成DOM回流。
3.什么是Dom回流?
頁面渲染時,我們對html結(jié)構(gòu)簡單的增刪查改時,瀏覽器會對所有的dom進(jìn)行重新排列,這就是Dom回流,嚴(yán)重影響瀏覽器的性能。
4. DOM2級中標(biāo)準(zhǔn)瀏覽器和非標(biāo)準(zhǔn)瀏覽器的區(qū)別
①寫法? 標(biāo)準(zhǔn):addEventlistener??? 非標(biāo)準(zhǔn):attachEvent
②前者指向觸發(fā)事件的元素? 后者指向window
③前者不帶on???后者帶on
④attachEvent只用在ie8以下??? addEventlistener只用在標(biāo)準(zhǔn)瀏覽器下
⑤attachEvent只有冒泡沒有捕獲?? addEventlistener有冒泡也有捕獲
5. DOM0級和DOM2級的區(qū)別
①DOM0級如果綁定多個相同的事件 后者會覆蓋前者 dom2級不會
②DOM0級只適合普通事件 DOM2級還有指定的事件類型
如DOMContentLoaded(當(dāng)html文檔結(jié)構(gòu)加載完成之后執(zhí)行)這個事件就是jquery中的$(document).ready()
③事件取消DOM0級直接賦值null就ok了?DOM2級事件需要使用div.removeEventListener( )
6. Dom 有幾種事件綁定寫法?
1. dom0級? div.onclick=function(){}
2. dom2級? addEventlistener('click',function(){},false)
Bom
1.? 什么是bom?
瀏覽器對象模型,本質(zhì)也是一個對象,而這個對象的大量方法都存在window下
http
1. http:是互聯(lián)網(wǎng)上應(yīng)用最廣泛的一種網(wǎng)絡(luò)協(xié)議,是一個客戶端和服務(wù)器端請求和應(yīng)答的標(biāo)準(zhǔn)(TCP),用于從www服務(wù)器傳輸超文本到本地瀏覽器的協(xié)議,
2. 作用:它可以是瀏覽器更加高效,使網(wǎng)絡(luò)傳輸減少
3. https:是以安全為目標(biāo)的http通道,簡單就是http的安全版,即http下加入ssl安全層,https的安全基礎(chǔ)是ssl。
4. ssl:是為網(wǎng)絡(luò)通信提供安全即數(shù)據(jù)完整性的一種安全協(xié)議
5. https的作用:
1、建立一個信息安全通道,來保證數(shù)據(jù)傳輸?shù)陌踩?/p>
2、確認(rèn)網(wǎng)站的真實性
6. http和https的區(qū)別?
1、http是超文本傳輸協(xié)議,信息是明文傳輸,https具有安全性的ssl加密傳輸協(xié)議
2、http和https使用的是完全不同的連接方式,用的端口也不一樣,前者是80,后者是443
3、http的連接很簡單,是無狀態(tài)的,https是由ssl+http協(xié)議構(gòu)建的可進(jìn)行加密的傳輸,身份驗證的網(wǎng)絡(luò)協(xié)議就是比http安全
什么是無狀態(tài)?
??????? 指協(xié)議對于事物處理沒有記憶功能,直觀的說每個請求都是獨立的,與前面的請求和后面的請求沒有直接聯(lián)系
九:總結(jié)排序的算法,查找,排序,二分查找,冒泡排序
1. 冒泡排序
var arr=[45,26,15,54,36,8,4];
var num=null
for(var j=arr.length-1;j>=0;j--){
//for(var k=0;k
?????? //for(vari=0;i
?????? for(vari=0;i<=j;i++){
????????????? if(arr[i]>arr[i+1]){
???????????????????? num=arr[i];
???????????????????? arr[i]=arr[i+1];
???????????????????? arr[i+1]=num
????????????? }
?????? }
}
2.二分查找
先對數(shù)據(jù)排序,找出中間的那個數(shù),拿中間的數(shù)和查找的數(shù)進(jìn)行對比
//如果我想找67是否在我的這個數(shù)組中,該怎么找???
//二分查找是什么意思?
//把所有的索引除2,然后取爭找到得到結(jié)果,比如是4,就截取第四個數(shù),把后面拋棄
//然后繼續(xù)加所有的索引然后除2,取爭截取,一直找到或找不到那個數(shù)
????var arr=[2,12,23,34,45,56,67,84,90];
????var stindex=0;//從0開始,索引
????var endind=arr.length;//把arr數(shù)組的長度賦給endind,結(jié)束索引
????var findnum=prompt(); //輸入框
????//第一次比較算出中間的
????var middel=Math.floor((stindex+endind)/2);
//什么時候剩下兩個數(shù)字,
//這個while中間值,不能為第一個也不能為最后一個,說名沒找到
????while(stindex!==middel&&endind!==middel){
????????console.log(1)
//拿中間那個數(shù)給67比較如果大于
????????if(arr[middel]>findnum){
????????????endind=middel;
????????}else if(arr[middel]<findnum){
????????????stindex=middel;
????????}else if(arr[middel]==findnum){
????????????break;
????????}
????????middel=Math.floor((stindex+endind)/2)
????}
????if(arr[middel]==findnum){
????????document.write("找到了");
????}else{
????????document.write("沒找到")
????}
//var sindex=0;//從0開始
//var
endindex=arr.length;//數(shù)組的長度 10
//var findnum=67;//判斷一個這個數(shù)字有沒有
////第一次比較,找到中間的那個
//var
middle=Math.floor((sindex+endindex)/2)
//
////while終止的條件1,當(dāng)我中間數(shù)為初始值或者最后的索引值時候條件終止
////條件1中間數(shù)的索引0和1就終止 沒有找到
////條件2找到了break
//while(sindex!==middle&&endindex!==middle){
//??if
(arr[middle]>findnum) { //比如當(dāng)要找67如果找的中間那個數(shù)大于67,說明找到了,不大于說明還在前面
////就把找的后面的值拋棄,重新賦值從5開始在找
//??????endindex=middle;
//??}else
if(arr[middle<findnum]){
//??????sindex=middle;
//??????
//??}else
if(arr[middle]==findnum){
//??????break;
//??}
//??middle=Math.floor((sindex+endindex)/2);
//}
//if(arr[middle]==findnum){
//??document.write('找到了')
//}else{
//??document.write("沒找到")
//}
//什么時候剩下兩個數(shù)字 sindex開始值,當(dāng)sindex開始值
//剩下兩個數(shù)字就結(jié)束了分兩種情況
//1.能找到,找到情況下 最低是有三個數(shù)字,高的有5個,9個等。。
//2.找不到,是兩個值
十、性能優(yōu)化
1.提升頁面性能優(yōu)化?
1.? 多采用雪碧圖
2.? 阻止超鏈接 a 的默認(rèn)行為
3.? ?減少Dom回流
4.? ?減少向服務(wù)器請求的次數(shù)
5. 適當(dāng)使用緩存
6. 使用無cookie域名加載靜態(tài)資源;
7. 讓AJAX請求可緩存;
8. 減少網(wǎng)絡(luò)請求,合并請求,包括JS、CSS,使用雪碧圖CSS Sprite,內(nèi)聯(lián)小圖片使用Base64
2. 服務(wù)器端
1. 把CSS放在Head中加載,這樣可更早開始加載,避免閃屏;
2. 把JS放在Body末尾加載,因為JS腳本文件加載時會阻塞html和css渲染;
3. 不使用css表達(dá)式;
4. 用外聯(lián)方式引用css和js,減少html體積
5. 壓縮js和css,刪除不必要的注釋和空
6. 不要重復(fù)加載js
7. get方式發(fā)起ajax請求;
8. 延時加載-懶加載,關(guān)鍵資源優(yōu)先加載;
9. 減少Dom節(jié)點;
10. 避免使用Iframe,必要時可采用load;
11. 盡量減少cookie體積,因為cookie請求時會被帶上;
12. 減少Js中的Dom訪問;
13. 充分使用JS事件機(jī);
14. 使用常見的圖片優(yōu)化手段(pngcrush、jpegtran、pngquant);
15. 盡量不在html中縮放圖片;
16. 盡量不要把img的src置空;
17. 任何資源都要在25k以內(nèi)。