浅析JavaScript的写类方式（2）

这篇开始会记录一些写类的工具函数，通过上篇我们知道本质上都是构造函数+原型。理解了它碰到各式各样的写类方式就不惧怕了。以下列举的有的是工作中碰到的，有的是从书籍或网上收集的。见过的朋友就忽视它吧。

成都创新互联公司坚信：善待客户，将会成为终身客户。我们能坚持多年，是因为我们一直可值得信赖。我们从不忽悠初访客户，我们用心做好本职工作，不忘初心，方得始终。十多年网站建设经验成都创新互联公司是成都老牌网站营销服务商,为您提供网站制作、做网站、网站设计、H5技术、网站制作、品牌网站设计、微信平台小程序开发服务,给众多知名企业提供过好品质的建站服务。

上一篇：浅析JavaScript的写类方式（1）

推荐专题：JavaScript函数式编程

构造函数 + 原型直接组装一个类;同一构造函数将组装出同一类型

 
 
 
  
  
  /** 
  
  
   * $class 写类工具函数之一 
  
  
   * @param {Function} constructor 
  
  
   * @param {Object} prototype 
  
  
   */
  
  
  function $class(constructor,prototype) { 
  
  
      var c = constructor || function(){}; 
  
  
      var p = prototype || {}; 
  
  
      c.prototype = p; 
  
  
      return c; 
  
  
  }

用构造函数来生成类实例的属性(字段)，原型对象用来生成类实例的方法。

 
 
 
  
  
  //构造函数 
  
  
  function Person(name) { 
  
  
      this.name = name; 
  
  
  } 
  
  
  //原型对象 
  
  
  var proto = { 
  
  
      getName : function(){return this.name}, 
  
  
      setName : function(name){this.name = name;}  
  
  
  } 
  
  
  //组装 
  
  
  var Man = $class(Person,proto); 
  
  
  var Woman = $class(Person,proto);

这时候已经得到了两个类Man，Woman。并且是同一个类型的。测试如下：

 
 
 
  
  
  console.log(Man == Woman); //true 
  
  
  console.log(Man.prototype == Woman.prototype); //true

创建对象看看

 
 
 
  
  
  var man = new Man("Andy"); 
  
  
  var woman = new Woman("Lily"); 
  
  
  
  
  
  console.log(man instanceof Man); //true 
  
  
  console.log(woman instanceof Woman); //true 
  
  
  console.log(man instanceof Person); //true 
  
  
  console.log(woman instanceof Person); //true

ok，一切如我们所期望。但是有个问题，下面代码的结果输出false

 
 
 
  
  
  console.log(man.constructor == Person);//false

这让人不悦：从以上的代码看出man的确是通过Man类new出来的 var man = new Man("Andy")，那么对象实例man的构造器应该指向Man，但为何事与愿违呢?

原因就在于$class中重写了Person的原型：c.prototype = p;

好了，我们把$class稍微改写下，将方法都挂在构造器的原型上(而不是重写构造器的原型)，如下：

 
 
 
  
  
  function $class(constructor,prototype) { 
  
  
      var c = constructor || function(){}; 
  
  
      var p = prototype || {}; 
  
  
  //  c.prototype = p; 
  
  
      for(var atr in p){ 
  
  
          c.prototype[atr] = p[atr]; 
  
  
      }    
  
  
      return c; 
  
  
  }

网站题目：浅析JavaScript的写类方式（2）
标题来源：http://www.shufengxianlan.com/qtweb/news27/115977.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容