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

  1. 类式继承-->prototype继承：

         function Person(name){
    
         this.name = name;
    
     }
    
     Person.prototype.getName = function(){
    
         return this.name;
    
     }

     //继承
    
     function Author(name,books){
    
         Person.call(this,name);
    
         this.books = books;
    
     }
    
     Author.prototype = new Person();
    
     Author.prototype.constructor = Author;
    
     Author.prototype.getBooks = function(){
    
         return this.books;
    
     }

     var author = new Author("zap","javascript程序设计");
    
     console.log(author);
  2. 类式继承-->extend函数： 
         function extend(subClass,superClass){
    
         var F = function(){};
    
         F.prototype = superClass.prototype;
    
         subClass.prototype = new F();
    
         subClass.prototype.constructor = subClass;

         subClass.superClass = superClass.prototype;
    
         if(superClass.prototype.constructor == Object.prototype.constructor){
    
             superClass.prototype.constructor =  superClass;
    
         }
    
     }

     /*Class Person*/

     function Person(name){
    
         this.name = name;
    
     }
    
     Person.prototype.getName = function(){
    
         return this.name;
    
     }

     function Author(name,books){
    
         Author.superClass.constructor.call(this,name);
    
 //        Person.call(this,name);
    
         this.books = books;
    
     }
    
     extend(Author,Person);
    
     Author.prototype.getBooks = function(){
    
         return this.books;
    
     }

     var author = new Author("zap","javascript程序设计");
    
     console.log(author);
    
     console.log(author.getName());
    
     console.log(author.getBooks());
  3. 原型式继承-->clone函数：(原型式继承更能节约内存) 
         var Person  ={
    
         name:"zap",
    
         age:"26",
    
         toString:function(){
    
             console.log(this.name + "@" + this.age);
    
         }
    
     }

     var author = clone(Person);
    
     author.name = "zap";
    
     author.toString();

     function clone(object){
    
         function F(){}
    
         F.prototype = object;
    
         return new F;
    
     }

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

     <!DOCTYPE html>
    
 <html>
    
     <head>
    
         <meta charset="UTF-8">
    
         <title>类式继承解决方案</title>
    
         <style type="text/css">
    
             #doc{width:500px; height:300px; border:1px solid #ccc; margin:10px auto;}
    
         </style>
    
     </head>
    
     <body>
    
         <div id="doc"></div>
    
     </body>
    
 </html>
    
 <script type="text/javascript">

     function EditInPlaceField(id,parent,value){
    
         this.id = id;
    
         this.value = value || "default value";
    
         this.parentElement = parent;

         this.createElements(this.id);
    
         this.attachEvents();
    
     }

     EditInPlaceField.prototype = {
    
         createElements:function(id){
    
             this.createContainer();
    
             this.createShowPanel();
    
             this.createEnterPanel();
    
             this.createControlBtns();
    
             this.convertToText();
    
         },
    
          //创建容器
    
         createContainer:function(){
    
             this.containerElement = document.createElement("div");
    
             this.parentElement.appendChild(this.containerElement);
    
         },
    
         createShowPanel:function(){
    
             this.staticElement = document.createElement("span");
    
             this.containerElement.appendChild(this.staticElement);
    
             this.staticElement.innerHTML  = this.value;
    
         },
    
         createEnterPanel:function(){
    
             this.fieldElement = document.createElement("input");
    
             this.fieldElement.type = "text";
    
             this.fieldElement.value = this.value;
    
             this.containerElement.appendChild(this.fieldElement);
    
         },
    
         createControlBtns:function(){
    
             this.saveButton = document.createElement("input");
    
             this.saveButton.type = "button";
    
             this.saveButton.value = "Save";
    
             this.containerElement.appendChild(this.saveButton);

             this.cancelButton = document.createElement("input");
    
             this.cancelButton.type = "button";
    
             this.cancelButton.value = "Cancel";
    
             this.containerElement.appendChild(this.cancelButton);
    
         },
    
         attachEvents:function(){
    
             var that = this;
    
             addEvent(this.staticElement,"click",function(){that.convertToEditable();});
    
             addEvent(this.saveButton,"click",function(){that.save();});
    
             addEvent(this.cancelButton,"click",function(){that.cancel();});
    
         },
    
         convertToEditable:function(){
    
             this.staticElement.style.display = "none";
    
             this.fieldElement.style.display = "inline";
    
             this.saveButton.style.display = "inline";
    
             this.cancelButton.style.display = "inline";

             this.setValue(this.value);
    
         },
    
         save:function(){
    
             this.value = this.getValue();
    
             var that = this;
    
             var callback = {
    
                 success:function(){
    
                     that.convertToText();
    
                 },
    
                 failure:function(){
    
                     alert("Error saving value.");
    
                 }
    
             };

             ajaxRequest("get","save.php?id=",callback);
    
         },
    
         cancel:function(){
    
             this.convertToText();
    
         },
    
         convertToText:function(){
    
             this.fieldElement.style.display = "none";
    
             this.saveButton.style.display = "none";
    
             this.cancelButton.style.display = "none";
    
             this.staticElement.style.display = "inline";

             this.setValue(this.value);
    
         },
    
         setValue:function(value){
    
             this.fieldElement.value = value;
    
             this.staticElement.innerHTML = value;
    
         },
    
         getValue:function(){
    
             return this.fieldElement.value;
    
         }
    
     }

     //事件绑定
    
     function addEvent(element,type,fn){
    
         if(element.addEventListener){
    
             element.addEventListener(type,fn,false);
    
         }else if(element.attachEvent){
    
             element.attachEvent("on" + type,fn);
    
         }else{
    
             element["on" + type] = fn;
    
         }
    
     }
    
     //ajax请求
    
     function ajaxRequest(type,url,callback){
    
         callback.success();
    
     }
    
     //extend
    
     function extend(subClass,superClass){
    
         var F = function(){};
    
         F.prototype = superClass.prototype;
    
         subClass.prototype = new F();
    
         subClass.prototype.constructor = subClass;

         subClass.superClass = superClass.prototype;
    
         if(superClass.prototype.constructor == Object.prototype.constructor){
    
             superClass.prototype.constructor =  superClass;
    
         }
    
     }

     //子类
    
     function EditInPlaceArea(id,parent,value){
    
         EditInPlaceArea.superClass.constructor.call(this,id,parent,value);
    
     };
    
     extend(EditInPlaceArea,EditInPlaceField);

     //override
    
     EditInPlaceArea.prototype.createShowPanel = function() {
    
         this.staticElement = document.createElement("p");
    
         this.containerElement.appendChild(this.staticElement);
    
         this.staticElement.innerHTML = this.value;
    
     }

     EditInPlaceArea.prototype.createEnterPanel = function(){
    
         this.fieldElement =document.createElement("textarea");
    
         this.fieldElement.value = this.value;
    
         this.containerElement.appendChild(this.fieldElement);
    
     }

     EditInPlaceArea.prototype.convertToEditable = function(){
    
         this.staticElement.style.display = "none";
    
         this.fieldElement.style.display = "block";
    
         this.saveButton.style.display = "inline";
    
         this.cancelButton.style.display = "inline";

         this.setValue(this.value);
    
     }

     EditInPlaceArea.prototype.convertToText = function(){
    
         this.fieldElement.style.display = "none";
    
         this.saveButton.style.display = "none";
    
         this.cancelButton.style.display = "none";
    
         this.staticElement.style.display = "block";
    
         this.setValue(this.value);
    
     }

     var titleClassical = new EditInPlaceArea("titleClassical",document.getElementById("doc"),"title here");

 </script>

javascript设计模式-继承的更多相关文章

  1. JavaScript设计模式 Item 4 --继承

    1.继承 在javascript中继承是一个非常复杂的话题,比其他任何面向对象语言的中的继承都复杂得多.在大多数其他面向对象语言中,继承一个类只需要使用一个关键字即可.与它们不同,在javascrip ...

  2. 《JavaScript设计模式 张》整理

    最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单 ...

  3. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  4. javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

  5. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  6. 常用的Javascript设计模式

    <parctical common lisp>的作者曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型 ...

  7. JavaScript设计模式学习笔记

    1 JavaScript设计模式深入分析 私有属性和方法:函数有作用域,在函数内用var 关键字声明的变量在外部无法访问,私有属性和方法本质就是你希望在对象外部无法访问的变量. 特权属性和方法:创建属 ...

  8. JavaScript的学习--JavaScript设计模式的总结

    这篇博客只是自己对设计模式的理解的备忘~ 看完了<JavaScript设计模式>这本书,一直没有写博客记录一下,最近抽出时间来重读了一下,就顺便记录一下~ 如果你只是想粗略了解一下Java ...

  9. Javascript类继承-机制-代码Demo【原创】

    最近看到<Javascript设计模式>,对js模拟的”继承方式“有了更深一步的了解,虽然之前也总是用到prototype.new ,但只是知其然不知所以然,现在将类继承的方法整理如下,暂 ...

随机推荐

  1. mysql自动添加时间的方法

    时间添加方法,可以在编辑数据时方便时间选择输入: 将时间列DataType设为timestamp,设定其默认值为CURRENT_TIMESTAMP. 这样每次插入一条新纪录,数据库会自动在时间段存储当 ...

  2. response.getWriter().write()乱码问题

    前台代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> & ...

  3. ASP.NET访问网络驱动器（映射磁盘）

    也许很多朋友在做WEB项目的时候都会碰到这样一个需求: 当用户上传文件时,需要将上传的文件保存到另外一台专门的文件服务器. 要实现这样一个功能,有两种解决方案: 方案一.在文件服务器上新建一站点,用来 ...

  4. c#同步锁Monitor.Enter(T)

    protected static object MObjLock = new object();//同步锁 public string GetData(int mId) { Monitor.Enter ...

  5. How to add jdk8 in Eclipse Indigo

    I just read How to have Eclipse use JDK8 to compile a project? What i added jdk8 to eclipse as,  Fro ...

  6. Join 语句

    select * from books as A join (select * from Orders) as B on A.BookId = B.BookId select A.BookId,Aut ...

  7. Unicode转换为UTF-8过程Demo

    碎碎念:这几天在学习Python对Unicode的支持 上学的时候,计算机基础课上总能听到老师讲什么字节,字符,Unicode,UTF-8吧啦吧啦一堆,反正我是只记住了名字,至于具体这些名字所表达的含 ...

  8. Spring+SprinMVC配置学习总结

    一千个人有一千种spring的配置方式,真是这样.看了好多的配置,试验了很多.这里做一个总结. 1 原理上,spring和springmvc可以合并为一个配置文件然后在web.xml中加载,因为最终的 ...

  9. vue中用v-for循环出出来的div下面的span不给宽度也能相对于div居中

    效果图 1.html <div> <div v-on:mousemove="dataDetails($event, item)" v-on:mouseleave= ...

  10. 在vue中写一个跟着鼠标跑的div，div里面动态显示数据

    1.div应该放在body里面,这是我放在body中的一个div里面的div <!-- 信息查看层 --> <div class="floatDiv" :styl ...