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

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

本文关键字：new Function vs function      更新时间：2023-09-26

我拿起一些代码，我只是开始理解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;

work和第二个都被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对我很好，我可以解决下一个问题。

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

返回值为函数

在第二个示例中，创建了一个新对象，并应用了一个匿名函数作为构造函数。

返回值为对象。

两个语句确实不同。我将着重于第二种说法来指出两者的区别。

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

等价于以下内容:

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

唯一的区别是，在第一个例子中，被调用的构造函数是一个匿名函数。注意，在javascript中使用new关键字调用函数时，它会显示特殊的行为。

在第一个语句中调用的构造函数是一个已经定义的函数function .

如前所述，第一个语句返回一个函数，而第二个语句返回一个对象。两者都不对，但是一个返回函数而另一个返回对象可能会对代码的其他部分产生影响。

是的，这不是创建对象的正确方法因为通过new Function()创建的对象比使用函数表达式

创建的函数效率低

全局的Function对象没有自己的方法或属性，但是，因为它本身就是一个函数，所以它通过prototype链从Function.prototype

继承了一些方法和属性。

以获取更多参考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function

希望有帮助

检查以下代码片段

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

现在当你签入控制台时，它显示它是匿名的但是当一个对象通过函数表达式

创建时

var func=new function(){this.x=10;}
console.log(func);
这将返回一个对象我想你明白这两者的区别

相关文章：