javascript设计模式-继承

javascript继承分为两种：类式继承（原型链、extend函数）、原型式继承（对继承而来的成员的读和写的不对等性、clone函数）。

类式继承-->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程序设计");
20     console.log(author);

类式继承-->extend函数：

 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程序设计");
34     console.log(author);
35     console.log(author.getName());
36     console.log(author.getBooks());

原型式继承-->clone函数：(原型式继承更能节约内存)

 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     }

附上以类式继承实现的就地编辑demo，原型式方式实现和类式继承方式相差无几，不在此列举。

  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          //创建容器
 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请求
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

转载于:https://www.cnblogs.com/tengri/p/5271952.html

javascript设计模式-继承相关推荐

【JavaScript设计模式张容铭】抽象工厂模式深度剖析——关于继承与constructor属性的深度理解
写在前面最近阅读了张容铭的<JavaScript设计模式>一书,阅读到抽象工厂模式一节时对书上的代码产生了疑问,但同时在解决疑问的过程中,对继承又产生了新的理解. 我仔细查阅了很多文章, ...
《JavaScript设计模式与开发实践》模式篇（12）—— 装饰者模式
在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但是继承的方式并不灵活, 还会带来许多问题:一方面会导致超类和子类之间存在强耦合性,当超类改变时,子类也会随之改变;另一方面,继承这种功能复 ...
JavaScript设计模式与开发实践——JavaScript的多态
"多态"一词源于希腊文polymorphism,拆开来看是poly(复数)+ morph(形态)+ ism,从字面上我们可以理解为复数形态. 多态的实际含义是:同一操作作用于不同的 ...
《JavaScript设计模式与开发实践》阅读摘要
<JavaScript设计模式与开发实践>作者:曾探系统的介绍了各种模式,以及js中的实现.应用,以及超大量高质量代码,绝对值得一读面向对象的js 静态类型:编译时便已确定变量的类型 ...
javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）...
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
javascript 设计模式_开发者都应该了解的7种JavaScript设计模式
你好,欢迎收听极客视点. JavaScript 中的设计模式指的是一些可重用的解决方案,这些方案适用于编写 JavaScript Web 应用程序时常见的一些问题.最近,全栈开发人员德文(Deven) ...
javascript设计模式_开发者都应该了解的7种JavaScript设计模式
你好,欢迎收听极客视点. JavaScript 中的设计模式指的是一些可重用的解决方案,这些方案适用于编写 JavaScript Web 应用程序时常见的一些问题.最近,全栈开发人员德文(Deven) ...
JavaScript设计模式（一）
设计模式概念设计模式(Design Pattern)是一套被反复使用.多数人知晓的.经过分类的.代码设计经验的总结. 使用设计模式的目的:为了代码可重用性.让代码更容易被他人理解.保证代码可靠性. ...
JavaScript设计模式总结-组合模式
使用场景 1.对象存在整体-部分的结构,如树.数组等: 2.使用者希望对数据结构中的所有对象统一处理. 需要注意的是 1.组合模式所谓的结构并非"继承",而是"包含&qu ...

javascript设计模式-继承

javascript设计模式-继承相关推荐

最新文章

热门文章