當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

javascript设计模式-继承

發(fā)布時(shí)間：2023/12/18 javascript 15 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript设计模式-继承小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

javascript繼承分為兩種：類式繼承（原型鏈、extend函數(shù)）、原型式繼承（對(duì)繼承而來的成員的讀和寫的不對(duì)等性、clone函數(shù)）。

類式繼承-->prototype繼承： 1 function Person(name){ 2 this.name = name; 3 } 4 Person.prototype.getName = function(){ 5 return this.name; 6 } 7 8 //繼承 9 function Author(name,books){ 10 Person.call(this,name); 11 this.books = books; 12 } 13 Author.prototype = new Person(); 14 Author.prototype.constructor = Author; 15 Author.prototype.getBooks = function(){ 16 return this.books; 17 } 18 19 var author = new Author("zap","javascript程序設(shè)計(jì)"); 20 console.log(author);

類式繼承-->extend函數(shù)： 1 function extend(subClass,superClass){ 2 var F = function(){}; 3 F.prototype = superClass.prototype; 4 subClass.prototype = new F(); 5 subClass.prototype.constructor = subClass; 6 7 subClass.superClass = superClass.prototype; 8 if(superClass.prototype.constructor == Object.prototype.constructor){ 9 superClass.prototype.constructor = superClass; 10 } 11 } 12 13 14 /*Class Person*/ 15 16 function Person(name){ 17 this.name = name; 18 } 19 Person.prototype.getName = function(){ 20 return this.name; 21 } 22 23 function Author(name,books){ 24 Author.superClass.constructor.call(this,name); 25 // Person.call(this,name); 26 this.books = books; 27 } 28 extend(Author,Person); 29 Author.prototype.getBooks = function(){ 30 return this.books; 31 } 32 33 var author = new Author("zap","javascript程序設(shè)計(jì)"); 34 console.log(author); 35 console.log(author.getName()); 36 console.log(author.getBooks());

原型式繼承-->clone函數(shù)：(原型式繼承更能節(jié)約內(nèi)存) 1 var Person ={ 2 name:"zap", 3 age:"26", 4 toString:function(){ 5 console.log(this.name + "@" + this.age); 6 } 7 } 8 9 var author = clone(Person); 10 author.name = "zap"; 11 author.toString(); 12 13 function clone(object){ 14 function F(){} 15 F.prototype = object; 16 return new F; 17 }

?附上以類式繼承實(shí)現(xiàn)的就地編輯demo，原型式方式實(shí)現(xiàn)和類式繼承方式相差無幾，不在此列舉。

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>類式繼承解決方案</title> 6 <style type="text/css"> 7 #doc{width:500px; height:300px; border:1px solid #ccc; margin:10px auto;} 8 </style> 9 </head> 10 <body> 11 <div id="doc"></div> 12 </body> 13 </html> 14 <script type="text/javascript"> 15 16 function EditInPlaceField(id,parent,value){ 17 this.id = id; 18 this.value = value || "default value"; 19 this.parentElement = parent; 20 21 this.createElements(this.id); 22 this.attachEvents(); 23 } 24 25 EditInPlaceField.prototype = { 26 createElements:function(id){ 27 this.createContainer(); 28 this.createShowPanel(); 29 this.createEnterPanel(); 30 this.createControlBtns(); 31 this.convertToText(); 32 }, 33 //創(chuàng)建容器 34 createContainer:function(){ 35 this.containerElement = document.createElement("div"); 36 this.parentElement.appendChild(this.containerElement); 37 }, 38 createShowPanel:function(){ 39 this.staticElement = document.createElement("span"); 40 this.containerElement.appendChild(this.staticElement); 41 this.staticElement.innerHTML = this.value; 42 }, 43 createEnterPanel:function(){ 44 this.fieldElement = document.createElement("input"); 45 this.fieldElement.type = "text"; 46 this.fieldElement.value = this.value; 47 this.containerElement.appendChild(this.fieldElement); 48 }, 49 createControlBtns:function(){ 50 this.saveButton = document.createElement("input"); 51 this.saveButton.type = "button"; 52 this.saveButton.value = "Save"; 53 this.containerElement.appendChild(this.saveButton); 54 55 56 this.cancelButton = document.createElement("input"); 57 this.cancelButton.type = "button"; 58 this.cancelButton.value = "Cancel"; 59 this.containerElement.appendChild(this.cancelButton); 60 }, 61 attachEvents:function(){ 62 var that = this; 63 addEvent(this.staticElement,"click",function(){that.convertToEditable();}); 64 addEvent(this.saveButton,"click",function(){that.save();}); 65 addEvent(this.cancelButton,"click",function(){that.cancel();}); 66 }, 67 convertToEditable:function(){ 68 this.staticElement.style.display = "none"; 69 this.fieldElement.style.display = "inline"; 70 this.saveButton.style.display = "inline"; 71 this.cancelButton.style.display = "inline"; 72 73 this.setValue(this.value); 74 }, 75 save:function(){ 76 this.value = this.getValue(); 77 var that = this; 78 var callback = { 79 success:function(){ 80 that.convertToText(); 81 }, 82 failure:function(){ 83 alert("Error saving value."); 84 } 85 }; 86 87 ajaxRequest("get","save.php?id=",callback); 88 }, 89 cancel:function(){ 90 this.convertToText(); 91 }, 92 convertToText:function(){ 93 this.fieldElement.style.display = "none"; 94 this.saveButton.style.display = "none"; 95 this.cancelButton.style.display = "none"; 96 this.staticElement.style.display = "inline"; 97 98 this.setValue(this.value); 99 }, 100 setValue:function(value){ 101 this.fieldElement.value = value; 102 this.staticElement.innerHTML = value; 103 }, 104 getValue:function(){ 105 return this.fieldElement.value; 106 } 107 } 108 109 //事件綁定 110 function addEvent(element,type,fn){ 111 if(element.addEventListener){ 112 element.addEventListener(type,fn,false); 113 }else if(element.attachEvent){ 114 element.attachEvent("on" + type,fn); 115 }else{ 116 element["on" + type] = fn; 117 } 118 } 119 //ajax請(qǐng)求 120 function ajaxRequest(type,url,callback){ 121 callback.success(); 122 } 123 //extend 124 function extend(subClass,superClass){ 125 var F = function(){}; 126 F.prototype = superClass.prototype; 127 subClass.prototype = new F(); 128 subClass.prototype.constructor = subClass; 129 130 subClass.superClass = superClass.prototype; 131 if(superClass.prototype.constructor == Object.prototype.constructor){ 132 superClass.prototype.constructor = superClass; 133 } 134 } 135 136 //子類 137 function EditInPlaceArea(id,parent,value){ 138 EditInPlaceArea.superClass.constructor.call(this,id,parent,value); 139 }; 140 extend(EditInPlaceArea,EditInPlaceField); 141 142 //override 143 EditInPlaceArea.prototype.createShowPanel = function() { 144 this.staticElement = document.createElement("p"); 145 this.containerElement.appendChild(this.staticElement); 146 this.staticElement.innerHTML = this.value; 147 } 148 149 EditInPlaceArea.prototype.createEnterPanel = function(){ 150 this.fieldElement =document.createElement("textarea"); 151 this.fieldElement.value = this.value; 152 this.containerElement.appendChild(this.fieldElement); 153 } 154 155 EditInPlaceArea.prototype.convertToEditable = function(){ 156 this.staticElement.style.display = "none"; 157 this.fieldElement.style.display = "block"; 158 this.saveButton.style.display = "inline"; 159 this.cancelButton.style.display = "inline"; 160 161 this.setValue(this.value); 162 } 163 164 EditInPlaceArea.prototype.convertToText = function(){ 165 this.fieldElement.style.display = "none"; 166 this.saveButton.style.display = "none"; 167 this.cancelButton.style.display = "none"; 168 this.staticElement.style.display = "block"; 169 this.setValue(this.value); 170 } 171 172 var titleClassical = new EditInPlaceArea("titleClassical",document.getElementById("doc"),"title here"); 173 174 </script> View Code

轉(zhuǎn)載于:https://www.cnblogs.com/tengri/p/5271952.html

總結(jié)

以上是生活随笔為你收集整理的javascript设计模式-继承的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： django入门与实践 3-1 环境搭建
下一篇： List与逗号分隔的字符串相互转换