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

类式继承:通过构造函数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. 多线程 or 多进程 (转强力推荐)

    在Unix上编程采用多线程还是多进程的争执由来已久,这种争执最常见到在C/S通讯中服务端并发技术 的选型上,比如WEB服务器技术中,Apache是采用多进程的(perfork模式,每客户连接对应一个进 ...

  2. NGUI 粒子显示在上级

    http://bbs.taikr.com/thread-2272-1-1.html [NGUI]3.0+版本,粒子在UI后面显示 -- : 48人阅读 评论() 收藏 举报 [Unity3D][NGU ...

  3. tomcat配置文件之Server.xml

    Server.xml包含的元素有<Server>.<Service>.<Connector>.<Engine>.<Host>.<Con ...

  4. 【云计算】开源装机自动化系统 CloudBoot OSInstall 介绍

    "CloudBoot"(OSinstall) 发布了. 产品更新及特点如下: 新增虚拟化操作系统适配:支持主流操作系统:RedHat.CentOS.SUSE.Ubuntu.Wind ...

  5. 【OpenStack】OpenStack系列11之namaspace&openvswitch原理实践

    Namespace实现网络隔离与互通 新建ns: ip netns add foo 查看ns: ip netns 查看ns详细配置: ip netns exec foo ip addr 设置ns内部l ...

  6. InnoDB主键设计

    InnoDB是clustered-index table,因此对于InnoDB而言,主键具有特殊意义. 可以通过主键直接定位到对应的某一数据行记录的物理位置,主键索引指向对应行记录,其他索引则都指向主 ...

  7. Search Range in Binary Search Tree

    Given two values k1 and k2 (where k1 < k2) and a root pointer to a Binary Search Tree. Find all t ...

  8. 4.在二元树中找出和为某一值的所有路径[FindPathsInBinaryTree]

    [题目]: 输入一个整数和一棵二元树.从树的根结点开始往下访问一直到叶结点所经过的所有结点形成一条路径.打印出和与输入整数相等的所有路径. 例如输入整数22和如下二元树 10              ...

  9. kettle作业中的js如何写日志文件

    在kettle作业中JavaScript脚本有时候也扮演非常重要的角色,此时我们希望有一些日志记录.下面是job中JavaScript记录日志的方式. job的js写日志的方法. 得到日志输出实例 o ...

  10. Android runProguard配置 导致module lib 中的包编译时无法识别

    今天写代码时用到了另一个lib型的工程,把它添加到dependencies后,在原工程中可以引用lib中的文件了,但是编译时就会报错,提示包不存在,后来在build.gradle中设置runProgu ...