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

Question

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

Answer 1

Lyn_Tech 2016-06-22 11:41:55

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

原来的代码是这样的：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

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

  非常感谢！