JavaScript中的“ new”关键字是什么？

最初遇到JavaScript时， new关键字可能会造成很大的混乱，因为人们倾向于认为JavaScript并非面向对象的编程语言。

• 它是什么？
• 它解决什么问题？
• 什么时候合适，什么时候不合适？

---

#1楼

所以它可能不是用于创建对象的实例

正是用于此目的。 您可以这样定义一个函数构造函数：

function Person(name) {
    this.name = name;
}

var john = new Person('John');

但是ECMAScript的额外好处是您可以使用.prototype属性进行扩展，因此我们可以执行以下操作：

Person.prototype.getName = function() { return this.name; }

由于可以访问此原型链，因此从此构造函数创建的所有对象现在都将具有getName 。

---

#2楼

JavaScript 是一种面向对象的编程语言，它完全用于创建实例。 它是基于原型的，而不是基于类的，但这并不意味着它不是面向对象的。

---

#3楼

Javascript是一种动态编程语言，它支持面向对象的编程范例，并且用于创建对象的新实例。

类对于对象不是必需的-Javascript是一种基于原型的语言。

---

#4楼

new关键字使用函数作为构造函数来创建对象的实例。 例如：

var Foo = function() {};
Foo.prototype.bar = 'bar';

var foo = new Foo();
foo instanceof Foo; // true

实例从构造函数的prototype继承。 因此，以上述示例为例...

foo.bar; // 'bar'

---

#5楼

new关键字用于创建新的对象实例。 是的，javascript是一种动态编程语言，它支持面向对象的编程范例。 关于对象命名的约定是，对于应该由new关键字实例化的对象，始终使用大写字母。

obj = new Element();

---

#6楼

假设您具有以下功能：

var Foo = function(){
  this.A = 1;
  this.B = 2;
};

如果您将其称为独立函数，例如：

Foo();

执行此功能会将两个属性添加到window对象（ A和B ）。 它把它添加到window ，因为window是当你执行它像调用该函数的对象，而this在一个函数调用函数的对象。 至少在Javascript中。

现在，用new像这样调用它：

var bar = new Foo();

当您向函数调用中添加new时，将会发生一个新对象的创建（只是var bar = new Object() ），并且函数内的this指向您刚刚创建的新Object ，而不是所调用的对象功能。 所以bar现在是具有属性A和B的对象。 任何函数都可以是构造函数，但这并不总是很有意义。

---

#7楼

除了丹尼尔·霍华德的答案之外，以下是new功能（或至少看起来可以做到）：

function New(func) {
    var res = {};
    if (func.prototype !== null) {
        res.__proto__ = func.prototype;
    }
    var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));
    if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
        return ret;
    }
    return res;
}

而

var obj = New(A, 1, 2);

相当于

var obj = new A(1, 2);

---

#8楼

每个平台的JavaScript差异很大，因为它始终是原始规范EcmaScript的实现。

无论如何，独立于实现的所有遵循EcmaScript规范权利的所有JavaScript实现都将为您提供面向对象的语言。 根据ES标准：

ECMAScript是一种面向对象的编程语言，用于在主机环境中执行计算和操纵计算对象。

因此，现在我们已经同意JavaScript是EcmaScript的实现，因此它是一种面向对象的语言。 在任何面向对象的语言中， new操作的定义都表明，该关键字用于从某种类型的类（包括匿名类型，如C＃）中创建一个对象实例。

在EcmaScript中，我们不使用类，您可以从规范中读取：

ECMAScript不使用诸如C ++，Smalltalk或Java中的类。 相反，可以通过各种方式创建对象，包括通过文字符号或通过创建对象的构造函数，然后执行通过将初始值分配给它们的属性来初始化全部或部分对象的代码。 每个构造函数都是一个函数，具有名为“ prototype”的属性，该属性用于实现基于原型的继承和共享属性。 对象是由创建的
在新表达式中使用构造函数； 例如，new Date（2009,11）创建一个新的Date对象。 不使用new调用构造函数的后果取决于构造函数。 例如，Date（）生成当前日期和时间的字符串表示形式，而不是对象。

---

#9楼

有时候代码比文字容易：

var func1 = function (x) { this.x = x; }                    // used with 'new' only
var func2 = function (x) { var z={}; z.x = x; return z; }   // used both ways
func1.prototype.y = 11;
func2.prototype.y = 12;

A1 = new func1(1);      // has A1.x  AND  A1.y
A2 =     func1(1);      // undefined ('this' refers to 'window')
B1 = new func2(2);      // has B1.x  ONLY
B2 =     func2(2);      // has B2.x  ONLY

对我来说，只要我没有原型，我就使用func2的样式，因为它使我在函数内部和外部都有更多的灵活性。

---

#10楼

让初学者更好地了解它

在浏览器控制台中尝试以下代码。

function Foo() { 
    return this; 
}

var a = Foo();       //returns window object
var b = new Foo();   //returns empty object of foo

a instanceof Window;  // true
a instanceof Foo;     // false

b instanceof Window;  // false
b instanceof Foo;     // true

现在，您可以阅读社区维基答案 :)

---

#11楼

它做五件事：

1. 它创建一个新对象。 这个对象的类型就是object 。
2. 它将这个新对象的内部不可访问的[[prototype]] （即__proto__ ）属性设置为构造函数的外部可访问原型对象（每个函数对象都会自动具有prototype属性）。
3. 它使this变量指向新创建的对象。
4. 它执行的构造函数，使用每当新创建的对象this被提及。
5. 它返回新创建的对象，除非构造函数返回一个非null对象引用。 在这种情况下，将返回该对象引用。

注意： 构造函数是指new关键字之后的函数，例如

new ConstructorFunction(arg1, arg2)

完成此操作后，如果请求新对象的未定义属性，则脚本将改为检查对象的[[prototype]]对象的属性。 这就是您可以获得类似于JavaScript中传统类继承的方法的方法。

关于这一点最困难的部分是点号2。每个对象（包括函数）都具有称为[[prototype]]的内部属性。 只能在对象创建时使用new ， Object.create或基于文字（功能默认为Function.prototype，数字为Number.prototype等）进行设置。 只能使用Object.getPrototypeOf（someObject）读取它。 没有其他方法可以设置或读取该值。

除了隐藏的[[prototype]]属性外，函数还具有一个称为prototype的属性，您可以访问和修改此属性，以为您创建的对象提供继承的属性和方法。

---

这是一个例子：

ObjMaker = function() {this.a = 'first';};
// ObjMaker is just a function, there's nothing special about it that makes 
// it a constructor.

ObjMaker.prototype.b = 'second';
// like all functions, ObjMaker has an accessible prototype property that 
// we can alter. I just added a property called 'b' to it. Like 
// all objects, ObjMaker also has an inaccessible [[prototype]] property
// that we can't do anything with

obj1 = new ObjMaker();
// 3 things just happened.
// A new, empty object was created called obj1.  At first obj1 was the same
// as {}. The [[prototype]] property of obj1 was then set to the current
// object value of the ObjMaker.prototype (if ObjMaker.prototype is later
// assigned a new object value, obj1's [[prototype]] will not change, but you
// can alter the properties of ObjMaker.prototype to add to both the
// prototype and [[prototype]]). The ObjMaker function was executed, with
// obj1 in place of this... so obj1.a was set to 'first'.

obj1.a;
// returns 'first'
obj1.b;
// obj1 doesn't have a property called 'b', so JavaScript checks 
// its [[prototype]]. Its [[prototype]] is the same as ObjMaker.prototype
// ObjMaker.prototype has a property called 'b' with value 'second'
// returns 'second'

就像类继承一样，因为现在使用new ObjMaker()创建的任何对象也似乎都继承了'b'属性。

如果您想要子类之类的东西，请执行以下操作：

SubObjMaker = function () {};
SubObjMaker.prototype = new ObjMaker(); // note: this pattern is deprecated!
// Because we used 'new', the [[prototype]] property of SubObjMaker.prototype
// is now set to the object value of ObjMaker.prototype.
// The modern way to do this is with Object.create(), which was added in ECMAScript 5:
// SubObjMaker.prototype = Object.create(ObjMaker.prototype);

SubObjMaker.prototype.c = 'third';  
obj2 = new SubObjMaker();
// [[prototype]] property of obj2 is now set to SubObjMaker.prototype
// Remember that the [[prototype]] property of SubObjMaker.prototype
// is ObjMaker.prototype. So now obj2 has a prototype chain!
// obj2 ---> SubObjMaker.prototype ---> ObjMaker.prototype

obj2.c;
// returns 'third', from SubObjMaker.prototype

obj2.b;
// returns 'second', from ObjMaker.prototype

obj2.a;
// returns 'first', from SubObjMaker.prototype, because SubObjMaker.prototype 
// was created with the ObjMaker function, which assigned a for us

---

在最终找到此页面之前，我读了很多有关此主题的垃圾，并用漂亮的图表很好地解释了这一页 。

---

#12楼

目前已经有一些非常伟大的答案，但我发布一个新的强调我的观察案例III低于约当你有，你是一个功能明确return语句会发生什么new荷兰国际集团了。 看一下以下情况：

情况一 ：

var Foo = function(){
  this.A = 1; 
  this.B = 2;
};
console.log(Foo()); //prints undefined
console.log(window.A); //prints 1

上面是调用Foo指向的匿名函数的简单案例。 调用此函数时，它将返回undefined 。 由于没有显式的return语句，因此JavaScript解释器会强制插入return undefined;的return undefined; 函数末尾的语句。 这里的window是调用对象（上下文为this ），它获得新的A和B属性。

情况二 ：

var Foo = function(){
  this.A = 1;
  this.B = 2;
};
var bar = new Foo();
console.log(bar()); //illegal isn't pointing to a function but an object
console.log(bar.A); //prints 1

在这里，JavaScript解释器看到new关键字创建了一个新对象，该对象充当Foo指向的匿名函数的调用对象（与this相关）。 在这种情况下， A和B成为新创建的对象（代替窗口对象）的属性。 由于您没有任何显式的return语句，因此JavaScript解释程序会强制插入return语句以返回由于使用new关键字而创建的新对象。

情况三 ：

var Foo = function(){
  this.A = 1;
  this.B = 2;
  return {C:20,D:30}; 
};
var bar = new Foo();
console.log(bar.C);//prints 20
console.log(bar.A); //prints undefined. bar is not pointing to the object which got created due to new keyword.

在这里，JavaScript解释器再次看到new关键字创建了一个新对象，该对象充当Foo指向的匿名函数的调用对象（与this相关）。 同样， A和B成为新创建对象的属性。 但是这次您有一个显式的return语句，因此JavaScript解释器将不会做任何事情。

在情况III中要注意的是，由于new关键字而创建的对象已从雷达中丢失。 bar实际上指向一个完全不同的对象，该对象不是JavaScript解释器由于new关键字而创建的对象。

引用Java Scripit的David Flanagan：《权威指南》（第6版），第二章。 4，第62页：

计算对象创建表达式时，JavaScript首先创建一个新的空对象，就像对象初始化程序{}创建的对象一样。 接下来，它将使用指定的参数调用指定的函数，并将新对象作为this关键字的值传递。 然后，函数可以使用它来初始化新创建的对象的属性。 编写用作构造函数的函数不会返回值，并且对象创建表达式的值是新创建和初始化的对象。 如果构造函数确实返回了对象值，则该值将成为对象创建表达式的值，并且新创建的对象将被丢弃。

- 其他信息 -

上述情况的代码段中使用的函数在JS world中具有特殊名称，如下所示：

情况一和二 -构造函数

情况三 -工厂功能。 工厂函数不应与new关键字一起使用，因为我已经在当前线程中解释了这个概念。

您可以在此线程中了解它们之间的区别。

---

#13楼

new关键字更改在其下运行函数的上下文，并返回指向该上下文的指针。

当您不使用new关键字时，运行Vehicle()函数的上下文与您调用Vehicle函数的上下文相同。 this关键字将引用相同的上下文。 当您使用new Vehicle() ，将创建一个新上下文，因此函数内的关键字this引用了新上下文。 您得到的是新创建的上下文。

---

#14楼

摘要：

javascript中的new关键字用于根据构造函数创建对象。 必须将new关键字放置在构造函数调用之前，并将执行以下操作：

1. 创建一个新对象
2. 将此对象的原型设置为构造函数的prototype属性
3. 将this关键字绑定到新创建的对象并执行构造函数
4. 返回新创建的对象

例：

 function Dog (age) { this.age = age; } const doggie = new Dog(12); console.log(doggie); console.log(doggie.__proto__ === Dog.prototype) // true 

到底发生了什么：

1. const doggie说：我们需要内存来声明变量。
2. 赋值运算符=表示：我们将使用=后的表达式来初始化此变量
3. 表达式是new Dog(12) 。 JS引擎看到new关键字，创建一个新对象并将原型设置为Dog.prototype
4. 在this值设置为新对象的情况下执行构造函数。 在此步骤中，将年龄分配给新创建的小狗对象。
5. 返回新创建的对象，并将其分配给变量doggie。