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

类式继承:通过构造函数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. Android Broadcast Receiver 使用入门

    Broadcast Receiver 的使用        1.Broadcast Receiver简介        2.Broadcast Receiver接收系统自带的广播        3.自 ...

  2. 【NGUI】grid下面的item的重复利用

    http://blog.csdn.net/u012091672/article/details/21159075解决的问题 使用grid放置item的时候,每次数据可能都不一样,但是每次都删除grid ...

  3. xcode6以后, 使用.pch

    http://blog.csdn.net/lihuiqwertyuiop/article/details/39268101 总结: . 创建.pch文件 . Apple LLVM 6.1 - Lang ...

  4. MBProgressHUD使用

    //方式1.直接在View上show HUD = [[MBProgressHUD showHUDAddedTo:self.view animated:YES] retain]; HUD.delegat ...

  5. linux增加自定义path和manpath

    linux安装软件到自定义路径时,新安装的命令需要带上路径才可以执行,不能像系统自带命令那样可以直接使用. 这个时候可以通过修改环境变量PATH和MANPATH,来实现像系统命令一样使用新安装的命令并 ...

  6. 算法:comparable比较器的排序原理实现(二叉树中序排序)

    Comparable比较器排序远离实现 package test.java.api.api13; /** * 手工实现二叉树的比较算法: 第一遍感觉很神秘,但是真正自己写下来,就感觉很简单,理解就好: ...

  7. 【转】Linux中如何安装.rpm、.tar、.tar.gz和tar.bz2

    我以下面三个包为例:(三个包都在/etc/opt下)A.example-1.2.3-1.rpmB.example-1.2.3-1.tarC.example-1.2.3-1.tar.gz 1.对于rpm ...

  8. js判空

    2014年9月3日 11:36:10 转载的: http://blog.sina.com.cn/s/blog_755168af0100vsik.html typeof用法 typeof的运算数未定义, ...

  9. jQuery结合Ajax实现简单的前端验证和服务端查询

    上篇文章写了简单的前端验证由传统的JavaScript转向流畅的jQuery滑动验证,现在拓展一下,使用Ajax实现用户体验比较好的异步查询,同样还是从建立一个简单的表单开始 <form nam ...

  10. Android开发数据库三层应用-DataSnap

    Android开发数据库三层应用-DataSnap http://www.2ccc.com/news/Html/?1517.html 核心提示:我觉得Delphi最强大的的功能之一就是开发数据库三层应 ...