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. Deutsch lernen (06)

    1. das Verzeichnis,-se 表格:名单,目录 Die Daten sind in einem Verzeichnis enthalten. (包括,含有) 2. enthalten  ...

  2. Java中final,finally和finalize区别

    Day11_SHJavaTraing_4-18-2017 Java中final,finally和finalize区别 1.final—修饰符(关键字) ①final修饰类,表示该类不可被继承 ②fin ...

  3. （转）C#开发微信门户及应用(6)--微信门户菜单的管理操作

    http://www.cnblogs.com/wuhuacong/p/3701961.html 前面几篇继续了我自己对于C#开发微信门户及应用的技术探索和相关的经验总结,继续探索微信API并分享相关的 ...

  4. 如何安全使用dispatch_sync

    概述 iOS开发者在与线程打交道的方式中,使用最多的应该就是GCD框架了,没有之一.GCD将繁琐的线程抽象为了一个个队列,让开发者极易理解和使用.但其实队列的底层,依然是利用线程实现的,同样会有死锁的 ...

  5. BRAFT EDITOR富文本编辑器

    https://braft.margox.cn/demos/basic     官方文档 import React from 'react' import Uploading from '../Upl ...

  6. react新版本生命周期

    给componentWillMount componentWillReceiveProps componentWillUpdate生命周期加上UNSAFE_前缀,表明其不安全性,并将在未来版本将其移除 ...

  7. react 基础篇 #2 create-react-app

    1. 介绍 在开发react应用时,应该没有人用传统的方法引入react的源文件(js),然后在html编辑吧. 大家都是用webpack + es6来结合react开发前端应用. 这个时候,我们可以 ...

  8. 团体程序设计天梯赛-练习集-L1-042. 日期格式化

    L1-042. 日期格式化 世界上不同国家有不同的写日期的习惯.比如美国人习惯写成“月-日-年”,而中国人习惯写成“年-月-日”.下面请你写个程序,自动把读入的美国格式的日期改写成中国习惯的日期. 输 ...

  9. shell脚本操作mysql数据库，使用mysql的-e参数可以执行各种sql的(创建，删除，增，删，改、查)等各种操作

    mysql  -hhostname -Pport -uusername -ppassword  -e  相关mysql的sql语句,不用在mysql的提示符下运行mysql,即可以在shell中操作m ...

  10. Linux学习笔记之1——文件和目录管理（硬连接和软连接）(连结档,相当于快捷方式）

    在这节将要学习linux的连接档,在之前用"ls -l" 查看文件属性的命令时, 其中第二个属性是连接数.那么这个连接数是干什么的?这就要理解inode. 先说一下文件是怎么存储的 ...