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. JAVA语言编程格式高级规范

    作为一位开发人员,都要有严格的代码规范.为此我总结了一些代码规范案例. 目   录 1. 前言 2. 试用范围 3. JAVA命名规范-- 3.1 公共约定 3.2 Java文件.包 3.3 类.接口 ...

  2. C#程序集版本控制文件属性祥解

    using System.Reflection; using System.Runtime.CompilerServices; using System.Runtime.InteropServices ...

  3. 通过Static 字段来维护状态是不是一个好主意

    static是申明静态字段.静态方法或者静态类的修饰符.使用static申明的字段属于类型本身而不属于任何字段,声明的类也具有一些特别特性,比如不能实例化,不能继承等.用通俗化的语言来说,static ...

  4. 数据迁移 Migration

  5. day34-3 类和对象小知识

    目录 属性查找顺序 类与对象的绑定方法 类与数据类型 对象的高度整合 属性查找顺序 属性查找顺序:先从对象自身查找,对象没有就去类中查找,类中没有则报错 class Student: name = ' ...

  6. Keras手写识别例子(1)----softmax

    转自:https://morvanzhou.github.io/tutorials/machine-learning/keras/2-2-classifier/#测试模型 下载数据: # downlo ...

  7. 【剑指Offer】16、合并两个排序的链表

      题目描述:   输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则.   解题思路:   首先需要判断几个特殊情况,即判断输入的两个指针是否为空.如果第一个 ...

  8. [LeetCode] 20. 有效的括号 (栈)

    思路: 首先用字典将三对括号存储,遍历字符串中每个字符,遇到左括号就入栈:遇到右括号就开始判断:是否与栈弹出的顶字符相同. 如果到最后栈被清空,说明全部匹配上了,为真. class Solution( ...

  9. 去除html标签 php

    function my_html($string,$sublen =80){ $string = strip_tags($string); $string = preg_replace ('/\n/i ...

  10. Wireshark中的一些SNMP相关的过滤器

    Wireshark中的一些SNMP相关的过滤器 转自 http://linmingren2003.blog.163.com/blog/static/567510032011419825097/   由 ...