new function(){} vs new Function();

Question

我拿起了一些代码,我才刚刚理解了new Function();.通过jslint,new Function();突出显示为意外.我开始尝试做以下事情.

var func = new Function();
func.property = "some property";
return func;

一个替代品.

var func = new function(){
this.property = "some property";
}
return func;

工作和第二个工作都被js-lint忽略了.

我在这里做了什么壮观的事情,还是这个完全一样？这样使用语法是否正确new Function();？

附上原始代码摘录.

 var $ = (function() {

   function doCSS(prop, val) {
     var isSet = Boolean(val),
       action = CSSStyleDeclaration.prototype.setProperty,
       args = arguments;
     if (isSet) {
       this.each(function(node, i) {
         action.apply(node.style, args);
       });
       return this;
     } else if (typeof(prop) === 'object') {
       this.each(function(node, i) {
         Object.keys(prop).forEach(function(property) {
           node.style[property] = prop[property];
         });
       });
       return this;
     } else {
       return this.nodes[0].style[prop];
     }
   }



   // chaining of methods
   return (function(selector, context) {
     var q = new Function();
     q.selector = selector;
     q.context = context || document;
     q.nodeList = q.context.querySelectorAll(selector);
     q.each = function(action) {
       [].forEach.call(q.nodeList, function(item, i) {
         action(item, i);
       });
       return this;
     };
     q.click = function(action) {
       [].forEach.call(q.nodeList, function(item, i) {
         item.addEventListener("click", action, false);
       });
       return this;
     };
     q.toString = function() {
       return q.selector;
     };
     q.css = function(prop, val) {
       return doCSS.call(this, prop, val);
     };


     return q;


   });
 })

语法中是否有这两个错误？

编辑 在得到一些很好的建议后,我将代码改编为以下内容:

var $ = (function($) {

  function doCSS(prop, val) {
    var isSet = Boolean(val),
      action = CSSStyleDeclaration.prototype.setProperty,
      args = arguments;
    if (isSet) {
      this.each(function(node, i) {
        action.apply(node.style, args);
      });
      return this;
    } else if (typeof(prop) === 'object') {
      this.each(function(node, i) {
        Object.keys(prop).forEach(function(property) {
          node.style[property] = prop[property];
        });
      });
      return this;
    } else {
      return this.nodes[0].style[prop];
    }
  }

  // chaining of methods
  return (function(selector, context) {
    var element = context || document;
    var q = {
      selector: selector,
      nodeList: element.querySelectorAll(selector),
      each: function(action) {
        [].forEach.call(this.nodeList, function(item, i) {
          action(item, i);
        });
        return this;
      },
      click: function(action) {
        [].forEach.call(this.nodeList, function(item, i) {
          item.addEventListener("click", action, false);
        });
        return this;
      },
      toString: function() {
        return selector;
      },
      css: function(prop, val) {
        return doCSS.call(this, prop, val);
      },

    }

    return q;

  });


})($);

$("#myElement").css({
  background: "blue",
  color: "#fff"
});

<div id="myElement">Say Hi</div>

它工作得很好,看起来更干净.JS Lint对我很好,我可以解决下一个问题.

Answer 1

在第一种情况下,您创建一个新对象并应用Function构造函数.

返回值是一个函数.

在第二个示例中,您将创建一个新对象,并将匿名函数应用为构造函数.

返回值是一个对象.

Answer 2

这两种说法确实不同.我将集中讨论第二个声明来指出差异.

var newObj1 = new function () {
    this.prop1 = "test1";
    this.prop2 = "test2"
};

相当于以下内容:

var Example = function () {
    this.prop1 = "test1";
    this.prop2 = "test2"
};

var newObj2 = new Example();

唯一的区别是在第一个例子中,被调用的构造函数是一个匿名函数.请注意,当使用newjavascript中的关键字调用函数时,它表现出特殊的行为.

在您的第一个语句中,调用的构造函数是一个已定义的函数Function.

正如已经指出的那样,第一个语句返回一个函数,而第二个语句返回一个对象.两者都不对,但是一个函数返回一个函数而另一个对象可能会对代码的其他部分产生影响.