为什么要用new操作符？？？

Question

项目中创建的H5componentBase、H5ComponentBar、H5ComponentPoint等函数，从他的结构来看只是普通函数，并不是构造函数。为何在使用时要加上new操作符？这样做是没有任何意义的。

Answer 1

Lyn_Tech 2016-06-22 11:41:55

你说的很对，的确是没什么意义。反正每个「对象」里面都能正确的返回 component ，就是个形式而已。

原来的代码是这样的：

var H5ComponentBase =function ( name, cfg ) {
    var cfg = cfg || {};
    var id = ( 'h5_c_'+Math.random() ).replace('.','_') ;
    // 把当前的组建类型添加到样式中进行标记
    var cls = ' h5_component_'+cfg.type; 
    var component = $('<div class="h5_component '+cls+' h5_component_name_'+name+'" id="'+id+'">');
    cfg.text   &&  component.text(cfg.text);
    cfg.width  &&  component.width(cfg.width/2);
    cfg.height &&  component.height(cfg.height/2);
    cfg.css && component.css( cfg.css );
    cfg.bg  && component.css('backgroundImage','url('+cfg.bg+')');
    if( cfg.center === true){
        component.css({
            marginLeft : ( cfg.width/4 * -1) + 'px',
            left:'50%'
        })
    }
    //  ... 很多自定义的参数
    if( typeof cfg.onclick === 'function' ){
        component.on('click',cfg.onclick);
    }
    component.on('onLoad',function(){
       
        setTimeout(function(){
            component.addClass(cls+'_load').removeClass(cls+'_leave');
            cfg.animateIn && component.animate( cfg.animateIn );
        },cfg.delay || 0)
        return false;
    })
    component.on('onLeave',function(){
        setTimeout(function(){
            component.addClass(cls+'_leave').removeClass(cls+'_load');
            cfg.animateOut && component.animate( cfg.animateOut );
         },cfg.delay || 0)
        return false;
    })
    // 构造函数改造
    this.cfg = cfg;
    this.id = id;
    this.el = component;
    return this;
    // return component;
}
var H5ComponentBar =function ( name, cfg ) {

  // 使用 H5ComponentBase 的构造函数
  H5ComponentBase.apply(this,[name,cfg])
  
  // var component =  new H5ComponentBase( name ,cfg );
  var component = this.el;
  $.each(cfg.data,function(idx,item){
    var line = $('<div class="line">');
    var name = $('<div class="name">');
    var rate = $('<div class="rate">');
    var per = $('<div class="per">');
    var width = item[1]*100 + '%';
    var  bgStyle = '';
    if( item[2] ){
      bgStyle = 'style="background-color:'+item[2]+'"';
    }
    rate.html( '<div class="bg" '+bgStyle+'></div>' );
    rate.css('width',width);
    name.text( item[0]);
    per.text(width);
    line.append( name ).append( rate ).append( per );
    component.append(line);
  });
    this.cfg = cfg;
    this.el = component;
    return this;
    
  // return component;
}

后面想想，不如只返回一个 component 元素得了，反正其他属性也用不上，一个组件被继承，就返回这个组件本身的DOM就好。

• Lyn_Tech #1

  这样就简单的暗示了：每个组件都是一个全新的对象，每个组件就是个DOM对象。那如果要搞清楚继承的内容就非常简单，直接看DOM结构就好。

• 月下背影 #2

  可以使用安全工厂模式，在你使不使用new都可以进行操作。

• 提问者 杨洋1989 #3

  非常感谢！