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. angualr2之路由与导航（一）

    1. 唯一根模块式组件导航 在唯一根模块式组件导航中,全局只有一个模块,即根模块. 1.1 根模块 在根模块中,需要导入所有组件及其对应的服务,并将组件加入声明,将其对应的服务加入提供商. // ap ...

  2. MSP430之software development flow

    MSP430 software development flow. 1) The shaded portion highlights the most common development path; ...

  3. 用JSP实现动态交互

    一.什么是JSP? 1.在HTML中嵌入Java脚本代码 2.由应用服务器中的JSP引擎来编译和执行嵌入的Java脚本代码 3.然后将生成的整个页面信息返回给客户端   二.为什么需要基于B/S技术的 ...

  4. .Net并行计算支持嵌套事务的方法

    问题背景 一年前,我们开始利用.Net 4.0的TPL(Task Parallel Library)并行计算技术对复杂计算的功能节点进行性能优化,这些复杂计算往往会包含大量对数据库的操作.在应用TPL ...

  5. 获取 PHPstorm编辑器 注册码地址

    网址: http://idea.lanyus.com/ 注册码有效期为2016年11月24日至2017年11月23日使用前请将“0.0.0.0 account.jetbrains.com”添加到hos ...

  6. OpenCV视频进度播放控制

    本来打算把进度条嵌入MFC的PIC空间里面,结果显示进度条消失,看来还是不要这个样子了. 全局变量区域: //2.初始化进度条的位置 int G_slider_position = 0; CvCapt ...

  7. Arduino LM35温度检测

    一. 接线原理图 二.实物图 三.代码例子

  8. swift 类型系统 Self self Type

    namedClass:静态类型:与类型实现直接关联:可以用于初始化.类型检查等. namedClass.self:@thick,脱敏(脱关)类型:动态类型:可以作为元类型的实例:可以作为类型参量进行传 ...

  9. JavaScript中Null和Undefined的区别

    Null: null是js中的关键字,表示空值,null可以看作是object的一个特殊的值,如果一个object值为空,表示这个对象不是有效对象. Undefined: undefined不是js中 ...

  10. 本地远程访问服务器jupyter

    一.前提: 安装Python3 安装Anaconda 配置jupyter notebook 并启动(重点) 二.配置jupyter文件 因为服务器已经安装好anaconda和jupyter,pytho ...