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. 指定DIV局部刷新的简单实现，很简单，但是网上搜到的大部分都很复杂

    脚本部分: <script type="text/javascript"> $(function () { setInterval(function () { $(&q ...

  2. MQTTnet 的Asp.Net Core 认证事件的扩展

    MQTTnet 的数据接收 连接 等事件都很丰富, 唯独客户端连接验证不能依赖注入也不能很舒服的使用事件的方式, 因此MQTTnet.AspNetCoreEx 就出现了. 示例如下:在  public ...

  3. mint-ui 取值

    //slots:[{values: ['年假', '事假', '病假', '婚假', '其他']}], slots:[{values: []}], onValuesChange(picker,valu ...

  4. 洛谷P1601 A+B Problem（高精）

    题目描述 高精度加法,x相当于a+b problem,[b][color=red]不用考虑负数[/color][/b] 输入输出格式 输入格式: 分两行输入a,b<=10^500 输出格式: 输 ...

  5. 一键安装LNMP(适合centos7)

    1.准备工作,下载源码包 wget https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.22-linux-glibc2.12-x86_64.tar ...

  6. 使用VS Code断点调试PHP

    vs code 使用一款杰出的轻量级代码编辑器,其中的插件工具不胜枚举而且还在不断增加.使用 vs code 调试 php 代码更是方便简洁,下面我们来一起看一下. 1. 安装 XDebug 扩展 调 ...

  7. bzoj 2654 && bzoj 3675 总结

    手动博客搬家: 本文发表于20180929 15:18:55, 原地址https://blog.csdn.net/suncongbo/article/details/82897992 最近做到了两道( ...

  8. UVA 10328 Coin Toss

    Coin Toss Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVA. Original ID: ...

  9. hdu 2586 lca在线算法(朴素算法)

    #include<stdio.h> #include<string.h>//用c/c++会爆栈,用g++ac #define inf 0x3fffffff #define N ...

  10. HDU 1238

    好吧,这题直接搜索就可以了,不过要按照长度最短的来搜,很容易想得到. 记得ACM比赛上有这道题,呃..不过,直接搜..呵呵了,真不敢想. #include <iostream> #incl ...