Javascript(一)課件

1、JavaScript.No1(ECMA5核心核心+設(shè)計模式設(shè)計模式)講師：白賀翔.JavaScript簡介javascript誕生于1995年，當(dāng)時他的主要目的就是處理以前由服務(wù)器語言負責(zé)的一些輸入驗證操作。在javascript問世之前，必須把表單里的數(shù)據(jù)發(fā)送到服務(wù)器才能確定用戶是否沒有填寫某個必填域或者是輸入信息是否正確。Javascript課程大綱（一）課程大綱（一）第一講：初識第一講：初識Javascript javascript的組成部分的組成部分 如何使用如何使用javascript第二講：基本概念第二講：基本概念 語法語法 變量變量 基本數(shù)據(jù)類型基本數(shù)據(jù)類型 控制語句等控制語句等

2、第三講：引用類型第三講：引用類型 數(shù)組數(shù)組 數(shù)組數(shù)組ECMA5新特性新特性 Object類型型應(yīng)用類型型應(yīng)用 模擬高級語言對象（模擬高級語言對象（java 容器模擬）容器模擬） 數(shù)組的技巧（經(jīng)典數(shù)組操作技巧）數(shù)組的技巧（經(jīng)典數(shù)組操作技巧） 其他引用類型（單體類型）其他引用類型（單體類型）Javascript課程大綱（二）課程大綱（二） 第四講：函數(shù)第四講：函數(shù) 函數(shù)概念函數(shù)概念 定義函數(shù)的三種方式定義函數(shù)的三種方式 函數(shù)參數(shù)函數(shù)參數(shù)arguments對象對象 this對象對象 call和和apply高級函數(shù)高級函數(shù) 執(zhí)行環(huán)境概念執(zhí)行環(huán)境概念 作用域鏈概念作用域鏈概念 javascript垃圾收

3、集機制垃圾收集機制 塊級作用域塊級作用域 閉包函數(shù)閉包函數(shù)Javascript課程大綱（三）課程大綱（三） 第五講：面向?qū)ο蟪绦蛟O(shè)計第五講：面向?qū)ο蟪绦蛟O(shè)計 類的創(chuàng)建類的創(chuàng)建 實例對象的三種方式實例對象的三種方式 原型的概念，為什么需要原型原型的概念，為什么需要原型 原型常用方法原型常用方法 實現(xiàn)自己的原型擴展方法實現(xiàn)自己的原型擴展方法 簡單原型對象簡單原型對象 原型對象的常用開發(fā)模式（組合、寄生、動態(tài)原型、穩(wěn)妥對象）原型對象的常用開發(fā)模式（組合、寄生、動態(tài)原型、穩(wěn)妥對象） 深入繼承的解析（深入繼承的解析（javascript繼承實現(xiàn)的關(guān)鍵解析）繼承實現(xiàn)的關(guān)鍵解析） 常用三種繼承模式（原型繼承

4、、借用構(gòu)造函數(shù)繼承、混合繼承）常用三種繼承模式（原型繼承、借用構(gòu)造函數(shù)繼承、混合繼承） 模擬模擬extjs4.1底層繼承代碼底層繼承代碼Javascript課程大綱（四）課程大綱（四） 第六講：設(shè)計模式第六講：設(shè)計模式 javascript如何使用接口如何使用接口 創(chuàng)建接口的三種方式（注解描述、屬性檢測、鴨式辨型）創(chuàng)建接口的三種方式（注解描述、屬性檢測、鴨式辨型） 接口的使用場景說明（接口的利弊）接口的使用場景說明（接口的利弊） 單體模式（四種常見的單體模式）單體模式（四種常見的單體模式） javaScript中實現(xiàn)鏈?zhǔn)骄幊讨袑崿F(xiàn)鏈?zhǔn)骄幊?模擬模擬jquery底層代碼實現(xiàn)鏈?zhǔn)骄幊痰讓哟a實現(xiàn)鏈

5、式編程 JavaScript設(shè)計模式：設(shè)計模式： 1 工廠模式（實現(xiàn)簡單工廠、工廠模式（實現(xiàn)簡單工廠、js如何使用抽象類、復(fù)雜動態(tài)工廠如何使用抽象類、復(fù)雜動態(tài)工廠） 2 橋接模式（橋接模式（事件監(jiān)聽回調(diào)機制、特權(quán)函數(shù)、組織多個單元事件監(jiān)聽回調(diào)機制、特權(quán)函數(shù)、組織多個單元） 3 組合模式（面向?qū)ο髮崿F(xiàn)多級關(guān)系、組合模式實現(xiàn)多級關(guān)系）組合模式（面向?qū)ο髮崿F(xiàn)多級關(guān)系、組合模式實現(xiàn)多級關(guān)系） 4 門面模式（我們最熟悉的設(shè)計模式門面模式（我們最熟悉的設(shè)計模式-門面模式）門面模式）Javascript課程大綱（五）課程大綱（五） 第六講：設(shè)計模式（續(xù)）第六講：設(shè)計模式（續(xù)） 5 適配器模式適配器模式 （適

6、配不同的接口與類、適配（適配不同的接口與類、適配js庫）庫） 6 裝飾者模式裝飾者模式 （用新對象包裝原始對象，擴展其方法和屬性）（用新對象包裝原始對象，擴展其方法和屬性） 7 享元模式（實現(xiàn)優(yōu)化的設(shè)計模式，享元模式（實現(xiàn)優(yōu)化的設(shè)計模式，web日歷的優(yōu)化）日歷的優(yōu)化） 8 代理模式（代理模式的概念及虛擬代理使用）代理模式（代理模式的概念及虛擬代理使用） 9 觀察者模式（觀察者模式的模擬）觀察者模式（觀察者模式的模擬） 10 命令模式（命令模式命令模式（命令模式+HTML5的應(yīng)用）的應(yīng)用） 11 責(zé)任鏈模式（理解責(zé)任鏈的概念、內(nèi)部調(diào)用的形式）責(zé)任鏈模式（理解責(zé)任鏈的概念、內(nèi)部調(diào)用的形式）第一講：

7、初識Javascript 學(xué)習(xí)目標(biāo) 了解javascript組成部分 認(rèn)識javascript解析機制 如何使用javascript第一講：1.1 初識Javascript javascript是一種專為與網(wǎng)頁交互兒設(shè)計的腳本語言。由三部分組成： ECMAScript (ECMA-262定義) 提供核心語言功能 文檔對象模型（DOM）提供訪問和操作網(wǎng)頁內(nèi)容的方法和接口 瀏覽器對象模型（BOM）提供與瀏覽器交互的方法和接口Javascript的這三個組成部分在當(dāng)前五大主流瀏覽器中都得到了不同程度的支持（IE、FireFox、Chrome、Safari、Opera）?；舅械臑g覽器都大體上支持E

8、CMAScript第三版。但是對于DOM和BOM的支持相比較而言則差很多。第一講：1.2 初識Javascript對JavaScript是一種可以與HTML標(biāo)記語言混合使用的腳本語言，其編寫的程序可以直接在瀏覽器中解釋執(zhí)行解釋執(zhí)行。javascript是一種解釋型語言(預(yù)編譯、執(zhí)行) Javascript的國際標(biāo)準(zhǔn)是ECMAScript. 語法、類型、語句、關(guān)鍵字、保留字、操作符、對象如何使用javascript？ 在HTML文檔中插入腳本語言可以使用標(biāo)記 標(biāo)記可以置于頁面任意位置，一般定義在標(biāo)簽中標(biāo)記屬性! type、src、defer、charset第二講：基本概念 學(xué)習(xí)目標(biāo) 認(rèn)識變量（聲

9、明、規(guī)則、全局變量、局部變量） 數(shù)據(jù)類型（基本類型、引用類型） 運算符、表達式、控制語句第二講： 2.1變量變量 JavaScript 是一種弱類型的腳本語言 var c = 3；即變量的聲明(變量使用之前必須加var聲明，編程規(guī)范) 變量的命名規(guī)則! 1.變量命名必須以字母或是下標(biāo)符號”_”或者”$”為開頭。 2.變量名長度不能超過255個字符。 3.變量名中不允許使用空格。 4.不用使用腳本語言中保留的關(guān)鍵字及保留符號作為變量名。 5.變量名區(qū)分大小寫。變量名區(qū)分大小寫。(javascript是區(qū)分大小寫的語言是區(qū)分大小寫的語言) 全局變量 在方法外部聲明的變量 方法內(nèi)部，沒有加var關(guān)鍵

10、字聲明的變量 局部變量 方法內(nèi)部，使用var聲明的變量第二講： 2.2 數(shù)據(jù)類型ECMAScript中,數(shù)據(jù)類型也分為基本類型和引用類型兩大類.基本數(shù)據(jù)類型：Number、Boolean、String、Undefined、Null Number：整數(shù)和小數(shù)(最高精度17位小數(shù))、NaN、Infinity, -Infinity 注意：1.除10進制外，還可通過8進制和16進制的字面值來表示，如 070 表示56、0 xA表示10. 2.小數(shù)為浮點類型，if(a+b = 0.3) /不要做這樣的測試，因為 浮點數(shù)值最高精度是17位，而是0.300000000000000004. Undefined

11、：表示變量聲明但未賦值. Null:表示一個空的對象引用(也就是賦值為null)引用類型：Object類型 (比如對象、數(shù)組、RegExp、Date.)Typeof 操作符基本類型和引用類型的值 基本類型是按照值訪問的，因為可以操作保存在變量中的實際值 引用類型則是按引用去訪問的第二講：2.3 運算符運算符與表達式： 加減乘除、遞增(+)、遞減(-)、求余(%)變量的自動轉(zhuǎn)換 = 等同符：不會發(fā)生類型的自動轉(zhuǎn)化！ = 等值符：會發(fā)生類型自動轉(zhuǎn)化、自動匹配！在程序中還經(jīng)常使用到擴展賦值運算符，如：+=，-=，*=，/=，%=等第二講：2.3 運算符在復(fù)雜的表達式中往往會綜合運用各種不同類型的運算

12、符，而表達式的運算順序有一定的規(guī)則：首先應(yīng)按照運算符的優(yōu)先次序從高到低的順序，其次，優(yōu)先級相同的運算符按照事先約定的結(jié)合方向（從左向右或從右向左）進行。條件表達式的基本的語法是： （條件表達式1）？表達式2：表達式3第二講：2.4 控制語句基本上ECMAScript的控制語句和java一致if語句 if(條件)else if(條件).elseswitch 語句：switch (expression) case const1:語句塊1. default:.for (初始化部分；條件部分；更新部分) 語句塊 while(條件) 語句塊 do 語句塊 while(條件)break語句是結(jié)束當(dāng)前的循環(huán)

13、，并把程序的控制權(quán)交給循環(huán)的下一條語句這里是結(jié)束循環(huán)，循環(huán)到此為止continue語句是結(jié)束當(dāng)前的某一次循環(huán)，但是并沒有跳出整個的循環(huán)。 這里是結(jié)束一次循環(huán)，整個循環(huán)還在進行(label . with)第三講：引用類型學(xué)習(xí)目標(biāo) 掌握數(shù)組的概念、特性、常用方法 掌握Object，學(xué)會使用對象 了解其他引用類型對象第三講：3.1 數(shù)組在在ECMAScript中數(shù)組是非常常用的引用類型了。中數(shù)組是非常常用的引用類型了。ECMAScript所定所定義的數(shù)組和其他語言中的數(shù)組有著很大的區(qū)別。那么首先要說的就是義的數(shù)組和其他語言中的數(shù)組有著很大的區(qū)別。那么首先要說的就是數(shù)組也是一種對象。數(shù)組也是一種對象。

14、特點：特點： “數(shù)組數(shù)組”即一組數(shù)據(jù)的集合。即一組數(shù)據(jù)的集合。 js數(shù)組更加類似數(shù)組更加類似java的容器。長度可變，元素類型也可以不同！的容器。長度可變，元素類型也可以不同！ 數(shù)組長度隨時可變！隨時可以修改！數(shù)組長度隨時可變！隨時可以修改?。╨engthlength屬性）屬性）常用方法：常用方法： push、pop shift、unshift splice、slice concat、join、sort、reverse等等第三講：3.1 數(shù)組補充 對于ECMAscript5這個版本的Array新特性補充： 位置方法：indexOf lastIndexOf 迭代方法：every filter f

15、orEach some map 縮小方法：reduce reduceRight第三講：3.2 Object 我們目前為止大多數(shù)引用類型都是我們目前為止大多數(shù)引用類型都是Object類型的實例，類型的實例，Object也是也是ECMAScript中使用最多的一種類型（就像中使用最多的一種類型（就像java.lang.Object一樣，一樣，Object類型是所有它的實例的基礎(chǔ)）。類型是所有它的實例的基礎(chǔ)）。 Object類型的創(chuàng)建方式、使用類型的創(chuàng)建方式、使用 對于對于Object類型應(yīng)用類型應(yīng)用for in 枚舉循環(huán)枚舉循環(huán) Object每個實例都會具有下列屬性和方法：每個實例都會具有下列屬性

16、和方法： Constructor: 保存著用于創(chuàng)建當(dāng)前對象的函數(shù)。（構(gòu)造函數(shù)）保存著用于創(chuàng)建當(dāng)前對象的函數(shù)。（構(gòu)造函數(shù)） hasOwnProperty(propertyName):用于檢測給定的屬性在當(dāng)前用于檢測給定的屬性在當(dāng)前對象實例中對象實例中(而不是原型中而不是原型中)是否存在。是否存在。 isPrototypeOf(Object): 用于檢查傳入的對象是否是另外一個對用于檢查傳入的對象是否是另外一個對象的原型。象的原型。 propertyIsEnumerable(propertyName):用于檢查給定的屬性是用于檢查給定的屬性是否能夠使用否能夠使用for-in語句來枚舉。語句來枚舉。

17、 toLocaleString()：返回對象的字符串表示。該字符串與執(zhí)行環(huán)：返回對象的字符串表示。該字符串與執(zhí)行環(huán)境的地區(qū)對應(yīng)境的地區(qū)對應(yīng). toString():返回對象的字符串表示。返回對象的字符串表示。 valueOf():返回對象的字符串、數(shù)值或布爾表示。返回對象的字符串、數(shù)值或布爾表示。第三講：3.2 Object (應(yīng)用) 簡單實現(xiàn)簡單實現(xiàn)JAVA中中Map 利用利用js對象的特性，去掉數(shù)組中的重復(fù)項對象的特性，去掉數(shù)組中的重復(fù)項第三講：3.3 其他引用類型對象單體對象：單體對象： Global對象（全局）這個對象不存在，無形的對象對象（全局）這個對象不存在，無形的對象 其內(nèi)部定義

18、了一些方法和屬性：其內(nèi)部定義了一些方法和屬性：encodeURI 、encodeURIComponent、decodeURI、decodeURIComponent、eval、parseInt、parseFloat、isNaN、Escape、 unescape Math對象對象 內(nèi)置的內(nèi)置的Math對象可以用來處理各種數(shù)學(xué)運算對象可以用來處理各種數(shù)學(xué)運算 可以直接調(diào)用的方法：可以直接調(diào)用的方法：Math.數(shù)學(xué)函數(shù)（參數(shù)）數(shù)學(xué)函數(shù)（參數(shù)） 求隨機數(shù)方法：求隨機數(shù)方法：Math.random(),產(chǎn)生產(chǎn)生 0，1) 范圍一個任意數(shù)范圍一個任意數(shù)Date對象對象 獲取當(dāng)前時間的一系列詳細方法獲取當(dāng)前時

19、間的一系列詳細方法基本包裝類型：基本包裝類型：Boolean、String、Number和和java的用法類似的用法類似Function類型、類型、RegExp類型（以后學(xué)習(xí)）類型（以后學(xué)習(xí)）第四講：函數(shù)學(xué)習(xí)目標(biāo) 了解函數(shù)的基本概念 函數(shù)的定義方式 函數(shù)的參數(shù) this call、apply 執(zhí)行環(huán)境、作用域鏈 垃圾收集、塊級作用域 closure第四講：4.1初識函數(shù)Function類型，即函數(shù)的類型。一個典型的JavaScript函數(shù)定義如下：function 函數(shù)名稱（參數(shù)表）函數(shù)執(zhí)行部分：注意：參數(shù)列表直接寫形參名即可，不用寫var!return語句：return返回函數(shù)的返回值并結(jié)束

20、函數(shù)運行 函數(shù)也可以看做數(shù)據(jù)來進行傳遞第四講：4.2 定義函數(shù)三種定義函數(shù)的方式： function語句形式 函數(shù)直接量形式 通過Function構(gòu)造函數(shù)形式定義函數(shù)比較三種方式定義的區(qū)別：第四講：4.2 示例1 效率方面 var d1 = new Date();var t1 = d1.getTime();for(var i =0 ; i 100000;i+)/function test1();/var test2 = new Function();var d2 = new Date();var t2 = d2.getTime();alert(t2 -t1); 第四講：4.2 示例2 解析順序

21、 function f()return 1; / 函數(shù)函數(shù)1 alert(f();/返回值為返回值為4 說明第說明第1個函數(shù)被第個函數(shù)被第4個函數(shù)覆蓋個函數(shù)覆蓋var f = new Function(return 2;);/ 函數(shù)函數(shù)2 alert(f();/返回值為返回值為2 說明第說明第4個函數(shù)被第個函數(shù)被第2個函數(shù)覆蓋個函數(shù)覆蓋var f = function()return 3;/ 函數(shù)函數(shù)3 alert(f(); /返回值為返回值為3 說明第說明第2個函數(shù)被第個函數(shù)被第3個函數(shù)覆蓋個函數(shù)覆蓋function f()return 4; / 函數(shù)函數(shù)4 alert(f();/返回值為返

22、回值為3 說明第說明第4個函數(shù)被第個函數(shù)被第3個函數(shù)覆蓋個函數(shù)覆蓋var f = new Function(return 5); / 函數(shù)函數(shù)5 alert(f();/返回值為返回值為5 說明第說明第3個函數(shù)被第個函數(shù)被第5個函數(shù)覆蓋個函數(shù)覆蓋var f = function()return 6 ;/ 函數(shù)函數(shù)6 alert(f();/返回值為返回值為6 說明第說明第5個函數(shù)被第個函數(shù)被第6個函數(shù)覆蓋個函數(shù)覆蓋第四講：4.2 示例3 作用域方面 var k = 1 ; function t1()var k = 2 ; /function test()return k ; /var test =

23、 function() return k;/var test = new Function(return k;);alert(test();t1();第四講：4.3 函數(shù)的參數(shù) 函數(shù)的參數(shù)：函數(shù)的參數(shù)：arguments對象對象 arguments是表示函數(shù)的實際參數(shù)是表示函數(shù)的實際參數(shù)(與形參無關(guān)與形參無關(guān))callee函數(shù)（回調(diào)函數(shù)屬性）函數(shù)（回調(diào)函數(shù)屬性）arguments對象的秘密屬性對象的秘密屬性 callee屬性：屬性：這個屬性比較奇怪，他能返回這個屬性比較奇怪，他能返回arguments對象所屬的函數(shù)的引用，這對象所屬的函數(shù)的引用，這相當(dāng)于在自己的內(nèi)部調(diào)用自己。相當(dāng)于在自己的內(nèi)部

24、調(diào)用自己。用法：例如檢測函數(shù)傳遞的參數(shù)正確與否用法：例如檢測函數(shù)傳遞的參數(shù)正確與否第四講：4.3 示例 關(guān)于程序的嚴(yán)謹(jǐn)性 function fact(num) if(num =1) return 1 ; else return num*fact(num-1); 注注 這是一個典型的遞歸實現(xiàn)階乘函數(shù)，雖然表面上看起這是一個典型的遞歸實現(xiàn)階乘函數(shù)，雖然表面上看起來沒什么問題來沒什么問題 是如果采用下面代碼就會導(dǎo)致程序錯是如果采用下面代碼就會導(dǎo)致程序錯誤誤var anotherFact = fact; fact = null; alert(anotherFact(4); /出錯！出錯！第四講：4.4

25、 this this對象是在運行時基于函數(shù)的執(zhí)行環(huán)境綁定的對象是在運行時基于函數(shù)的執(zhí)行環(huán)境綁定的。在全局函數(shù)中，this等于window，而當(dāng)函數(shù)被作為某個對象的方法調(diào)用時，this等于那個對象。 也就是說this關(guān)鍵字總是指代調(diào)用者。第四講：4.5 call、apply 每一個函數(shù)都包含兩個非繼承而來的方法：call、apply。這倆個方法的用途都是在特定的作用域中調(diào)用函數(shù)，實際上等于設(shè)置函數(shù)體內(nèi)this對象的值。 call、apply的用途之一就是傳遞參數(shù)，但事實上，它們真正強大的地方式能夠擴充函數(shù)賴以運行的作用域。 使用call（）、aplly（）來擴充作用域的最大好處就是對象不需要與方

26、法有任何耦合關(guān)系。 call方法簡單的實現(xiàn)。第四講：4.6 執(zhí)行環(huán)境、作用域鏈執(zhí)行環(huán)境（execution context）是javascript中最為重要的一個概念。執(zhí)行環(huán)境定義了變量或函數(shù)有權(quán)訪問的其他數(shù)據(jù)，決定了它們各自的行為。每一個執(zhí)行環(huán)境都有一個與之關(guān)聯(lián)的變量對象，環(huán)境中定義的每一個執(zhí)行環(huán)境都有一個與之關(guān)聯(lián)的變量對象，環(huán)境中定義的所有變量和函數(shù)都保存在這個對象中所有變量和函數(shù)都保存在這個對象中。雖然我們的代碼無法訪問這個對象，但是解析器在處理數(shù)據(jù)時會在后臺執(zhí)行它。全局執(zhí)行環(huán)境是最外圍的一個執(zhí)行環(huán)境。根據(jù)ECMScript實現(xiàn)所在的宿主環(huán)境不同，表示執(zhí)行環(huán)境的對象也不一樣。每一個函數(shù)都

27、有自己的執(zhí)行環(huán)境。當(dāng)執(zhí)行流進一個函數(shù)時，函數(shù)的環(huán)境就會被推入一個環(huán)境棧中。而在函數(shù)執(zhí)行之后，棧將其環(huán)境彈出，把控制權(quán)返還給之前的執(zhí)行環(huán)境。當(dāng)代碼在一個環(huán)境中執(zhí)行時，會創(chuàng)建變量對象的一個作用域鏈（scope chain）。作用域鏈的用途，是保證對執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問。第四講：作用域鏈?zhǔn)纠齰ar color1 = blue;function changeColor()var color2 = red;function swapColor()var color3 = color2; color2 = color1;color1 = color3;/這里可以訪問：color1、2

28、、3/這里可以訪問color1、color2、但不能訪問color3swapColor();/這里只能訪問color1changeColor();第四講：4.7 垃圾收集、塊級作用域javascript是一門具有自動垃圾收集機制的編程語言。開發(fā)人員不必關(guān)心內(nèi)存分配和回收問題。 離開作用域的值將被自動標(biāo)記為可以回收，因此將在垃圾收集期間被刪除。標(biāo)記清除是目前主流的垃圾收集算法。這種算法的思想是給當(dāng)前不使用的值加上標(biāo)記，然后回收其內(nèi)存。javascript里面沒有塊級作用域的概念，和C、JAVA等高級語言不同。所以在使用if、for時候要格外的小心。javascript模擬塊級作用域第四講：4.8

29、 Closure（閉包）概念：概念： 閉包與函數(shù)有著緊密的關(guān)系，它是函數(shù)的代碼在運行過程中的一個動態(tài)閉包與函數(shù)有著緊密的關(guān)系，它是函數(shù)的代碼在運行過程中的一個動態(tài)環(huán)境，是一個運行期的、動態(tài)的概念環(huán)境，是一個運行期的、動態(tài)的概念。 所謂閉包，是指詞法表示包括不必計算的變量的函數(shù)。也就是說，該函所謂閉包，是指詞法表示包括不必計算的變量的函數(shù)。也就是說，該函數(shù)能夠使用函數(shù)外定義的變量數(shù)能夠使用函數(shù)外定義的變量.。 在程序語言中，所謂閉包，是指語法域位于某個特定的區(qū)域，具有持續(xù)在程序語言中，所謂閉包，是指語法域位于某個特定的區(qū)域，具有持續(xù)參照參照(讀寫讀寫)位于該區(qū)域內(nèi)自身范圍之外的執(zhí)行域上的非持久型

30、變量值能力位于該區(qū)域內(nèi)自身范圍之外的執(zhí)行域上的非持久型變量值能力的段落。這些外部執(zhí)行域的非持久型變量神奇地保留他們在閉包最初定的段落。這些外部執(zhí)行域的非持久型變量神奇地保留他們在閉包最初定義義(或創(chuàng)建或創(chuàng)建)時的值時的值。第四講：第四講：4.8 理解作用域鏈理解作用域鏈要理解閉包，首先第一點，必須要對于作用域鏈的概念非常的清楚。var name = xiao A;var obj = name : xiao B; getName: function()return function()return ;alert(obj.getName()();第四講：閉包 示例function

31、 f(x)var temp = x ; return function(x)temp += x ;alert(temp); var a = f(50);a(5);a(10);a(20);第五講： 面向?qū)ο蟪绦蛟O(shè)計 學(xué)習(xí)目標(biāo)： 了解面向?qū)ο蟪绦虻奶攸c 學(xué)會JS模擬面向?qū)ο蟮姆绞?理解prototype及其相關(guān)應(yīng)用模型 理解繼承 了解常用設(shè)計模式第五講：5.1 面向?qū)ο蟪绦蛟O(shè)計 面向?qū)ο蟮恼Z言有一個標(biāo)志，那就是他們都有類的概念，通過類可以創(chuàng)建任意多個具有相同屬性和方法的對象。但是在ECMAScript中沒有類的概念，但是我們可以通過其他方式來模擬面向?qū)ο蟮念悺?工廠模式：工廠模式是軟件工廠領(lǐng)域中一

32、種廣為人知的設(shè)計模式。 構(gòu)造函數(shù)模式：比如像ECMAScript中的Array、Object、Date等都是通過構(gòu)造函數(shù)來創(chuàng)建的。第五講：5.2 原型我們創(chuàng)建的每一個函數(shù)都有一個prototype屬性，這個屬性是一個指針，指向一個對象，而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。原型對象實際就是一個構(gòu)造函數(shù)的實例對象，與普通的實例對象沒有什么本質(zhì)上的區(qū)別，js中每一個對象都有一個原型對象。不過他比較特殊，該對象所包含的所有屬性和方法能夠供構(gòu)造函數(shù)的所有實例共享，這就是其他語言所說的繼承，而javascript通過原型對象來實現(xiàn)繼承，簡稱原型繼承。靜態(tài)原型繼承：Object.

33、prototype.method field ;isPrototypeOf(實例對象) 判斷原型的方法ECMA5: Object.getPrototypeOf():根據(jù)實例對象獲得原型對象object.hasOwnProperty(attribute) 判斷屬性是否屬于對象本身in 操作符 判斷對象中是否存在該屬性(無論是實例對象還是原型對象)ECMA5新特性 Object.keys();拿到當(dāng)前對象里的所有keys 返回一個數(shù)組ECMA5新特性 Object.getOwnPropertyNames 枚舉對象所有的屬性 ：不管該內(nèi)部屬性能否被枚舉第五講：5.2 原型圖例 29prototype

34、prototypeprototypeperson1person2Person PrototypeconstructornameageVooPerson(function)sayName第五講：5.3 原型示例練習(xí) 原型的另外一個作用就是擴展對象中的屬性和方法的 模擬Array中each循環(huán)方法 類似ECMA中的forEach方法第五講：5.4 簡單原型 之前我們已經(jīng)學(xué)過了原型如何使用，那么現(xiàn)在我們介紹一種簡單原型的使用方式：即直接通過對象字面量來重寫整個原型對象（這種方法會改變原型對象的構(gòu)造器） ECMA5中的Object.defineProperty()方法可以為原型對象重新加入構(gòu)造器。 原

35、型的動態(tài)性（注意原型和創(chuàng)建實例的前后順序）第五講：5.5 原型對象存在的問題 原型對象雖然可以對所有實例的屬性和方法共享，但是它的局限性也是很明顯的，正是因為共享的特性，也導(dǎo)致原型存在的最大問題。 我們一般組合使用構(gòu)造函數(shù)式和原型模式，在實際開發(fā)中，這種模式也是應(yīng)用的最為廣泛。 動態(tài)原型模式：就是把信息都封裝到函數(shù)中，這樣體現(xiàn)了封裝的概念。 穩(wěn)妥構(gòu)造函數(shù)式：所謂穩(wěn)妥模式就是沒有公共屬性，而且其他方法也不引用this對象，穩(wěn)妥模式最適合在安全的環(huán)境中使用。如果你的程序?qū)τ诎踩砸蠛芨?，那么非常適合這種模式。第五講：5.6 繼承 我們都知道構(gòu)造函數(shù)、原型和實例直接的關(guān)系，如果我們?nèi)绻覀冏屧蛯?/p>

36、象等于另一個類型的實例，結(jié)果會怎么樣呢？讓原型對象等于另一個類型的實例，結(jié)果會怎么樣呢？顯然此時的原型對象將包含一個指向另一個原型的指針，相應(yīng)的另一個原型中也包含著一個指向另一個構(gòu)造函數(shù)的指針。 原型鏈:利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法。 簡單繼承（原型繼承） 類繼承（模版繼承或借用構(gòu)造函數(shù)繼承） 混合使用繼承實現(xiàn)完整的繼承第五講 5.7 原型鏈?zhǔn)疽鈭D prototypeprototypeprototypeSubinstanceSuper Prototypeconstructormethod1functionSuperSub Prototypeprototypemetho

37、d2function第五講 5.8 繼承示例 經(jīng)典繼承方法實現(xiàn)（模擬extjs底層繼承機制）第六講 設(shè)計模式 學(xué)習(xí)目標(biāo)： 了解接口的概念，接口的意義，接口的應(yīng)用 單體模式 函數(shù)的鏈?zhǔn)秸{(diào)用 詳解常用設(shè)計模式第六講 6.1 接口 接口是面向?qū)ο骿avascript程序員的工具箱中最有用的工具之一，那么對于javascript沒有定義接口的概念，我們通過模擬高級程序語言的方式來創(chuàng)建javascript中的接口。 接口的概念：提供一種以說明一個對象應(yīng)該有哪些方法的手段。第六講 6.2 建立接口的三種方式 通常建立javascript接口有三種方式： 1 注釋描述接口 2 屬性檢測接口 3 鴨式辯型接口

38、 接口的利弊： 對于一些中小型程序來說 使用接口很顯然是不明智的，對項目來說接口的好處也不明顯，只是徒增其復(fù)雜度而已。 對于接口的好處，那么顯而易見 首先促進代碼的重用，對于開發(fā)來講，還可以告訴程序員那些類都使用了什么方法，如果你事先知道接口那么就減少了你在編碼的時候?qū)︻惻c類之間沖突，實現(xiàn)解耦。對于測試和調(diào)試也會變得輕松，用于javascript的弱類型語言，類型不匹配經(jīng)常出現(xiàn)，那么使用接口，這一點會變得容易一些。第六講 6.3 單體模式 單體（singleton）模式是javascript中最基本但又最有用的模式之一，它可能比其他任何模式都常用。 這種模式提供了一種將代碼組織為一個邏輯單元的

39、手段，這個邏輯單元中的代碼可以通過單一的變量進行訪問。通過確保單體對象只存在一份實例，你就可以確信自己的所有代碼使用的都是同樣的全局資源。 簡單單體 閉包單體 惰性單體 分支單體第六講 6.4 函數(shù)的鏈?zhǔn)秸{(diào)用 javascript對方法進行鏈?zhǔn)秸{(diào)用的能力。如果大家對jquery有一定了解，那么很明顯你一定知道這是一個什么意義。 簡單鏈?zhǔn)秸{(diào)用。 return this； 模擬jquery底層鏈?zhǔn)秸{(diào)用。第六講 6.5 設(shè)計模式 對于設(shè)計模式，我相信大家都聽說過至少幾種以上，那么javascript里面給我們提供了很多種設(shè)計模式：工廠、橋、組合、門面、適配器、裝飾者、享元、代理、觀察者、命令、責(zé)任鏈

40、。這些設(shè)計模式相信大家都耳熟能詳。 那么現(xiàn)在我們就一起來體驗下叫javascript設(shè)計模式魅力！第六講 6.6 工廠模式 對于工廠模式，我相信大家都多多少少有一些了解，其核心就是為了生產(chǎn)對象，實現(xiàn)解耦。 那么對于javaScript而言，一個類或?qū)ο笾型鶗瑒e的對象，我們創(chuàng)建這樣成員對象時，可能習(xí)慣采用new關(guān)鍵字或構(gòu)造函數(shù)的方式，這樣會導(dǎo)致兩個類之間產(chǎn)生依賴關(guān)系，所以我們通常要需要工廠模式，創(chuàng)建一個工廠來管理他們的實例過程，這樣可以控制程序，使我們的程序更加的面向?qū)ο蟆⒍鄳B(tài)化。 實現(xiàn)簡單工廠實現(xiàn)簡單工廠 js中實現(xiàn)抽象類的概念，實現(xiàn)復(fù)雜的動態(tài)工廠中實現(xiàn)抽象類的概念，實現(xiàn)復(fù)雜的動態(tài)工廠第

41、六講 6.7 橋接模式 橋接模式是一種既能把兩個對象連接在一起，又能避免二橋接模式是一種既能把兩個對象連接在一起，又能避免二者間的強耦合的方法。通過者間的強耦合的方法。通過“橋橋”把彼此聯(lián)系起來，同時把彼此聯(lián)系起來，同時又允許他們各自獨立變化。又允許他們各自獨立變化。 主要作用表現(xiàn)為將抽象與其實現(xiàn)隔離開來，以便二者獨立主要作用表現(xiàn)為將抽象與其實現(xiàn)隔離開來，以便二者獨立化。化。 橋接實例：橋接實例： 事件監(jiān)聽回調(diào)機制事件監(jiān)聽回調(diào)機制 特權(quán)函數(shù)特權(quán)函數(shù) 橋接組織多個單元橋接組織多個單元第六講 6.8 組合模式（一） 組合模式是一種專門為創(chuàng)建Web上的動態(tài)用戶界面而量身制定的模式。使用這種模式可以用

42、一條命令在多個對象上使用這種模式可以用一條命令在多個對象上激發(fā)復(fù)雜的或遞歸的行為。激發(fā)復(fù)雜的或遞歸的行為。這可以簡化粘合性代碼，使其更容易維護，而那些復(fù)雜行為則被委托給各個對象。 組合模式的好處： 1 你可以用同樣的方法處理對象的集合與其中的特定子對象。你可以用同樣的方法處理對象的集合與其中的特定子對象。 2 它可以用來把一批子對象組織成樹形結(jié)構(gòu)，并且使整棵樹都可它可以用來把一批子對象組織成樹形結(jié)構(gòu)，并且使整棵樹都可以被遍歷。以被遍歷。第六講 6.8 組合模式（二） 組合對象的結(jié)構(gòu)總公司總公司分公司分公司2分公司分公司1分公司分公司1部門部門1分公司分公司1部門部門2分公司分公司1部門部門3分

43、公司分公司2部門部門1分公司分公司2部門部門2分公司分公司2部門部門3第六講 6.8 組合模式（三） 組合模式的使用場景： 1 存在一批組織成某種層次體系的對象 2 希望對這批對象或其中的一部分對象實施一個操作。 組合模式的特點： 組合模式中只有兩種類型對象：組合對象、葉子對象 這兩種類型都實現(xiàn)同一批接口 一般我們會在組合對象中調(diào)用其方法并隱式調(diào)用下級對象的方法（這里我們一般采用遞歸的形式去做）第六講 6.9 門面模式 門面模式（facade）一般有兩個作用： 簡化類的接口 消除類與使用它的客戶代碼之間的耦合。 門面模式常常是開發(fā)人員最親密的朋友。它幾乎是所有javascript庫的核心原則。

44、 門面模式的目的是為了讓開發(fā)人員用更簡單的方法調(diào)用一些相對復(fù)雜或組合的方法，主要就是簡化開發(fā)的復(fù)雜性，提供一個相對容易的API去調(diào)用內(nèi)部的方法供外界去使用，這樣程序員開發(fā)會變得輕松些，編寫一次組合代碼后可以反復(fù)的去使用它，有助于節(jié)省時間和精力。 當(dāng)然也不要濫用門面模式，所以使用你心儀的門面之前一定要三思而定，搞不好你就會小題大做。第六講 6.10 適配器模式適配器模式可用來在現(xiàn)有的接口和不兼容的類之間進行適配。使用這種模式的對象又叫做包裝器（wrapper），因為他們是在用一個新的接口包裝另一個對象。借助適配器可以處理一些類與API不匹配、不能一同使用的情況。注意適配器和門面雖然比較類似，但是

45、門面模式只是為了簡化一個接口，它并不是提供額外的選擇，適配器則要把一個接口轉(zhuǎn)換為另一個接口，它并不會濾除某些能力，也不會簡化接口。第六講 6.11 裝飾者模式 裝飾者：（decorator）是一種為對象添加新特性的技術(shù)是一種為對象添加新特性的技術(shù),它并不適用創(chuàng)建新子類的這種手段。裝飾者模式可以用來透明的把透明的把原始原始對象包裝在具有同樣接口的另一個對象之中對象包裝在具有同樣接口的另一個對象之中。這樣我們就可以為對象添加一個方法或者一些行為，然后將方法調(diào)用傳遞給原始對象。第六講 6.12 享元模式 享元模式是一種優(yōu)化模式。它最適合解決因創(chuàng)建大量類似對象而累及性能的問題。這種模式在javascript中尤其有用，因為復(fù)雜的javascript代碼可能很快就會用光瀏覽器的所有可用內(nèi)存。通過把大量獨立對象轉(zhuǎn)化為少量共享對象，可用降低運行web應(yīng)用程序所需的資源數(shù)量。 享元模式的基本優(yōu)化 web日