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. 高通处理器手机 解锁Bootloader 教程

    目前很多手机都需要解锁Bootloader之后才能进行刷机操作   本篇教程教你如何傻瓜式解锁Bootloader 首先需要在设置-关于手机 找到版本号(个别手机可能是内核版本号,甚至其他) 然后 快 ...

  2. hibernate_08_关联映射_一对多

    hibernate的映射关系 一对多.多对一.一对一.多对多. 常用的是一对多和多对一. 在数据库中可以通过添加主外键的关联,表现一对多的关系:在hibernate中通过在一方持有多方的集合实现,即在 ...

  3. dotnetnuke 中使用ado.net entityframework 如果在程序中动态调用系统的连接字符串信息

    1,打开如下图的Model1.Context.cs文件 2,找到 Base:(ConnString.conn)是我改的.默认生成的是"name=实体连接字符串" Connstrin ...

  4. vue中eventbus 多次触发的问题

    相比于react,vue是一个更上手很快的框架.所说简单易用,但在做Vue项目的过程中,就会发现,坑还是有的.组件之间传递数据是一个常见的需求,父子组件传递数据在官网有介绍,除了父子组件,一般地,任意 ...

  5. vue http请求 vue自带的 vue-resource

    vue-resource安装 npm install vue-resource --save-dev 配置 在main.js中引入插件 //Resource 为自定义名 vue-resource 为插 ...

  6. PAT_A1137#Final Grading

    Source: PAT A1137 Final Grading (25 分) Description: For a student taking the online course "Dat ...

  7. SPLAY or SPALY ?

    写在前面: 由我们可爱的Daniel Sleator和Robert Tarjan提出的一种数据结构,平衡树的一种,本质是二叉树. 至于到底是splay还是spaly,我认为可能splay更对一些 毕竟 ...

  8. 【剑指Offer】31、从1到n整数中1出现的次数

      题目描述:   求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他 ...

  9. codeforces 427D Match & Catch（后缀数组，字符串）

    题目 参考:http://blog.csdn.net/xiefubao/article/details/24934617 题意:给两个字符串,求一个最短的子串.使得这个子串在两个字符串中出现的次数都等 ...

  10. node对称加密（转载）

    https://www.cnblogs.com/laogai/p/4664917.html