Js DOM BOM Jquery Vue筆記課件資料

張東

準備三樣東西：

1.書-犀牛書:JavaScript權(quán)威指南

2.微信公眾號：前端大全

3.上屆筆記：

共享資料：不需要外網(wǎng)，且沒有限制

用戶名：tarenacode

密碼：code_2015

規(guī)矩：禁止記筆記

第三階段：

1.JS高級:JS最核心的原理——畫圖8天

思維導圖：

2.D0M:專門操作網(wǎng)頁內(nèi)容的一套對象和函數(shù)4天

增刪改查事件綁定

思維導圖：

3.jQuery:DOM的簡化版-PC4天

思維導圖：

4.Vue:前端開發(fā)的終極簡化-5天

思維導圖：

按照PPT234三頁，安裝和配置regexpbuddy軟件

正課：

1.正則表達式：

2.字符串的正則函數(shù)：

二.字符串的正則函數(shù)

1.查找敏感詞:4種：

(1).查找一個固定的敏感詞在字符串中的位置：

a.vari=str.indexOf("敏感詞"，fromi)

位置〈-的〈-敏感詞

b.在str中從fromi位置開始找下一個"敏感詞,'的位置

c.返回值：

1),如果找到敏感詞，返回敏感詞第一個字在字符串中的下標位置

2).如果沒找到敏感詞，返回-1

d.如果從頭(0位置)開始找，可省略第二個參數(shù)fromi。不寫fromi,默認就是從0位置

開始。

e.問題：只能查找一個固定的敏感詞，只要敏感詞內(nèi)容發(fā)生變化，就找不到了！

(2).用正則表達式模糊查找敏感詞的位置：

a.vari=str.search(/正貝l]/i)

b.在str中查找第一個符合正則要求的敏感詞的位置

c.返回值：同indexOf

1).如果找到，返回敏感詞第一個字的位置

2).如果沒找到，返回-1

d.問題1：所有正則默認是區(qū)分大小寫的！

解決：在第2個/后加i表示ignore忽略

e.問題2:只能獲得敏感詞的位置，無法獲得敏感詞的內(nèi)容

(3),查找敏感詞的內(nèi)容：

a.vararr=str.match(/正則/i);

b.在str中查找第一個符合正則要求的敏感詞的內(nèi)容和位置

c.返回值：

1).如果找到，返回一個數(shù)組，包含兩個元素：

arr:[0:"敏感詞內(nèi)容"，"index":"位置"]

〃arr["O"]arr["index"K>

I如果是數(shù)字如果是字符串

I可省略""

可改為.index

、arr[O]arr.index/

2).如果沒找到，返回null

2.替換敏感詞

3.切割字符串

作業(yè)：

1.編寫一個正則表達式，可防住：微信weixinwx同時兩個字中間加不加空格應(yīng)該都能

防住。

2.百度一個自己可以看懂并記住的驗證電子郵件格式的正則表達式

第二天

正課：

1.String的正則函數(shù)

2.RegExp對象

3.Function

一.String的正則函數(shù)：

1.查找敏感詞:4種：

(1),查找一個固定的敏感詞出現(xiàn)的位置：

vari=str.indexOf("敏感詞"[,fromi])

(技術(shù)手冊中，參數(shù)中的口，代表可選)

(2).用正則表達式模糊查找一個敏感詞的位置：

vari=str.search(/正貝lj/i);

(3).查找敏感詞的內(nèi)容:2種：

a,只查找一個敏感詞的內(nèi)容和位置：

vararr=str.match(/正貝lj/i)

arr:[0:"敏感詞的內(nèi)容"，"index":敏感詞所在位置]

如果沒找到，返回null

問題：一次只能查找一個敏感詞

b.查找所有敏感詞的內(nèi)容：

1).只要在第二個/后加g意思是global全部

2).問題：一旦加g,就只能返回敏感詞的內(nèi)容，無法返回位置了!

3).vararr=str.match(/正貝lj/ig)

4),返回值：

i.如果找到敏感詞，就返回：

arr:[敏感詞1,敏感詞2,...]

ii.如果沒找到敏感詞，返回null

(4),既查找每個關(guān)鍵詞的內(nèi)容，又查找每個關(guān)鍵詞的位置

單靠string自己的函數(shù)無法完成

要用RegExp對象的exec函數(shù)

返回值規(guī)律:

如果函數(shù)返回的是下標i,則找不到都返回-1

如果函數(shù)返回的是數(shù)組，則找不到都返回null

強調(diào)：如果一個函數(shù)有可能返回null,那么這個函數(shù)的執(zhí)行結(jié)果，決不能直接使用！必須

先驗證不是null,才能用！如果是null,必須提供備選方案！

2.替換敏感詞:2種

(1),簡單替換：將所有敏感詞都替換為統(tǒng)一的新值

a.str=str.replace(/正則/ig,"新值")

b.查找str中所有符合正則要求的敏感詞，替換為統(tǒng)一的新值。

c.問題:js語言中字符串是不可變類型！字符串的所有函數(shù)，都無權(quán)修改原字符串，只

能返回修改后的新字符串，原字符串保持不變!所以，今后只要想獲得字符串修改后的新值，

必須自己用標量=接住函數(shù)返回的新字符串！

d.問題：如果不加g,replace默認只能替換第一個敏感詞。所以，今后，只要找到一組

以上的敏感詞，要替換，都要加g,表示必須替換完所有才可以下班！

(2).高級替換：根據(jù)每個敏感詞的不同，動態(tài)選擇不同的新值替換！

a.str=str.replace(/正貝!j/ig,function(keyword){

return根據(jù)本次獲得的不同keyword返回不同的新值

})

b.原理：

1).replace中每遍歷到一個keyword,就會自動調(diào)用一次回調(diào)函數(shù)function。--信

任！

2),每次調(diào)用函數(shù)時，都會自動傳入本次找到的敏感詞內(nèi)容給形參keyword信

任！

3),在函數(shù)內(nèi)，由我們自己寫的代碼對本次拿到的敏感詞keyword進行加工，然后

返回要替換的新值！

4).replace會自動將本次函數(shù)調(diào)用返回的新值替換到本次敏感詞的位置上！一一信

任！

回調(diào)函數(shù)callback:

雖然是自己定義的函數(shù)，卻不是自己親自調(diào)用，而是交給其他函數(shù)去調(diào)用！將來，調(diào)

用幾次，每次調(diào)用傳入什么值，與咱們無關(guān)！

比如：對數(shù)組中的數(shù)字元素升序排列

arr.sort(function(a,b){returna-b})

難點：看不見何時執(zhí)行，執(zhí)行了幾次！

學習方法：在回調(diào)函數(shù)中加入輸出語句，讓回調(diào)函數(shù)的執(zhí)行過程和參數(shù)值，都顯示出

來！

(3).衍生操作：刪除敏感詞，其實就是將敏感詞替換為空字符串

3.切割字符串：2種：

切割：將一個字符串，按照指定的切割符，切割為多段子字符串。

(1).簡單切割：切割符是簡單的固定的

a.vararr=str.split("切害府)

b,將字符串str,按其中的"切割符"，切割為多段子字符串，保存進數(shù)組中返回。

c.強調(diào)：切割后，結(jié)果中不再包含切割符

(2).復(fù)雜切割：切割符是復(fù)雜的變化的

a.vararr=str.split(/正則/i)

b,將字符串str,按符合正則表達式要求的"切割符"，切割為多段子字符串，保存進數(shù)

組中返回。

(3).常用操作：打散字符串為字符數(shù)組

a.為什么：有時我們需要對字符串執(zhí)行數(shù)組常用的操作，比如，翻轉(zhuǎn)，排序。。。但是,

字符串家沒有這些函數(shù)

b.解決：將字符串打散為字符數(shù)組，就可以用數(shù)組家的函數(shù)了。只不過，處理完，記得

再拼回字符串。

c.如何：vararr=str.split("")

二.RegExp對象：

1.什么是：專門保存一條正則表達式，并提供使用正則表達式執(zhí)行驗證和查找操作的函數(shù)

的對象

2.何時：只要在程序中使用正則表達式，都要先創(chuàng)建正則表達式對象，再使用。

3.如何：

(1).創(chuàng)建:2種：

a.如果正則表達式是固定不變的:varreg=/正則/ig;

b.如果正則表達式需要根據(jù)其他數(shù)組等動態(tài)生成：

1).問題:〃之間是正則表達式的地盤，不能寫js語句。所以，在〃之間無法用程序

動態(tài)生成正則表達式。

2).varreg=newRegExp("正貝！T'Jig'')

3),創(chuàng)建一個正則表達式對象，其中保存一條正則表達式

4).newRegExp。創(chuàng)建出的正則表達式和用〃出的完全一樣

5).因為newRegExp()要求用字符串形式的正則表達式來創(chuàng)建對象，所以不用加〃

(2).RegExp對象提供的函數(shù)：

a.驗證字符串的格式：

1).varbool=reg.test(str)

2),意思是：用正則表達式reg,去檢查字符串str是否符合正則表達式的要求

3).如果符合要求，就返回ture,否則就返回false!

4),坑：正則表達式，默認只要在str中找到部分匹配的內(nèi)容，就返回true,不要求

完全匹配

5).解決：今后只要是驗證，都要在正則中前加入后加$,表示從頭到尾，必須完全

匹配！

b.查找敏感詞：既查找每個敏感詞的內(nèi)容，又查找每個敏感詞的位置：

1).vararr=reg.exec(str)

2).意思是：在str中查找符合reg要求的下一個敏感詞

3),返回值：和match不加g時完全一樣

i.如果找到：只返回本次找到的一個敏感詞的內(nèi)容個位置，放在一個數(shù)組中：

arr:[0:"敏感詞內(nèi)容",index:"敏感詞位置"]

ii.如果沒找到，返回null

4).原理：

i.exec每找到一個敏感詞，就在數(shù)組中0位置放入本次敏感詞的內(nèi)容，在數(shù)組index

位置放入本次敏感詞的位置。

ii.exec每找到一個敏感詞還會修改正則表達式reg對象內(nèi)部的一個lastindex為當

前位置+敏感詞.length。因為lastindex控制著下次開始的位置，所以下次exec執(zhí)行時，自動

就可以跳過本次找到的敏感詞向后找。

iii.每找到一個新的敏感詞，就覆蓋舊的數(shù)組中的敏感詞，所以exec一次只能返回

一個當前敏感詞的內(nèi)容和位置。

|/小[\u4e00-\u9fa5]/g,lastlndex=O

下次開始的位置

老師:請用小紅我的朋友造句。小亮:小紅是我的朋友。

③reg.lastlndex=l6+小亮.length

第三天

正課：Funtion

1.復(fù)習函數(shù)

2.重載

3.匿名函數(shù)

4.作用域和作用域鏈

5.***閉包

一.復(fù)習函數(shù)：

1.什么是函數(shù)：

(1).用法：保存一段可重用的代碼段的程序結(jié)構(gòu)，再起一個名字。

(2).本質(zhì)：內(nèi)存中保存一段代碼段的對象

2.何時：任何重用的代碼，必須封裝在一個函數(shù)中，再反復(fù)使用函數(shù)。——DRY(Don'trepeat

yourself)

3.如何：

(1).創(chuàng)建:3種：

a.用聲明方式創(chuàng)建：

function函數(shù)名(形參列表){

函數(shù)體；

return返回值；

}

1).形參：

i.什么是：函數(shù)中專門接受外部傳入函數(shù)內(nèi)的值的局部變量

ii.何時：如果一個函數(shù)內(nèi)不確定某些數(shù)據(jù)，需要外部傳入才能正常執(zhí)行時，就要用

形參

iii.為什么：讓函數(shù)變得更靈活

iv.調(diào)用函數(shù)時，實參向形參傳值，其實等效于賦值！

2),返回值：

i.什么是：函數(shù)中的執(zhí)行結(jié)果，返回到函數(shù)外部

ii.何時：調(diào)用者需要獲得函數(shù)中的執(zhí)行結(jié)果時，才用返回值

iii.return,其實可以單用！表示退出函數(shù)的意思。

breakvsreturn

break只退出循環(huán)

return會退出整個函數(shù)

3).問題：會被整體聲明提前

i.什么是聲明提前：

在程序開始執(zhí)行前

先將var聲明的變量和function聲明的函數(shù)，提前到當前作用域的頂部集中創(chuàng)

建

賦值留在原地

ii.問題：破壞了程序原有的執(zhí)行順序

b.用賦值方式創(chuàng)建函數(shù)：

var函數(shù)名=function(}

1).使用上，與聲明方式創(chuàng)建出的函數(shù)用法完全相同

2),好處：不會被聲明提前

3),揭示：函數(shù)其實也是一個對象

函數(shù)名只是一個變量

函數(shù)名通過函數(shù)對象的地址引用這函數(shù)對象

c.用new創(chuàng)建：

var函數(shù)名=newFunction("形參1","形參2",.,"函數(shù)體")

二.重載(overload):

1.什么是：相同函數(shù)名，不同形參列表的多個函數(shù)，在調(diào)用時，可自動根據(jù)傳入實參值得不

同，自動匹配對應(yīng)的函數(shù)執(zhí)行

2.為什么：減少函數(shù)名的個數(shù)，減輕調(diào)用者的負擔

比如:數(shù)組中：arr.splice(5,l)刪除

arr.splice(5,0,100)插入

arr.splice(5,1,100)替換

3.何時：只要一項任務(wù)可能根據(jù)傳入?yún)?shù)的不同，執(zhí)行不同的邏輯時，就要用重載

4.如何：

(1).問題:js語法默認不支持重載！因為js中不允許多個同名函數(shù)同時存在。如果存在，

最后一個函數(shù)會覆蓋之前所有！只有最后一個函數(shù)可以留下來！

(2).解決:js借助arguments對象來變通實現(xiàn)重載效果

a.什么是arguments:每個函數(shù)內(nèi)自帶的，自動接收所有傳入函數(shù)的實參值的類數(shù)組對

象。

b.類數(shù)組對象：長得像數(shù)組的對象

1).相同點:1,下標，2..length,3.用for遍歷

2),不同點：類型不同，所以不能使用數(shù)組加的函數(shù)

c.如何使用：

1),只定義一個函數(shù)，且不要給形參變量！

2),在函數(shù)內(nèi)根據(jù)arguments的長度或內(nèi)容，判斷執(zhí)行不同的操作

d.以后要不要定義形參？一定要寫形參，只有重載時，才被迫省略形參

1),告訴調(diào)用者如何使用該函數(shù)

2).形參變量名是見名知意的

3),自己起的形參名都短！

三.匿名函數(shù)：

1.什么是匿名函數(shù)：創(chuàng)建函數(shù)名不起名的函數(shù)

2.為什么：節(jié)約內(nèi)存！

3.何時：只要一個函數(shù)只使用一次，不會重復(fù)使用，都要首選匿名函數(shù)

反之，如果一個函數(shù)可能被反復(fù)使用，就必須起名字

4.如何:

(1).回調(diào)函數(shù)：

(2),匿名函數(shù)自調(diào)：

a.什么是匿名函數(shù)自調(diào)：定義一個函數(shù)后，立刻調(diào)用自己

b.為什么：避免使用全局變量：因為即使不用，也不會釋放！且容易造成全局污染！

c.何時：今后所有js代碼都必須包裹在匿名函數(shù)自調(diào)中

無非是包在一個大的匿名函數(shù)中，還是包在多個小的匿名函數(shù)中

d.如何:(function(形參列表){...}乂實參值列表)；

e.結(jié)果：定義后自動調(diào)用。調(diào)用后，因為函數(shù)沒有變量引用著，所以用完就釋放了！函

數(shù)中的內(nèi)容，跟著就釋放了！

f.匿名函數(shù)前后，必須都要加分號。

g.其它寫法：

(function(形參列表){...}())

+function(形參列表){...}(實參值列表)

Ifunction(形參列表){…}(實參值列表)

因為+和!都是一種運算符，只要是運算符后跟著的表達式，js引擎都會自動執(zhí)行其

后的內(nèi)容

四.作用域(scope)和作用域鏈：

1.什么是作用域：

(1).作用：一個變量的可用范圍

(2).本質(zhì)：作用域其實是一個保存變量的對象

2.為什么：避免不同范圍之間的變量互相干擾

3.包括:2級

(1).全局作用域：

a.什么是：所有程序都可訪問到的范圍

b.全局作用域其實就window對象：所有在全局范圍聲明的變量和函數(shù)都是保存在

window對象中的成員。

c.放在全局作用域中的變量稱為全局變量：

1).優(yōu)：不會被釋放，可反復(fù)使用！隨處可用！

2).缺：可能造成內(nèi)存泄漏，且會造成全局污染

d.何時：如果希望一個變量跨多個函數(shù)公用，且反復(fù)使用時，就要用全局變量。

(2).函數(shù)作用域：

a.什么是：僅在函數(shù)內(nèi)部可用的范圍，稱為函數(shù)作用域

b.函數(shù)作用域是什么對象？

1).函數(shù)作用域其實是一個在函數(shù)對象外部臨時創(chuàng)建的一個對象。

2).函數(shù)的生命周期：

i.定義函數(shù)時：每個函數(shù)就己經(jīng)保存了自己的"好友列表"一一其中保存著自己可用

的作用域都有哪些

普通函數(shù)的好友列表中，都有兩個格子。離自己遠的格子中保存著全局作用域

windowo而暫時閑置著離自己近的格子。

ii.調(diào)用函數(shù)時：

js引擎會在函數(shù)對象外部為本次調(diào)用臨時創(chuàng)建一個作用域?qū)ο笠灰缓瘮?shù)作用域?qū)?/p>

象(ActivedObject),并且將這個對象的地址保存到離函數(shù)近的格子里。

js引擎會在函數(shù)作用域?qū)ο笾斜４婧瘮?shù)內(nèi)部所有的局部變量和值

當函數(shù)執(zhí)行過程中，使用變量時，會按照先局部再全局的順序查找變量使用：如果

在局部找到，就用局部的。除非局部沒有找到，才去全局找。

iii.當函數(shù)調(diào)用后，會釋放本次調(diào)用臨時創(chuàng)建的函數(shù)作用域?qū)ο?。導致函?shù)作用域

中的所有局部變量一起釋放了！但是函數(shù)對象依然存在。可重復(fù)使用。

(3).js中沒有塊級作用域：

什么是塊級作用域:其它語言中這些{}

a.if(){…}else{...},for(){},while(){};do{}while(),

也是一級作用域，。內(nèi)的變量，出了。就不能用。

比如:Java中：

if(bool){

vara=10;

}else{

vara=100;

}

console.log(a)〃報錯!

比如：計算從1加到100

for(vari=l,sum=0;i<=100;i++){sum+=i}

console.log(sum);〃報錯！

b.js中，以上程序塊的{}都不是作用域，{}內(nèi)的變量，出來依然可用！

if(bool){

vara=10;

}else{

vara=100;

)

console.log(a)〃正常輸出a的值

比如:計算從1加到100

vari=l,sum=0;i<=100;i++){sum+=i

console.log(sum);//5050

4.作用域鏈：函數(shù)對象上保存所有可用的作用域?qū)ο蟮膕copes集合(好友列表)，就是這個函

數(shù)的作用域鏈

(1).作用域鏈是在定義函數(shù)時就已經(jīng)確定的，和將來在哪里調(diào)用無關(guān)！

(2).作用域鏈保存著函數(shù)可用的所有變量。只要不在作用域鏈上的變量，函數(shù)無法使用

(3).作用域鏈控制著變量的使用順序：先局部，后全局

五.閉包

1.什么是閉包：

(1).用途：既重用一個變量，又保護變量不被污染的一種機制

(2).本質(zhì)：閉包其實是一個受到保護的隱藏的作用域?qū)ο?/p>

2.為什么：全局變量和局部變量都有不可兼得的優(yōu)缺點：

(1).全局變量：優(yōu)：可重用；缺：極易被污染

(2),局部變量：優(yōu)：僅函數(shù)內(nèi)可用，不會被污染

缺：無法重用！

3.何時：既重用變量，還要保護變量不被污染的時候，就用閉包

4.如何:

(1).用外層函數(shù)包裹要保護的變量和內(nèi)層函數(shù)

(2).外層函數(shù)將內(nèi)層函數(shù)返回到外部

(3).使用者需要調(diào)用外層函數(shù)才能獲得返回的內(nèi)層函數(shù)對象，反復(fù)使用

5.結(jié)果：受保護的變量可以被反復(fù)使用，并且不受外部的污染

6.閉包如何形成：內(nèi)層函數(shù)的作用域鏈引用著外層函數(shù)的函數(shù)作用域?qū)ο螅瑢?/p>

致外層函數(shù)的作用域?qū)ο鬅o法釋放，形成閉包！

7.閉包的缺點：閉包的函數(shù)比普通函數(shù)多占用內(nèi)存空間

8.如何釋放：給引用內(nèi)層函數(shù)的變量賦值為null,導致內(nèi)層函數(shù)對象釋放，導致外層函數(shù)的

作用域?qū)ο笠黄疳尫帕恕?/p>

9.鄙視：畫簡圖：找3樣東西

(1).受保護的變量是誰？(紅包)

(2).外層函數(shù)共生了幾個內(nèi)層函數(shù)？(媽媽一次生了幾個孩子)

(3),外層函數(shù)被調(diào)用了幾次？(媽媽生了幾次孩子)

結(jié)論：媽媽一次生出的多個孩子，公用同一個紅包

媽媽多次生出的孩子，分別使用給自的紅包

作業(yè)：

1.統(tǒng)計一個字符串中每種字符出現(xiàn)的次數(shù)？

出現(xiàn)次數(shù)最多的是哪個字？共出現(xiàn)幾次？

2.varliang="liang";

liang.money=10;

console.Iog(liang.money);//?

3.復(fù)習思維導圖：運算符和表達式中所有隱式轉(zhuǎn)換！

4.定義函數(shù)add,可以計算任意多個數(shù)字的和

functionadd(){...}

console.log(add(l,2,3))〃6

console.log(add(l,2,3,4,5))//15

console.log(add(l,2,3,4))//10

5.作業(yè)：看視頻，畫圖，判斷輸出結(jié)果；

vara=10;

functionfun(){

console.log(a)

}

(function(){

a=100;

fun();//100

})()；

6.作業(yè)：定義一個函數(shù)getNum(),每調(diào)用一次，返回一個遞增的不重復(fù)的整數(shù)，且不能受外

部干擾

〃假設(shè)用n保存序號

getNum()//l

getNum()//2

n=0

getNum()//3

getNum()//4

7.判斷輸出：

functionfun(){〃媽媽是誰？

〃紅包是誰？里邊有多少錢？

for(vari=O,arr=[];i<3;i++){

〃函數(shù)如果只定義，沒調(diào)用，就不執(zhí)行其中的內(nèi)容！

arr[i]=function(){console.log(i)}

)

returnarr;〃共生了幾個孩子

}

varfuns=fun();〃媽媽生了幾次

funs[0]();//?

funs[l]();//?

funs[2]();//?

第四天

正課：面向?qū)ο?/p>

1.什么是面向?qū)ο?/p>

2.封裝

3.繼承

一.什么是面向?qū)ο螅?/p>

L什么是對象：

(1).用途：程序中描述現(xiàn)實中一個具體事物的屬性和功能的程序結(jié)構(gòu)

(2).本質(zhì)：內(nèi)存中一塊集中存儲多個屬性和功能的存儲空間，再起一個名字

2,為什么：為了大量數(shù)據(jù)的管理和維護

3.何時：今后所有程序因為不可能只維護一樣東西，都是要維護很多數(shù)據(jù)，所以都要用面向

對象來開發(fā)。

4.如何：面相對象三大特點：封裝，繼承，多態(tài)

二.封裝：

1.什么是：將一個事物的屬性值和功能集中存儲到一個對象中保存。

2,為什么：為了大量數(shù)據(jù)的管理和維護

3.何時：只要使用面向?qū)ο箝_發(fā)，都要先封裝對象，再按需使用對象中的成員

4.如何創(chuàng)建對象:3種：

(1).只創(chuàng)建一個對象：

a.如何:var對象名={

屬性名：屬性值，

方法名：function(){

)

}

b.問題：對象內(nèi)自己的函數(shù)中，想訪問對象自己的屬性，如果什么前綴也不加，報not

defined錯誤!找不到!

因為：任何函數(shù)默認只能在自己的好友列表中查找變量使用。雖然方法是在對象內(nèi)

創(chuàng)建，但是對象的{}不是一級作用域，所以對象中方法的好友列表中是不包含對象自己的屬

性的。所以，方法內(nèi)無法直接使用屬性名來訪問屬性。

c.不好的解決：在方法中寫死"對象名.屬性名"

為什么：緊耦合，一旦對象名改變，而忘記修改內(nèi)部的對象名，就會出錯！必須內(nèi)外

對象名同時修改，保持一致，才能正確執(zhí)行。

d.好的解決:this

1).什么是：當函數(shù)調(diào)用時，自動生成的，指向正在調(diào)用函數(shù)的.前的對象的關(guān)鍵詞

2).為什么：對象自己的方法都無法直接訪問自己的屬性

3).何時：只要對象自己的方法中要使用自己的成員時，都要用this!

4).原理:this會自動指向正在調(diào)用該函數(shù)的.前的對象

5).鄙視:this和定義在哪兒毫無關(guān)系！只和誰在調(diào)用函數(shù)有關(guān)！只有在函數(shù)調(diào)用時，

才能確定this!

(2).如果在創(chuàng)建對象時，暫時不知道對象的內(nèi)容，可以分兩步創(chuàng)建對象

a.先創(chuàng)建一個空對象：varobj={};〃newObject。

new和()，只要寫任意一個就行。但是不能都省略！

b.再添加新屬性：今后，為一個已有對象中添加新屬性，都是用強行賦值的方式添加：

obj.屬性名=新值

obj.方法名=function(){...}

js中為一個不存在的屬性強行賦值，不但不報錯，還會自動創(chuàng)建該屬性。

揭示了：一切對象底層其實都是關(guān)聯(lián)數(shù)組

1),都有下標可以訪問每個成員：

ariT'下標名"]=>都可簡寫為：arr.下標名

arr.下標名會被自動翻譯為標準寫法:arr「下標名”]

obj["屬性名"]=>都可簡寫為:obj.屬性名

obj.屬性名會被自動翻譯為標準寫法:obj["屬性名"]

何時使用口，何時使用.？

如果屬性名是寫死的，首選.

如果屬性名是需要動態(tài)從變量獲得，就必須用口，還不能加""

2),訪問一個不存在的下標位置，都不會報錯，而是返回undefined

3).都可隨時向一個不存在的位置強行賦值，來自動添加該新元素。

4),都可用forin循環(huán)遍歷，不能用for循環(huán)遍歷

(3).反復(fù)創(chuàng)建多個相同結(jié)構(gòu)的對象：用構(gòu)造函數(shù):

a.什么是構(gòu)造函數(shù)：專門定義同一類型的所有對象的同一結(jié)構(gòu)的函數(shù)

b.何時：反復(fù)創(chuàng)建多個相同結(jié)構(gòu)的對象，都要用構(gòu)造函數(shù)

c.為什么：代碼重用，重用結(jié)構(gòu)

d.如何:2步：

1),定義構(gòu)造函數(shù)來定義同一類型多個對象的同一成員結(jié)構(gòu)

function類型名(形參列表){

this.屬性名=形參；

this.方法名=function(){

…this.屬性名…

)

}

類型名通常是一個名詞，且首字母大寫!

2).調(diào)用構(gòu)造函數(shù)反復(fù)創(chuàng)建多個同一類型的對象

varobj=new構(gòu)造函數(shù)(實參值列表)；

3),結(jié)果：在內(nèi)存中創(chuàng)建了一個包含規(guī)定屬性結(jié)構(gòu)的對象，且屬性值為調(diào)用構(gòu)造函

數(shù)時傳入的實參值。

4).原理：new的原理:4件事：

i.創(chuàng)建一個新的空對象

ii.自動設(shè)置當前子對象繼承構(gòu)造函數(shù)的原型對象(自動設(shè)置子對象的__proto_一屬

性指向構(gòu)造函數(shù)的原型對象)

iii.用新對象調(diào)用構(gòu)造函數(shù)，將構(gòu)造函數(shù)中的this統(tǒng)一換成新對象。通過給新對象

強行賦值新屬性的方式，為新對象添加規(guī)定好的新屬性。

iv.返回新對象的地址給變量

5.如何訪問對象的成員：

(1).如果訪問對象的屬性：對象.屬性名

(2).如果調(diào)用對象中的方法：對象.方法名()

二.繼承：

1.什么是：父對象的成員，子對象可以無需創(chuàng)建，就能直接使用！

2.為什么：代碼重用！節(jié)約內(nèi)存

構(gòu)造函數(shù)只能代碼重用！但是卻浪費內(nèi)存！構(gòu)造函數(shù)會為每個子對象都重復(fù)創(chuàng)建多個方法

的副本！

所以，將來構(gòu)造函數(shù)中就不應(yīng)該有方法定義！應(yīng)該只包含屬性定義就夠了。_____________

3.何時：今后，只要發(fā)現(xiàn)多個子對象都需要相同的成員時(方法定義或?qū)傩灾?，都要用繼承

來實現(xiàn)

4.如何:js中的繼承都是通過原型對象來實現(xiàn)的

(1).什么是原型對象：專門集中保存該類型下所有子對象共有成員的父對象。

(2).何時：只要使用繼承，就要使用原型對象

(3).如何：

a.創(chuàng)建：不用自己創(chuàng)建，買一贈一：

只要創(chuàng)建一個構(gòu)造函數(shù)，都會附贈一個空的原型對象

functionStudent(){原型對象裕希

this.sname=sname;

this.sage=sage;媽媽

}prototype.constructoi;

b.何時繼承:new的第2步讓新創(chuàng)建的子對象繼承構(gòu)造函數(shù)的原型對象：自動設(shè)置新子

對象的__proto_JS性指向構(gòu)造函數(shù)的原型對象

只有從proto屬性指出的關(guān)系，才叫繼承關(guān)系!

c.結(jié)果：子對象將來，不需要重復(fù)創(chuàng)建，就可以使用保存在原型對象中的成員(方法或

屬性值)

以上三步都不用自己寫！已經(jīng)在內(nèi)存中定義好了，咱們直接使用!

d.如何向原型對象中添加新屬性：只能強行賦值！一一唯一需要自己做的一步操作

構(gòu)造函數(shù).prototype.方法名=function(){…}

5.自有屬性和共有屬性：

(1).自有屬性：直接保存在當前子對象中，僅歸當前子對象獨有的屬性。

只要構(gòu)造函數(shù)媽媽肚子里的屬性，都會成為孩子的自有屬性。媽媽肚子里有什么,

孩子將來自己就有什么！

(2).共有屬性：保存在父對象中，歸多個子對象共有的屬性

(3).獲取屬性值：都可用"對象.屬性名"

(4).修改屬性值：自有屬性可用子對象自己修改，而共有屬性不能用子對象修改，只能

用原型對象修改。

如果強行用子對象修改共有屬性，會為這個子對象自動添加一個同名的自有屬

性，從此這個子對象和大家在這個屬性的使用上分道揚鑲。

6.內(nèi)置對象的原型對象：

(1).ES標準中規(guī)定的11種內(nèi)置對象：

String,Number,Boolean包裝類型

ArrayDateMathRegExp

Error

FunctionObject

global(在瀏覽器中被window代替)

(2).除了Math和global外，其余都是一種類型：

a.每種類型中都有構(gòu)造函數(shù)，專門負責創(chuàng)建這個類型的子對象。所以才能new!比如:

newArray(),newDate(),newRegExpO

b.每種類型中都有原型對象，專門保存這個類型的所有子對象共有的函數(shù)！所以，將來

看這個類型都有哪些函數(shù)可用，就看這個類型的原型對象。比如：所有數(shù)組都可以.sort。，都

可以.push(),是因為數(shù)組類型的原型對象中包含這些函數(shù)，所以孩子們才能直接使用！

(3),為內(nèi)置類型如何擴展新函數(shù)：

其實就是定義一個函數(shù)保存在這個類型的原型對象中

比如：為數(shù)組類型添加一個求和的方法sum,讓所有數(shù)組家孩子都可以對內(nèi)容求和:

Array.prototype.sum=function(){

vartotal=0;

for(vari=O;i<this.length;i++){

total+=this[i]

}

returntotal;

}

調(diào)用時：

[l,2,3].sum()//6

強調(diào)：原型對象中的方法中的this,指向?qū)碚{(diào)用這個方法的點前的某一個具體

子對象。與定義在哪兒無關(guān)。

(4).包裝類型：

a.什么是包裝類型：專門封裝一個原始類型的值，并提供對原始類型的值執(zhí)行操作的函

數(shù)的對象

b.為什么：因為原始類型的值只是一個值而已，沒有任何自帶的功能(函數(shù)/屬性)。

c.何時：不用自己用，都是自動使用。只要試圖對原始類型的值調(diào)用函數(shù)或訪問屬性時,

都會自動創(chuàng)建該類型的包裝類型對象。我們訪問的函數(shù)或?qū)傩?，其實都是包裝類型對象提供

的。

比如："hello''.toUpperCase()

等效于自動newString("hello"),toUpperCase()

d.包裝類型對象在調(diào)用完函數(shù)后，自動釋放，不會保留下來。

e.為包裝類型添加新的自定義函數(shù)：

1),包裝類型也包含兩部分：構(gòu)造函數(shù)和原型對象

2).只要將新的自定義方法自動添加到包裝類型的原型對象中，就可以讓所有該類

型的值使用該方法。

創(chuàng)建對象:3種方式：

1.只能創(chuàng)建一個對象，且已知對象的內(nèi)容

varobj={屬性名:屬性值，方法名:function(){...}}

2.只創(chuàng)建一個對象，但是暫時不知道對象的內(nèi)容

varobj={}

obj.屬性名二屬性值；

obj.方法名=function(){...}

3.反復(fù)創(chuàng)建多個相同結(jié)構(gòu)的對象時：

function類型名(屬性形參){

this.屬性名二形參；

this.方法名=function(){

…this.屬性名...

}

}

varobj=new類型名(屬性值列表)

總結(jié)：繼承：只要所有子對象共有的方法或?qū)傩灾刀家獜娦匈x值到構(gòu)造函數(shù)的原型對象

中保存。

構(gòu)造函數(shù).prototype.方法名=function(){...}

構(gòu)造函數(shù).prototype.屬性名=值

總結(jié)：this

1.obj.fun()this->obj

2.fun()this->window

3.newFun()this->new新對象

作業(yè)：

1.this的筆試題

第五天

正課：

1.面向?qū)ο?/p>

2.ES5

一.面向?qū)ο?/p>

1.繼承：

(1),原型鏈：

a.什么是：多級父對象逐級繼承形成的鏈式結(jié)構(gòu)

b.保存著一個對象可用的所有成員。

1).只要這個對象的原型鏈中包含的成員，不管是定義在哪一級父對象中，該都可

使用。

2),反之，如果不包含在原型鏈中的成員，該對象無法使用！

c.控制著成員的使用順序：先用自有的，如果自己沒有，才用共有的成員

2.多態(tài)：

(1).什么是多態(tài)：一個函數(shù)在不同情況下表現(xiàn)出不同的狀態(tài)

(2).包括2種情況：

a.重載：

b.重寫(override):如果子對象覺得從父對象繼承來的成員不好用，可在子對象內(nèi)部定

義和父對象成員同名的自有成員。結(jié)果，從此子對象只用自己的自有成員，而不再使用父對

象繼承來的同名成員。

1),為什么：不是所有從父對象繼承來的成員都是好用的！

2).何時：如果子對象覺得從父對象繼承來的成員不好用，就可以重寫

3),如何：在子對象內(nèi)部定義和父對象成員同名的自有成員.

4),結(jié)果：從此子對象只用自己的自有成員，而不再使用父對象繼承來的同名成員。

3,自定義繼承關(guān)系：如果覺得當前父對象不好用，可以換掉！

(1).只更換一個對象的父對象：只要修改__pr。to__指向新的父對象就行了

child.__proto__=father

或

Object.setPrototypeOf(child,father)推薦

修改(原型〈-的〈-child)為father

(2).修改所有子對象的爹：其實就是修改構(gòu)造函數(shù)的prototype屬性指向新的原型對象

時機：在創(chuàng)建子對象之前，就要換！

構(gòu)造函數(shù).prototype=新原型對象

(3).兩種類型間的繼承：看視頻！

總結(jié)：面向?qū)ο笕筇攸c，也是三個步驟：

1.封裝：創(chuàng)建對象3種方式：

(1).varobj={屬性名：值,方法名:function。{…}}

(2).varobj={}obj.屬性名=值;obj.方法名=function(){…}

(3).function類型名(屬性參數(shù)列表){

this.屬性名=屬性參數(shù)

)

varobj=new類型名(屬性值列表)

2.繼承：今后所有的方法都應(yīng)該定義在原型對象中，所有子對象共有

類型名.prototype.方法名=function(){...}

3.多態(tài)：如果從爹繼承來的成員不好用，可以自己重寫同名成員

4.自定義繼承：如果覺得當前的爹不滿意可以修改原型對象：

(1).只修改一個對象的原型對象：

Object.setPrototypeOf(child,father)

(2).修改當前類型下所有子對象的原型對象：

構(gòu)造函數(shù).prototype=新原型對象

二.ES5:ECMAScript標準的第5個版本

1.嚴格模式：

(1).什么是：比普通js運行機制要求更嚴格的模式

(2).為什么:js語言本身擁有很多廣受詬病的缺陷

(3).何時：今后所有項目都要在嚴格模式下運行！

(4).如何啟用嚴格模式：只要在當前代碼段頂部添加"usestrict";

結(jié)果：整段代碼都會以嚴格模式運行

(5).新規(guī)定：

a.禁止給未聲明的變量賦值：

1).10js:一個未聲明的變量，可隨時強行賦值，結(jié)果自動在全局創(chuàng)建該變量一一

全局污染，也會有歧義

2),嚴格模式：禁止給未聲明的變量強行賦值，報錯:xxxisnotdefined。防止全

局污染，也減少了拼寫錯誤導致的誤會

b.靜默失敗升級為錯誤：

1).什么是靜默失?。簣?zhí)行不成功，也不報錯一一極其不便于調(diào)試程序。

2).嚴格模式：所有靜默失敗都升級為錯誤！都會報錯一一便于快速發(fā)現(xiàn)問題，調(diào)

試程序！

c.普通函數(shù)調(diào)用中的this不再指向window,而是undefined

1).舊js中：普通函數(shù)和匿名函數(shù)自調(diào)中的中的this,默認指向window。--全局

污染

2).嚴格模式：普通函數(shù)調(diào)用中的this不再指向window,而是undefined避免

了全局污染

d.禁用了arguments.callee

1).arguments.callee是專門在當前函數(shù)內(nèi)，引用當前函數(shù)自己的關(guān)鍵詞

2).何時：只要實現(xiàn)遞歸調(diào)用函數(shù)時都用arguments.callee

3),為什么：如果在函數(shù)內(nèi)遞歸調(diào)用自己時，寫死函數(shù)名，會形成緊耦合。

4).thisvsarguments.callee

i.this指的是正在調(diào)用當前函數(shù)的.前的對象，而不是當前函數(shù)本身。

ii.arguments.callee指的是正在執(zhí)行的函數(shù)本身，而不關(guān)心有沒有點，或者點前是

誰！

5).禁用arguments.callee不是因為arguments.callee不好，而是因為遞歸算法不好。

因為重復(fù)計算量太大！效率極低！禁用arguments.callee就是在暗示盡量少用遞歸

6).解決：今后盡量用循環(huán)代替遞歸算法

2.保護對象：

(1).什么是：阻止對對象的屬性值以及對象的結(jié)構(gòu)進行不合法的修改。

(2).為什么:js中的對象本身很弱，毫無自保能力

(3).何時：只要希望阻止用戶對對象的屬性值和結(jié)構(gòu)進行不合法的修改時

(4).如何：

a.保護對象的屬性：

1).ES5將對象的屬性又進行了細致的分類

i.命名屬性：可用.隨時訪問到的屬性一一需要保護

又被細分為2小類：

數(shù)據(jù)屬性：實際存儲屬性值的屬性

訪問器屬性：不實際存儲屬性值，只是對另外一個數(shù)據(jù)屬性提供保護！

ii.內(nèi)部屬性：無法用.訪問到的，但是對象內(nèi)實際卻存在的屬性。比如：class屬性。

——不用保護

2).如何保護數(shù)據(jù)屬性：

i.其實每個數(shù)據(jù)屬性，都是一個縮微的小對象

ii.每個數(shù)據(jù)屬性的縮微對象中都包含四個屬性:

value：屬性值，〃實際存儲屬性值

writable:true/false,〃控制是否可修改當前屬性的值

enumerable:true/false,〃控制是否可被forin遍歷到該屬性的值半隱藏

configurable:true/false

〃控制是否可刪除該屬性

〃控制是否可修改前兩個開關(guān)

)

var更夕—(*?*--**^^/{

/value:1001.\

(eid:1001)/citable:true,。&平控制是否可修改屬性值

I熱控制是否可被forin遍歷到一半隱藏

e總W矍亨,Ienumerable:true：嚀因為防得住forin,但是防不住.

)configurable:true,°狂變控制是否可刪除該屬性

y控制是否可修嫡兩鉆關(guān)

/一旦改為false,不可逆！

iii.開關(guān)屬性一定不能用.去訪問！只能用專門的函數(shù)去訪問：

Object.defineProperty(對象，"屬性名"，{

開關(guān)名：true/false

})

iv.問題：defineProperty一次只能修改一個屬性中的開關(guān)，如果修改多個屬性中

的開關(guān)，要重復(fù)寫很多遍，很繁瑣！

v.解決：

Object.defineProperties(對象，{

屬性名：{

開關(guān):true/false,

),

屬性名:{…}

})

vi:問題：開關(guān)的保護是死板的，不靈活的。無法用自定義規(guī)則保護屬性

3).訪問器屬性：

i.什么是：不實際存儲屬性值，只是對另外一個數(shù)據(jù)屬性提供保護的特殊屬性

ii.何時：只要使用自定義規(guī)則保護屬性時，就必須用訪問器屬性。

iii.為什么：僅靠開關(guān)無法用自定義規(guī)則保護屬性。

iv.如何:2步：

>首先將要保護的數(shù)據(jù)屬性隱姓埋名，還要半隱藏：

比如：本意是保護年齡屬性eage:

Object.defineProperties({

_eage:{

value:屬性值，

writable:true,

enumerable:false,

configurable:false

)

})

>然后添加訪問器屬性來保護這個要保護的數(shù)據(jù)屬性：

Object.defineProperties(對象,{

_eage:{...},

eage:{

get:function(){

returnthis._eage;

},

set:function(value){

if(value>=18&&value<=65){

this._eage=value;

}else{

throwEiroK"年齡超范圍!。

)

},

enumerable:true,

configurable:false

}

})

強調(diào)：訪問器屬性eage中，不再有value和writable屬性。因為，訪問器屬

性不實際存儲屬性值，所以不需要value屬性。又因為正是因為writable開關(guān)太死板，無

法用自定義屬性保護屬性，所以才用訪問器屬性代替的writable開關(guān)。所以，也不需要

writable屬性了。

V.如何使用訪問器屬性：訪問器屬性在用法上和普通屬性是完全一樣的：

>獲取屬性值：對象.eage

原理：會自動調(diào)用eage中的get(),自動從半隱藏的this._eage屬性中獲得屬

性值返回。

>修改屬性值：對象.eage二新值

原理：會自動調(diào)用eage中的set(),自動將二后的新值傳遞給參數(shù)value,在set()

中先驗證是否符合要求，如果符合要求，才賦值給否則報

valuethis._eageo

錯，且不賦值

eric:{試圖獲取eage:

_eage:26RgetO自動調(diào)用eage的get()

eric.eage

eage:

試圖修改

set(valeage:

自動調(diào)用eage的set()

)>=18

<=65Keric.eage=27

eric.eage=-2

b.保護對象的結(jié)構(gòu):3個級別:

1).防擴展：阻止對這個對象添加新屬性：

i.Object.preventExtensions(obj)

阻止擴展

ii.結(jié)果：如果再給obj對象添加新屬性，會報錯！

iii.原理：每個對象中都隱藏著一個內(nèi)部屬性:extensible:true。所有對象默認都可以

擴展。preventExtensions。自動將內(nèi)部屬性extensible:false,禁止擴展。

2),密封：在兼具防擴展同時，又進一步禁止刪除所有屬性

i.如何:Object.seal(obj)

ii.原理：1.自動調(diào)用preventExtensions。

自動修改所有屬性的從此每個屬性上不用再加

2.configurable:falseo

configurable:false了。

iii.密封只是禁止添加或刪除屬性，但是屬性值還是可以隨意修改的。

iv.大部分對象只要保護到密封級別就夠了

3).凍結(jié)：兼具密封的基礎(chǔ)上，進一步禁止修改所有屬性值

i.如何：Object.freeze(obj)

ii.原理：1.自動調(diào)用preventExtensions。

2.自動修改所有屬性的configurable和writable都為false

iii.何時：多個模塊共用的對象內(nèi)容，不允許隨便一個模塊擅自修改。

作業(yè)：

1.判斷一個對象是不是數(shù)組類型，共有幾種方式？

2.實現(xiàn)兩種類型間的繼承

第六天

正課：

1.ES5

2.ES6

一.ES5

1.Object.create()

(1).何時：沒有構(gòu)造函數(shù)，只有一個父對象，也想創(chuàng)建子對象時

(2).如何：

a.僅創(chuàng)建子對象，繼承父對象：

1).varchild=Object.create(father)

2).創(chuàng)建一個新的空對象child,然后自動設(shè)置child的_proto___,繼承自father。

b.創(chuàng)建子對象，繼承父對象同時，為子對象添加自有屬性：

1).varchild=Object.create(father;{

屬性:{

value:屬性值,

writable:true,

enumerable:true,

configurable:false

L

})

坑：因為這些屬性是新增的屬性，所以所有開關(guān)，默認都是false!如果打開，

必須自己顯式寫出開關(guān):true。_______________________________________________________

2).3件事：

i.創(chuàng)建一個新對象

ii.讓新對象繼承father

iii.為新對象內(nèi)添加自有屬性

2.call/apply/bind替換this!

何時：只要一個函數(shù)中的this不是想要的，都可用這三種方式來替換函數(shù)中不想要的this

為想要的對象_____________________________________________________________________

(1).在一次調(diào)用函數(shù)時，臨時替換一次函數(shù)中的this為指定的對象

a.函數(shù).call(替換this的對象,實參值列表…)

1),調(diào)用一次函數(shù)

2).臨時替換函數(shù)中的this為指定對象

3).將實參值列表直接傳給函數(shù)的每個形參變量

b.如果傳入的實參值列表是放在一個數(shù)組中傳入的

1).函數(shù).apply(替換this的對象包含實參值的數(shù)組)

2).3件事：

i.調(diào)用一次函數(shù)

ii.臨時替換函數(shù)中的this為指定對象