JavaScript提升篇之面向對象之單利模式工廠模型構造函數原型鏈模式
1.單例模式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>面向對象之單例模式</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 //對象數據類型的做用： 11 //把描述同一個事物（同一個對象）的屬性和方法放在同一個內存空間下，起到了分組的做用， 12 //這樣不一樣的事物之間的屬性即便屬性名相同，相互也不會衝突。 13 //--->咱們把這種分組編寫代碼的模式叫作「單例模式」 14 //--->在單例模式中咱們把person1或者person2也叫作命名空間。 15 16 var person1={ 17 name:"lizebo", 18 age:23 19 }; 20 var person2={ 21 name:"liutinghhh", 22 age:22, 23 }; 24 console.log("========="); 25 console.log(person1.name); 26 console.log(person2.name); 27 28 29 //單例模式是一種項目開發中常用的模式，由於項目中咱們可使用單例模式進行「模塊開發」 30 //「模塊開發：」相對一個來講比較大的項目，須要多人寫做的開發，咱們通常下會根據當前項目的需求劃分紅幾個功能模塊，每一個人負責一部分，同時開發， 31 //最後把代碼合在一塊兒。 32 </script> 33 </body> 34 </html>
2.工廠模式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>工場模式</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 var jsPerson1={ 11 name:"walihong", 12 age:48, 13 writeJs:function () { 14 console.log("my name is"+this.name+",i can write javascript"); 15 } 16 }; 17 jsPerson1.writeJs(); 18 console.log("========工廠設計模式======") 19 //單例設計模式是手工做業模式，雖然解決了分組的做用，可是不能實現批量生產，屬於手工做業模式-->這就出現了工廠模式：顧名思義，就是批量生產。 20 //工廠模式就是把實現同一件事情的代碼放到一個函數中，之後若是在想實現這個這個功能，不須要重新的編寫這些代碼來了，只須要執行當前的函數便可。 21 //工廠模式有一個專業的名詞，「函數的封裝」。--->低耦合，高內聚，減小頁面中的冗餘代碼，提升代碼的重複利用率。 22 function createJsPerson(name,age) { 23 var obj={}; 24 obj.name=name; 25 obj.age=age; 26 obj.writeJs=function () { 27 console.log("my name is"+this.name+",i can write javascript"); 28 } 29 return obj; 30 } 31 var personDemo1=createJsPerson("lizbeo",234); 32 personDemo1.writeJs(); 33 //這樣上面的方法就能夠批量生產！ 34 //js是一門輕量級的腳本「編程語言」（HTML+CSS不屬於編程語言，屬於標記語言） 35 //繼承：子類繼承父類中的屬性和方法 36 //多態：當前的函數的多種形態 37 //在後臺語言中：多態包含重載和重寫 38 39 //JS中不存在重載，方法名同樣的話，後面的會把前面的覆蓋掉，最後只保留一個。 40 //爲何js面向對象可是有沒有重載呢？ 41 //1.高階層次，在js中，存在預解釋機制（js中特有的機制），它只會申明函數一次,若是遇到了 42 //與函數名字相同，那麼它不會再次申明和定義，只會從新賦值。 43 //2.在函數的層次，在js函數中，全部的函數的參數都用一個相似數組的arguments接收，這個argument接收一切參數， 44 //即便你傳入的參數比定義時候的參數多，那麼它也就收而且值爲undefined，而不會報錯，這也間接證實了沒有重載。 45 46 //js中有重寫：子類重寫父類的方法......未完待續！！！ 47 48 49 </script> 50 </body> 51 </html>
3.構造函數模式基礎
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>構造函數模式基礎</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //構造函數模式的目的就是爲了建立一個自定義類，而且建立這個類的實例。 10 //========工廠模式例======== 11 function creatFactor(name,age){ 12 var obj={}; 13 obj.name=name; 14 obj.age=age; 15 obj.methodFactoryMethod=function () { 16 console.log("my name is "+this.name+",my age is "+this.age+",在學JavaScript") 17 } 18 return obj; 19 //若是把var obj={} 和return obj去調用，而且把obj換成this,那麼就變成了類；那麼咱們執行的時候，若是 20 // 使用var demo=createFactor("李澤"，23);這是普通方法執行，因爲沒有返回值；因此 21 // 結果是undefined。那麼this這裏指的又是什麼呢？因爲沒有人調用，這個this就是指的是 22 // window這個對象。。 23 24 // 而在使用new 以後，結果就返回了一個對象；爲何，簡單說瀏覽器執行到這兒的時候， 25 // 一看到new這個關鍵字，他會自動建立一個對象而且返回，這是咱們看不到的，因此咱們能夠 26 // 使用var demo來進行接收。 27 } 28 var demo=creatFactor("lizbeo",23); 29 demo.methodFactoryMethod(); 30 31 //構造函數模式和工廠模式的區別？ 32 //1.執行的時候 33 //普通函數執行-->creatFactor(); 34 //構造函數模式：-->new creatFactor(); 35 //經過new執行，咱們的creatFactor就是一個類了。參照js內置類的命名方式，類的第一個首字母大寫。 36 //而函數執行的返回值p1就是creatFactor這個類的一個實例 37 //2.函數代碼執行的時候 38 //相同點：都是造成一個私有做用域，而後經歷形式參數賦值-->預解釋--->代碼從上到下執行（類和普通函數同樣，它有普通函數的一面）。 39 //不一樣點：在代碼執行以前，不用手動建立對象了，瀏覽器會默認建立對象數據類型的值。 40 // （這個對象其實就是當前類的一個實例） 41 // 接下來代碼從上到下執行，以當前的實例執行的主體（this表明的是當前的實例）, 42 // 而後分別把屬性名和屬性值賦值給當前的實例。 43 // 最後瀏覽器會默認的把建立的實例返回。 44 console.log("=============") 45 //不須要在手動建立返回的對象，瀏覽器會將默認的對象返回，咱們只須要定義一個var進行接收。 46 var p1=new creatFactor("liuhuan",23); 47 p1.methodFactoryMethod(); 48 49 console.log("========數組實例：=========") 50 //好比建立一個數組： 51 // 字面量方式 52 var ary=[]; 53 // 實例建立方式-->構造函數執行模式的方式。 54 var ary1=new Array(); 55 //無論哪種方式，ary都是Array這個類的一種實例 56 57 //1.*js中全部的類都是函數數據類型的，它經過new 執行變成了一個類，可是他自己也是一個普通的函數。---優勢跟Java不同，js直接把類歸在了函數數據類型中。 58 //js中全部的實例都是對象數據類型的， 59 60 //2.*****this的第4種用法*******在構造函數模式中，類中（函數體中）出現的this.xxx=xxx中的this是當前類的一個實例。 61 62 var p2=new creatFactor("WangXi",48); 63 //這裏的p2是createFactor類的另一個實例 64 console.log("================"); 65 p2.methodFactoryMethod(); 66 //3.p1和p2都是creatFactor這個類的實例，因此都擁有writeJS這個方法，可是不一樣實例之間的方法是不同的。 67 //在類中給實例增長的屬性（this.xxx=xxx）屬於當前實例的私有屬性，實例與實例之間是單獨的個體，因此私有屬性不是同一個，是不相等的。 68 console.log(p1.methodFactoryMethod===p2.methodFactoryMethod);//flase 69 </script> 70 </body> 71 </html>
4.構造函數模式擴展
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>構造函數擴展</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 function Fn() { 11 this.x=100; 12 this.getX=function () { 13 console.log(this.x); 14 } 15 } 16 var f1=new Fn; 17 //1.在構造函數模式種，new Fn()執行，若是Fn種不傳遞參數，（）能夠省略。 18 //2.this的問題：在類種出現的this.xxx=xxx中的this都是當前類的實例。而某一屬性值（方法），方法中的this須要看方法執行的時候，前面是否是有"." 19 //才能知道this所指。 20 f1.getX();//--->方法中的this是f1-->100 21 var ss2=f1.getX; 22 ss2();//方法中的this是window-->undefined 23 24 console.log("=========例子2：=========="); 25 function Fn1(){ 26 var num=10; 27 this.x=100; 28 this.getx=function () { 29 console.log(this.x); 30 } 31 } 32 var f1=new Fn1; 33 console.log(f1.num);//undefined 34 console.log("=========例子3======="); 35 36 function Fn3() { 37 var num=109; 38 this.x=100; 39 this.getX=function () { 40 console.log(this.x); 41 } 42 return 100; 43 } 44 var f3=new Fn3; 45 console.log(f3); 46 //4.在構造函數模式中瀏覽器會把咱們的實例返回（返回的是一個對象數據類型的值）；若是咱們本身手動寫了return返回； 47 //返回的是一個基本的數據類型的值，當前實例是不變的，列如：return 100； 48 //咱們的f3仍是當前Fn3類的實例 49 //返回的是一個引用數據類型的值，當前的實例會被本身返回的值給替換掉，列如： 50 //return（name:"哈哈"）咱們的f3就再也不是Fn3的實例了，而是對象{name:"哈哈"}; 51 52 //5.檢測某一個實例是否屬於一個類-->instanceof 53 console.log(f3 instanceof Fn3);//--->true; 54 console.log(f3 instanceof Array);//---->false; 55 console.log(f3 instanceof Object);//---->true;由於全部的實例都是Object類型的 56 //而每個對象數據類型都是Object這個內置類的一個實例，爲啥這樣?未完待續！！！！ 57 console.log("========================") 58 //對於檢測數據類型來講，typeof有本身的侷限性，不能區分Object下的對象，數組，正則。 59 var a=[]; 60 console.log(a instanceof Array);//-->true 61 //6.檢測共有屬性。 62 var f4=new Fn3; 63 var f5=new Fn3; 64 //in:檢測某一個屬性是否屬於這個對象 attr in object，無論是私有的仍是公有的屬性，只要存在，用in 來檢測都是true 65 console.log("getX" in f5);//-->true 是它的一個屬性。 66 //hasOwnProperty:用來檢測某一個屬性是否爲對象的「私有屬性」，這個方法只能檢測私有的屬性 67 console.log(f5.hasOwnProperty("getX"));//--->true "getX"是f5的私有屬性。 68 69 //思考：檢測一個屬性是不是對象的「公有屬性」 hasGongYou方法 70 function hasGongYou方法 (obj,attr) { 71 if(attr in obj){ 72 if(jianCe.hasOwnProperty(attr)){ 73 return true; 74 } 75 } 76 else { 77 return false; 78 } 79 } 80 var jianCe={name:"lizbeo"}; 81 var zhenJia=hasGongYou方法(jianCe,"name") 82 console.log("====================") 83 console.log(zhenJia) 84 //簡寫 85 function hasPubProperty(object1,attr) { 86 return (attr in object1) && !object1.hasOwnProperty(attr); 87 } 88 var jianCe1={name:"lizbeo"}; 89 var zhenJia1=hasGongYou方法(jianCe1,"name") 90 console.log("===========") 91 console.log(hasPubProperty(jianCe1,"name")) ; 92 93 //7.isPrototypeOf 94 </script> 95 </body> 96 </html>
5原型鏈模式基礎
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>15原型鏈模式基礎</title> 6 </head> 7 <body> 8 9 10 <script type="text/javascript"> 11 // 1.類例子回顧--構造函數模式 12 13 console.log("===============原型鏈的引出======================") 14 function createDemo(name,age) { 15 this.name=name; 16 this.age=age; 17 this.writeJs=function () { 18 console.log("my name is"+this.name+",i can write Js"); 19 }; 20 } 21 var p1=new createDemo("liuhze",234); 22 var p2=new createDemo("liuhuan",25); 23 console.log(p1.writeJs===p2.writeJs);//false; 24 //構造函數擁有了類和實例的概念，而且類和實例之間是相互獨立開的-->實例識別。 25 // 2.可不可讓私有的writeJs方法，成爲共有的呢？也就是說，咱們實例化2個對象p1和p2他們有公有的方法 26 function createDemo2(name,age) { 27 this.name=name; 28 this.age=age; 29 createDemo2.prototype.writeJs=function () { 30 console.log("my name is"+this.name+", i can write JS "); 31 }; 32 } 33 var p3=new createDemo2("李強",23); 34 var p4=new createDemo2("劉華",26); 35 console.log(p3.writeJs===p4.writeJs);//這樣結果就是true了，這2個實例調用了公有的方法。 36 //基於構造函數模式的原型模式解決了 方法或者屬性公有的問題-->把實例之間相同的屬性和方法提取成公有的屬性和方法---》 37 //想讓誰公有就把它放在createJsPerson.prototype上便可。 38 39 console.log("=====================原型鏈==============================="); 40 41 //1.每個函數數據類型（普通函數，類）都有一個天生的自帶屬性：prototype(原型)，而且這個屬性是一個對象數據類型的值 42 //2.而且在prototype上瀏覽器天生給它加了一個屬性constructor（構造函數），屬性值是它當前函數（類）自己。 43 //3.每個對象數據類型(普通的對象，實例，prototype)也天生自帶一個屬性：__proto___, 44 //這個屬性值是當前實例所屬類的原型（prototype）。 45 46 function Fn() { 47 this.x=100; 48 Fn.prototype.getX=function () { 49 console.log(this.x); 50 } 51 } 52 var f1=new Fn(); 53 var f2=new Fn(); 54 console.log(f1.getX===f2.getX);//true 55 console.log(Fn.prototype.constructor);//結果是函數Fn的代碼字符串！！！ 56 //原理見圖原型鏈1.png 57 console.log(Fn.prototype.constructor===Fn);//true 58 // 2 .Object是全部JS中全部對象數據類型的父類（最頂層的類） 59 //1）.f1 instanceof Object-->true由於f1經過__proto__能夠想上級查找 60 //無論有多少級，最後總能找到Object. 61 //2）.在Object.prototype上沒有__proto__這個屬性， 62 63 // 3.原型鏈模式 64 //f1.hasOwnProperty("x");hasOwnProperty是f1的一個屬性 65 //可是咱們發如今f1的私有屬性上並無這個方法，那如何處理呢？ 66 //經過 對象名.屬性名獲取屬性值的時候，首先在對象的私有屬性上進行查找，若是私有的屬性存在這個屬性則 67 //獲取的是私有屬性值； 68 //若是私有屬性沒有，則經過__proto__找到所屬類的原型（類的原型上定義的屬性和方法都是當前實例的公有的屬性和方法）， 69 //原型上存在的話，獲取公有的屬性值； 70 //若是原型上也沒有，則繼續經過原型上的__proto___繼續向上查找。一直找到Object.prototype爲止。 71 //這種查找機制就是咱們的「原型鏈模式」 72 73 // 練習題 74 console.log("===========原型鏈的練習題=========="); 75 var tf1=f1.getX===f2.getX;//---->true 76 console.log(tf1); 77 console.log(f1.__proto__.getX===f2.getX);//--->true 78 console.log(f1.getX===Fn.prototype.getX);//--->true; 79 80 console.log(f1.hasOwnProperty===f1.__proto__.__proto__.hasOwnProperty);//true; 81 //在IE瀏覽器中，咱們原型模式也是一樣的原理，可是IE瀏覽器怕你經過__proto__把公有的修改，禁止使用__proto__. 82 //IE瀏覽器會有保護機制，因此不讓你經過__proto__一直修改屬性，他會提示這個屬性不存在。 83 </script> 84 </body> 85 </html>
6.原型鏈模式擴展-this和原型擴展
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>課時16：原型鏈模式擴展-this和原型擴展</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 //在原型模式中，經常使用的有2中狀況： 11 //在類中this.xxx=xxx;this--->當前累的實例 12 //在某一個方法中this--->看執行的時候，」."前面是誰，就是誰。 13 //1）須要先肯定this的指向（this是誰） 14 //2）吧this替換成對應的代碼 15 //3）按照原型鏈查找機制，一步步查找數值。 16 function Fn() { 17 this.x=100; 18 this.y=100; 19 this.getY=function () { 20 console.log(this.y); 21 }; 22 } 23 Fn.prototype={ 24 constructor:Fn, 25 y:300, 26 getX:function () { 27 console.log(this.x); 28 }, 29 getY:function () { 30 console.log(this.y); 31 } 32 } 33 34 35 var f=new Fn; 36 f.getX();//執行的是公有屬性中的getX()方法，先去找私有的，沒有去找公有的。100 37 //-->執行步驟：console.log(f.x)-->100 38 //f.__proto__.getx();//結果是undefined,有意思吧。 39 //this是f.__proto__--->f.__proto__.x-->沒有x的值，再去找Object的值，沒有因此undefined。 40 // 練習題 41 Fn.prototype.getX();//---->undefined 42 f.getY();//---->200; 43 // f.__proto__.getY();f//---->300; 44 console.log("========數組實現內置方法去重======") 45 Array.prototype.myUnique=function () { 46 //this---> 47 console.log("這是原型鏈中公有的方法，使用ary.myUnique執行的是公有方法！") 48 var obj={}; 49 for(var i=0;i<this.length;i++){ 50 var cur=this[i]; 51 if(obj[cur]==cur){ 52 this[i]==this[this.length-1]; 53 this.length--; 54 i--; 55 continue; 56 } 57 obj[cur]=cur; 58 } 59 obj=null; 60 }; 61 var ary=[]; 62 var ary1=[12,34,34,34,34,34,56,66,66,66,777]; 63 ary.myUnique(); 64 Array.prototype.myUnique(); 65 ary1.myUnique(); 66 console.log(ary1); 67 68 //數組排序之鏈式寫法 69 console.log("===========數組排序之鏈式寫法=========") 70 //原理： 71 //aryDemo爲何可使用sort方法？由於sort是Array.prototype上公有的方法，而數組是 72 //aryDemo是Array這個類的一個實例，因此可使用sort方法--->因此只有數組才能使用Arra 73 //y原型上定義的屬性和方法。 74 //sort執行完成的放回置是一個排序後的「數組」,(其實就是爲了實現執行後返回的仍是一個數組的實例) 75 //reverse執行完成的返回值是一個數組，能夠繼續執行pop 76 //pop執行完成的返回值是被刪除的那個元素，不是一個數組了。也就是說pop後面是不能在繼續」.「了。 77 //要想弄清楚爲何這樣寫必須搞清楚對象的原型鏈 78 // 79 //一句話：要想實現鏈式寫法必須返回的是一個類的實例。 80 var aryDemo=[12,34,23,4,3,343,45,34,34,34,656]; 81 aryDemo.sort(function (a,b) { 82 return a-b; 83 }).reverse().pop(); 84 console.log(aryDemo); 85 86 </script> 87 </body> 88 </html>
7.原型鏈模式擴展-this和原型擴展-練習題
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>課時16：原型鏈模式擴展-this和原型擴展-練習題</title> 6 <!--在數組的原型上有一個方法叫作slice，要求：本身實現一個myslice方法。 7 Array.prototype.mySlice=function(){ 8 <js code > 9 } 10 考慮的狀況： 11 slice（n,m）; 12 slice(n); 13 slice(); 14 n和m是負數，什麼狀況? 15 n<m是什麼狀況 16 n和m的值超過數組的長度是什麼狀況 17 n和m不是有效數字是什麼狀況 18 . 19 .. 20 ... 21 22 不能使用數組內置的方法：不能使用數據內置的方法，好比添加不能使用push, 23 而是用ary[ary]; 24 25 2.(面試題)實現一個需求： 26 （5）.plus(10).reduce(2) 5+10-2 27 Number.prototype.plus=function(num){}; 28 Number.prototype.reduce=function(num){}; 29 30 --> 31 </head> 32 <body> 33 <script type="text/javascript"> 34 35 </script> 36 </body> 37 </html>
8.原型鏈模式擴展-批量設置公有屬性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>課時17：原型鏈模式擴展-批量設置公有屬性</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 console.log("批量設置原型上的公有屬性！"); 10 11 12 13 //jQuery就是使用這種方式進行構架的 14 function Fn() { 15 this.x=10; 16 } 17 //1.起別名 18 var pro=Fn.prototype;//把原來類型指向的地址賦值給咱們的pro,如今他們 19 //操做的是同一個內存空間 20 pro.getX=function () { 21 22 }; 23 //2.重構原型對象的方式-->本身從新開闢一個堆內存， 24 function Fn1() { 25 this.x=100; 26 } 27 Fn1.prototype={ 28 constructor:Fn1,//必須手動指定constructor不然就是Object了。這樣作的目的就是爲了保持一直。 29 a:function () { 30 console.log("我是重構的！"); 31 }, 32 b:function () { 33 34 }, 35 }; 36 var f=new Fn1; 37 //能執行a. 38 //1)只有瀏覽器天生給Fn.prototype開闢的堆內存裏面纔有constructor，而而咱們本身開闢 39 //的這個堆內存沒有這個屬性，這樣constructor指向不在是Fn而是Object了 40 //爲了和原來的保持一直，須要手動的增長constructor的指向 41 //手動增長一個constructor：Fn1 42 f.a(); 43 console.log(f.constructor); 44 f.b(); 45 46 //2.用這種方式給內置類增長公有的屬性 47 //給內置類Array增長數組去重的方法 48 Array.prototype.unique=function () { 49 //js code 50 }; 51 52 Array.prototype={ 53 constructor:Array, 54 unique:function () { 55 56 }, 57 }; 58 console.log("=====強行清空Array內置方法===========") 59 console.dir(Array.prototype); 60 //咱們使用方式會把以前已經存在原型上的屬性和方法替換掉，因此咱們中這種方法 61 //修改內之類的話，瀏覽器是給屏蔽的。 62 //可是咱們能夠一個一個的修改瀏覽器的內置方法。若是方法名和原來的內置的重複了， 63 //會把人家內置的修改掉---->之後咱們在內置內的原型上增長方法，命名都須要加上特殊的前綴。 64 console.log("===========另一個例子==============="); 65 var ary=[1,2,3,4,5,6,7]; 66 ary.sort(); 67 console.log(ary); 68 69 Array.prototype.sort=function () { 70 // console.log(this)//this-->aryDemo 咱們當前操做的對象， 71 console.log("ok!"); 72 } 73 // 修改數組中的內置方法，sort使他成爲本身的內置方法。 74 var aryDemo=[1,2,2,1,2,2,3,4,5,6,7]; 75 aryDemo.sort(); 76 console.log(aryDemo); 77 </script> 78 </body> 79 </html>
9.深刻擴展原型鏈模式經常使用的六種繼承方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>18.深刻擴展原型鏈模式經常使用的六種繼承方式</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 //--->div ,a,document,window, 11 12 function Fn() { 13 this.x=100;//這裏的this指的是Fn的一個實例 14 //->在類的函數體中寫的this.xxx=xxx都是當前類的實例 15 this.getX=function () { 16 console.log(this.x); 17 } 18 } 19 Fn.prototype.getX=function () { 20 console.log(this.x); 21 }; 22 Fn.prototype.setX=function (n) { 23 this.x=n; 24 }; 25 //在類的原型上寫的都是給當前類的實例或者當前類 26 //見圖片原型鏈圖片.PNG 27 var f1=new Fn; 28 console.log(f1.hasOwnProperty("x")); 29 //1.全部的函數數據類型都天生自帶一個屬性：prototype,它存儲的值是一個對象數據類型的值，瀏覽器默認爲其開闢一個對 30 //一個堆內存 31 //2.在瀏覽器默認給prototype默認開闢的這個堆內存上都有一個默認的屬性： 32 //constructor，指向當前類自己 33 //3.每個對象數據類型(普通函數，數組，正則，實例，prototype)都天生自帶一個屬性（__proto__）：__prototype__,指向當前實例所屬類的原型。 34 var f1=new Fn; 35 var f2=new Fn; 36 37 38 //1.看方法執行的時候，」.「前面是誰，this就是誰。 39 //2.吧函數中this替換成分析的結果 40 //3.按照原型鏈的查找模式找到對應的值便可 41 f1.getX();//100;f1.getX();，console.log(f1.x); 42 // 練習 43 f2.getX();//100; 44 f2.__proto__.getX();//this-->f2.__prototype__,結果是undefined 45 46 Fn.prototype.setX(300);//X設置成300; 47 f2.getX();//100; 48 f2.__proto__.getX();//300 49 50 </script> 51 </body> 52 </html>
10.一道題（原型鏈）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 function Fn(num) { 10 this.x=this.y=num; 11 } 12 Fn.prototype={ 13 x:20, 14 sum:function () { 15 console.log(this.x+this.y); 16 } 17 }; 18 var f=new Fn(10); 19 console.log(f.sum==Fn.prototype.sum);//true; 20 f.sum();////f.x=10 f.y=10 結果爲20 21 Fn.prototype.sum();//this.x=20; 結果是： NaN; 22 console.log(f.constructor);//Object 23 24 //這道題能夠的。 25 </script> 26 27 </body> 28 </html>
11.原型鏈複習
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>原型鏈綜合複習參考2</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 function Fn() { 10 this.x=100; 11 } 12 Fn.prototype={ 13 //注意構建 constructtor. 14 //瀏覽器不會開constructtor,可是我能夠本身加啊。 15 constructor:Fn, 16 a:function () { 17 18 }, 19 b:function () { 20 21 }, 22 23 }; 24 var f=new Fn; 25 //這種方式若是以前原型上存在一些方法，咱們如今新建立的對象會把以前寫的那些覆蓋掉。 26 //可是全部內置類的原型都有保護； 27 //好比： 28 Array.prototype={}; 29 //因此瀏覽器禁止建立一個新對象來擴展原型上的方法， 30 //本身建立的對象不會天生自帶constructor，因此致使了咱們的f.constructor的結果 31 //是Object而不是咱們認爲的Fn了。 32 33 </script> 34 </body> 35 </html>
12.在內之類的原型上擴展方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>在內之類的原型上擴展方法</title> 6 </head> 7 <body> 8 9 10 <script type="text/javascript"> 11 var ary=[11,22,33,44]; 12 ary.pop();//this-->ary 13 ary.__proto__.pop();//this--->ary.__proto__-->Array.prototype 14 //這種方式不能夠刪除。 15 16 //基於內置類的原型擴展方法，咱們須要注意的事項：咱們本身編寫的方法名最好加上特殊的前綴，防止把內置方法覆蓋掉 17 Array.prototype.myPaixu=function myPaixu () { 18 //this-->ary; 19 var obj={}; 20 for (var i =0;i<this.length;i++){ 21 var cur=this[i]; 22 if(obj[cur]==cur){ 23 this[i]=this[this.length-1]; 24 this.length--; 25 i--; 26 continue; 27 28 } 29 obj[cur]=cur; 30 } 31 obj=null; 32 //實現鏈式寫法。 33 return this; 34 }; 35 var ary1=[1,2,2,3,3,5,66,66,66]; 36 ary1.myPaixu().sort(function (a,b) { 37 return a-b; 38 }); 39 console.log(ary1); 40 </script> 41 </body> 42 </html>
13.深刻擴展原型鏈模式經常使用的六種繼承方式（1）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>19深刻擴展原型鏈模式經常使用的六種繼承方式</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 10 var obj={}; 11 var obj=new Object(); 12 //這2中方式沒有區別，一個是字面量，一個是經過構造函數方式。 13 14 //擴展Object屬性 15 Object.prototype.aaa=function AAA() { 16 console.log("我是自定義的公有屬性！") 17 }; 18 19 var obj2={name:"lizbeo",age:23}; 20 for (var shuXing in obj2){ 21 //---->for in 循環在遍歷的時候能夠把本身私有的和在它 22 //所屬類的原型上擴展的屬性和方法均可以遍歷到 23 //可是通常狀況下，咱們遍歷一個對象只須要遍歷私有的便可， 24 //咱們可使用如下的判斷 25 if(obj2.propertyIsEnumerable(shuXing)){} 26 console.log(shuXing); 27 // if(obj2.hasOwnProperty(shuXing)){ 28 // console.log(shuXing) 29 // } 30 } 31 </script> 32 </body> 33 </html>
14.深刻擴展原型鏈模式經常使用的六種繼承方式（2）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>19深刻擴展原型鏈模式經常使用的六種繼承方式2</title> 6 </head> 7 <body> 8 9 10 <script type="text/javascript"> 11 // 1. 原生繼承！！！！！！！！！ 12 //--->#div.__pro__-->HTMLDivElement.prototype-->HTMLElement.prototype 13 //-->Element.prototype-->Node.prototype--->EventTarget.prototype--->O 14 //bject.prototype; 15 function myObject() { 16 this.getInformation=function () { 17 console.log("我是myObject的私有屬性！"); 18 } 19 20 } 21 myObject.prototype=new Object; 22 myObject.prototype.aaaaaa=function () { 23 console.log("我是繼承原生繼承！"); 24 }; 25 26 function myTargetElement () { 27 28 } 29 myTargetElement.prototype=new myObject; 30 31 var A=new myTargetElement(); 32 A.aaaaaa(); 33 A.getInformation(); 34 //這就是原生繼承。 35 //====》原生繼承是咱們JS中最經常使用的繼承方式， 36 //-----》1）子類B想要繼承父類A中的屬性和方法（私有+公有），只須要讓B的prototype=new A的一個實例；便可 37 //注意如下，全部方法，包括私有方法很關鍵。 38 //2）原型繼承有個特色：他是把父類中私有的+公有的都繼承到了子類的原型上（子類公有） 39 40 </script> 41 </body> 42 </html>
15.深刻擴展原型鏈模式經常使用的六種繼承方式（3）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>19深刻擴展原型鏈模式經常使用的六種繼承方式3</title> 6 </head> 7 <body> 8 9 <div id="div1"></div> 10 <script type="text/javascript"> 11 var doc=document.getElementById("div1"); 12 // 原型鏈的核心：見圖 原型鏈的核心思想.PNG 13 //原生繼承並非把父類中的屬性和方法克隆一份一摸同樣的給B，而是讓B和A之間增長了原型鏈的鏈接，之後B的實例想要從A中 14 //得到getX的方法，須要一級一級的去查找。 15 //可是有一個弊端： 16 //見圖 原型鏈的核心思想2.PNG 17 18 //--->核心：原型繼承並非把父類中的屬性和方法克隆一個一摸同樣的給B，而是讓B和A之間增長了原型鏈的鏈接，之後B的實例想要從 19 //A中的getX方法，須要一級級向上查找來使用。 20 21 22 23 </script> 24 </body> 25 </html>
16.深刻擴展原型鏈模式經常使用的六種繼承方式（4）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>19深刻擴展原型鏈模式經常使用的六種繼承方式之其餘繼承</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 // function A() { 11 // this.x=100; 12 // } 13 // A.prototype.getX=function () { 14 // console.log(this.x); 15 // }; 16 // function B() { 17 // 18 // A.call(this); 19 // } 20 // var n=new B; 21 // console.log(n.x); 22 // //call繼承：就是把父類私有的屬性和方法 克隆一根一摸同樣的做爲子類私有的屬性 23 // 還有一些繼承 ：1.冒充對象繼承：把父類私有的+公有的克隆一份一摸同樣的給子類。 24 </script> 25 </body> 26 </html>
--lzb
相關文章
- 1. javascript--面向對象（2、工廠模式，構造函數，原型模式）
- 2. js面向對象-工廠模式和構造函數模式
- 3. JavaScript建立對象之單例、工廠、構造函數模式
- 4. 工廠模式，構造函數模式和原型模式
- 5. 單例模式，工廠模式，構造函數模式，原型模式難嗎？
- 6. JavaScript深刻之：構造函數、單例模式、工廠模式、原型鏈模式
- 7. 面向對象之工廠模式與構造函數模式的區別
- 8. javascript工廠模式和構造函數模式建立對象
- 9. JavaScript--單例模式工廠模式 ，以及原型鏈模式
- 10. JavaScript對象模式——組臺模式_構造函數和原型模式
- 更多相關文章...
- • ASP.NET MVC - 模型 - ASP.NET 教程
- • Scala 模式匹配 - Scala教程
- • 委託模式
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章