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

时间:2016-10-17 22:32:45

标签: javascript

我选择了一些代码,我只是了解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对我很好,我可以解决下一个问题。

3 个答案:

答案 0 :(得分:15)

在第一种情况下,您创建一个新对象并应用<receiver android:name=".AutoReply" android:enabled="true"> <intent-filter> <action android:name="android.provider.Telephony.SMS_RECEIVED" /> <action android:name="my.action.string" /> </intent-filter> </receiver> 构造函数。

  

返回值是功能

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

  

返回值是对象

答案 1 :(得分:8)

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

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关键字调用函数时,它会展示special behavior

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

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

答案 2 :(得分:2)

是的,创建对象不是正确的方法 因为通过新Function()创建的对象效率低于使用函数表达式

创建的函数

全局Function对象没有自己的方法或属性,因为它本身就是一个函数,它通过Function.prototype的原型链继承了一些方法和属性

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

希望这有帮助

检查以下代码段

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

现在当您在控制台中检查时,它将其视为匿名 但是当通过函数表达式创建对象时

&#13;
&#13;
var func=new function(){this.x=10;}
console.log(func);
&#13;
&#13;
&#13; 这会返回一个对象 我想你明白了差异