new关键字具体做了啥？

Posted 2023-05-08

参考技术A 用 var anObject = new aFunction() 形式创建对象的过程实际上可以分为三步：

第一步是建立一个新对象；

第二步将该对象内置的原型对象设置为构造函数prototype引用的那个原型对象；

第三步就是将该对象作为this参数调用构造函数，完成成员设置等初始化工作。

其实javascript的new关键字只不过做了五件事情：

1.创建Object

2.查找class的prototype上的所有方法、属性，复制一份给创建的Object（注意，如果prototype上有属性是function或者数组或者Object，那么只复制指针）

3.将构造函数classA内部的this指向创建的Object

4.创建的Object的__proto__指向class的prototype

5.执行构造函数class

// 定义类 类名字是 classA

functionclassA()

this.b=1;



classA.prototype.b=44;

classA.prototype.show =function()

alert(this.b);

;

// 用new实例化

varb =newclassA();

b.show();

// 用函数实例化

functionnewClass(cls,args)

varobj = ;

for(varpincls.prototype)

obj[p] = cls.prototype[p];

obj.__proto__ = cls.prototype;

cls.apply(obj,args||[]);

returnobj;

;

vark = newClass(classA);

k.show();

new 关键字在幕后做了啥？

【中文标题】new 关键字在幕后做了啥？

【英文标题】：What does the new keyword do under the hood?new 关键字在幕后做了什么？

【发布时间】：2011-04-08 17:32:37

【问题描述】：

我很好奇 new 关键字在后台除了更改 this 范围所指的内容之外还有什么作用。

例如，如果我们比较使用new 关键字让函数在对象上设置属性和方法与仅让函数返回一个新对象，那么新对象有什么额外的功能吗？

如果我不希望从函数构造函数创建多个对象，这是首选

var foo2 = function () 
  var temp = "test";

  return 
    getLol: function () 
      return temp;
    ,

    setLol: function(value) 
      temp = value;
    
  ;

();

var foo = new function () 
  var temp = "test";

  this.getLol = function () 
    return temp;
  

  this.setLol = function(value) 
    temp = value;
  
();

萤火虫探查器告诉我使用 new 关键字稍快（2ms 而不是 3ms），在大型对象上 new 仍然明显更快？

[编辑]

另一个问题是关于真正大的对象构造函数是在函数底部有一个返回（它将有大量的本地函数）或者在函数的顶部有一些 this.bar = ...可读？什么是好的约定？

var MAIN = newfunction() 
    this.bar = ...

    // Lots of code
();

var MAIN2  = function() 
    // Lots of code

    return 
        bar: ...
    
();

【问题讨论】：

与Is it right to think of a Javascript Function Expression that uses the 'new' keyword as 'static' 完全相同 - 除了标题中的问题

标题问题见JavaScript: How does 'new' work internally

【参考方案1】：

从the Good Parts book（第47页）引用Douglas Crockford来回答这个问题的标题：

如果new 运算符是一个方法而不是一个运算符，它可以这样实现：

Function.method('new', function () 

   // Create a new object that inherits from the 
   // constructor's prototype.

   var that = Object.create(this.prototype);

   // Invoke the constructor, binding -this- to
   // the new object.

   var other = this.apply(that, arguments);

   // If its return value isn't an object,
   // substitute the new object.

   return (typeof other === 'object' && other) || that;
);

Function.method 方法实现如下。这将实例方法添加到类 (Source)：

Function.prototype.method = function (name, func) 
   this.prototype[name] = func;
   return this;
;

进一步阅读：

Mozilla Dev Center: Object.create() Mozilla Dev Center: Function.apply() Douglas Crockford: Classical Inheritance in JavaScript

【讨论】：

现在我只需要弄清楚 this.prototype、th​​is.apply 和 Function.method 在内部做什么:)。有时我觉得我应该更多地假设和破解，并尝试更少地了解内部。

@Raynos: Function.method 不是内置方法。添加了一些关于此的更多信息。

谢谢，我以后会花一些时间阅读这些内容。仍然掌握原型设计的窍门。

看来Crockford先生忘记了函数也是对象嘿嘿（如果other是函数，它仍然会返回that）

@CMS：构造函数只会在用new Function()构造函数时返回一个函数，对吧？在这种情况下，上述方法将不起作用，除非我们也检查 typeof other === 'function'。是这样吗，还是我错过了什么？

【参考方案2】：

阅读the spec。 11.2.2 和 13.2.2 部分是相关的，并且不太难理解（请注意，后两个链接指向规范的非官方 HTML 化版本）。

总之，如果你有一个返回对象的函数f，那么使用new 调用它的唯一可观察到的区别是this 的值将不同，而使用@987654327 调用它@ 可能会更慢，因为它涉及创建对象并为其分配一些属性的额外步骤。

【讨论】：

听起来new 是反模式吗？我想知道为什么对象根本需要new。让它看起来更像 Java/C++？

@thomson-comer 这不是反模式，它为对象提供了自己的this 变量