优先使用对象组合,而不是类继承;

类式继承:通过构造函数Child()来获取来自于另一个构造函数Parent()的属性;

  • 默认模式:子类的原型指向父类的一个实例

    function inherit(C, P) {
    C.prototype = new P();
    } function Parent(name) {
    this.name = name || 'Adam';
    } Parent.prototype.say = function () {
    return this.name;
    } function Child() {}; inherit(Child, Parent); var kid = new Child();
    • 缺点:同时继承了两个对象的属性,效率低下;
  • 借用构造函数:之继承在父构造函数中添加到this的属性;
    function Parent(name) {
    this.name = name || 'Adam';
    }
    Parent.prototype.say = function () {
    return this.name;
    }
    function Child(name) {
    Parent.apply(this, arguments);
    }
    var kid = new Child(); //并没有继承到say方法
    • 多重继承:

      function Cat() {
      this.legs = 4;
      this.say = function () {
      return 'meaoww';
      }
      }
      function Bird() {
      this.wings = 2;
      this.fly = true;
      }
      function CatWings() {
      Cat.apply(this);
      Bird.apply(this);
      }
      var jane = new CatWings();
    • 优点:可以获取扶对象自身成员的真实副本,且不会有子对象覆盖父对象的问题;
  • 借用和设置原型:结合前两中模式,先借用构造函数,然后设置子构造函数的原型使其指向一个构造函数的实例;
    function Child(a, b, c, d) {
    Parent.apply(this, arguments);
    }
    Child.prototype = new Parent(); 

缺点:父构造函数被调用两次;

  • 共享原型: 

    function inherit(C, P) {
    C.prototype = P.prototype;
    }

    即提供了简短迅速的原型链查询,也易导致影响其他对象;

  • 临时构造函数:解决共享原型的问题

    • 基本代码:

      function  inherit(C, P) {
      var F = function () {};
      F.prototype = P.prototype;
      C.prototype = new F();
      }  
    • 存储超类:增加一个指向原始父对象的引用  

      function  inherit(C, P) {
      var F = function () {};
      F.prototype = P.prototype;
      C.prototype = new F();
      C.uber = P.prototype;
      } 
    • 重置构造函数:考虑可能会用到constructor

      function  inherit(C, P) {
      var F = function () {};
      F.prototype = P.prototype;
      C.prototype = new F();
      C.uber = P.prototype;
      C.prototype.constructor = C;
      } 
    • 优化:避免每次需要继承时都创建

      var inherit = (function () {
      var F = function () {};
      return function (C, P) {
      F.prototype = P.prototype;
      C.prototype = new F();
      C.uber = P.prototype;
      C.prototype.constructor = C;
      }
      })();
    • Klass: 模拟类的语法糖

      var klass = function (Parent, props) {
      var Child, F, i;
      //新构造函数
      Child = function () {
      if(Child.uber && Child.uber.hasOwnProperty('_construct')) {
      Child.uber._construct.apply(this, arguments);
      }
      if(Child.prototype.hasOwnProperty('_construct')) {
      Child.prototype._construct.apply(this, arguments);
      }
      }
      //继承
      Parent = Parent || Object;
      F = function() {};
      F.prototype = Parent.prototype;
      Child.prototype = new F();
      Child.uber = Parent.prototype;
      Child.prototype.constructor = Child;
      //添加实现方法
      for(i in props) {
      if(props.hasOwnProperty(i)) {
      Child.prototype[i] = props[i];
      }
      }
      //返回该Class
      return Child;
      } var Man = klass(null/*父类*/, { /*新类的实现*/
      _construct: function (what) {
      console.log("Man's constructor");
      this.name = what;
      },
      getName: function () {
      return this.name;
      }
      }); var first = new Man('Adam');
      first.getName(); var SuperMan = klass(Man, {
      _construct: function (what) {
      console.log("SuperMan's constructor");
      },
      getName: function() {
      var name = SuperMan.uber.getName.call(this);
      return "I am " + name;
      }
      }); var clark = new SuperMan('Clark kent');
      clark.getName(); console.log(clark instanceof Man);
      console.log(clark instanceof SuperMan);

        

      最好避免使用;适用于对类熟悉,对原型不熟的情况;  

       

javascript优化--08模式(代码复用)01的更多相关文章

  1. javascript优化--09模式(代码复用)02

    原型继承 ://现代无类继承模式 基本代码: var parent = { name : "Papa" } var child = object(parent); function ...

  2. javascript优化--06模式(对象)01

    命名空间: 优点:可以解决命名混乱和第三方冲突: 缺点:长嵌套导致更长的查询时间:更多的字符: 通用命名空间函数: var MYAPP = MYAPP || {}; MYAPP.namespace = ...

  3. javascript优化--10模式(设计模式)01

    单体模式:保证一个特定类仅有一个实例;即第二次使用同一个类创建新对象时,应该得到与第一个所创建对象完全相同对象: 在JS中,可以认为每次在使用对象字面量创建对象的时候,实际上就在创建一个单体: 当使用 ...

  4. javascript优化--13模式1(DOM和浏览器模式)

    注意分离: 通过将CSS关闭来测试页面是否仍然可用,内容是否依然可读: 将JavaScript关闭来测试页面仍然可以执行正常功能:所有连接是否正常工作:所有的表单是否可以正常工作: 不使用内联处理器( ...

  5. javascript优化--14模式2(DOM和浏览器模式)

    远程脚本 XMLHttpRequest JSONP 和XHR不同,它不受同域的限制: JSONP请求的可以是任意的文档: 请求的URL通常格式为http://example.js?calback=Ca ...

  6. javascript优化--07模式(对象)02

    沙箱模式: 解决空间命名模式的几个缺点: 命名空间模式中无法同时使用一个应用程序或库的两个版本运行在同一个页面中,因为两者需要相同的全局符号: 以点分割,需要输入更长的字符,解析时间也更长: 全局构造 ...

  7. javascript优化--05模式(函数)

    回调函数模式: 基本例子: var findNodes = function (callback) { ...................... if (typeof callback !== ' ...

  8. javascript优化--11模式(设计模式)02

    策略模式 在选择最佳策略以处理特定任务(上下文)的时候仍然保持相同的接口: //表单验证的例子 var data = { firs_name: "Super", last_name ...

  9. javascript优化--12模式(设计模式)03

    观察者模式 通过创建一个可观察的对象,当发生一个感兴趣的事件时将该事件通告给所有观察者,从而形成松散的耦合 订阅杂志 //发布者对象 var publisher = { subscribers: { ...

随机推荐

  1. 一个1年前的T-SQL问题

    还记得年前的一个SQL问题,当时对SQL刚接触,因此绕开了它.用了别的办法.昨天看SQL突然想起了这个问题.百思不得其解,然后去SQL Server技术交流群,也请教了,大神高文佳,何志勇提示我因为先 ...

  2. IOS AFNetworking

    http://www.coneboy.com/?p=716 AFNetworking 使用总结 (用法+JSON解析) 2013 年 4 月 11 日  No comments Article 这几天 ...

  3. VS2008+Qt+助手 智能提示不显示、Qt关键字不高亮的解决办法【已解决】

    笔者使用的开发环境是VS2008+Qt4.8.5+VAssistX,有时候会出现代码关键字不能高亮显示,并且助手的智能提示不显示.问题如下 解决的办法是在助手的选项中设置其搜索路径,助手的设置通过VS ...

  4. C#关键字base

    例子: public CustomStroke(SharpType type) :base() { this.type = type; } 这里的CustomStroke继承与基类Stroke类,用关 ...

  5. spring+hibernate常见异常集合

    spring+hibernate出错小结: (1)java.lang.NoClassDefFoundError: org/hibernate/context/CurrentSessionContext ...

  6. ZBT的计算几何模板

    Basic template 一个基础型模板包括一个向量的实现 DATE: 2015-06-01 #define op operator #define __ while #define _0 ret ...

  7. Bulb Switcher

    There are n bulbs that are initially off. You first turn on all the bulbs. Then, you turn off every ...

  8. 【转】Spring Quartz的原理

    Quartz是一个大名鼎鼎的Java版开源定时调度器,功能强悍,使用方便. 一.核心概念 Quartz的原理不是很复杂,只要搞明白几个概念,然后知道如何去启动和关闭一个调度程序即可. 1.Job 表示 ...

  9. centos 单独安装PHP的mysql和mysqli扩展

    2013年11月22日 11:25:41 Linux centos 6.3 最小化安装 mysql 5.5 php 5.4 安装PHP时只是 ./configure --prefix=/**** 并没 ...

  10. codeforces B. Semifinals 解题报告

    题目链接:http://codeforces.com/problemset/problem/378/B 题目意思:有n个参赛者,他们都需要参加两场半决赛.第一场半决赛的成绩依次是a1, a2, ... ...