JavaScript中的'new'关键字是什么？ [英] What is the 'new' keyword in JavaScript?

问题描述

JavaScript中的 new 关键字在第一次遇到时会非常混乱，因为人们倾向于认为JavaScript不是面向对象的编程语言。

The new keyword in JavaScript can be quite confusing when it is first encountered, as people tend to think that JavaScript is not an object-oriented programming language.

• 这是什么？


• 它解决了什么问题？


• 什么时候适当，什么时候不适合？

推荐答案

它做了5件事：

1. 它会创建一个新对象。这个对象的类型只是 object 。


2. 它设置了这个新对象的内部，不可访问， [[prototype]] （即 __ proto __ ）属性是构造函数的外部，可访问，原型对象（每个函数对象自动具有 prototype 属性）。


3. 它使这个变量指向新创建的对象。


4. 它执行构造函数，使用每当提到此时，新创建的对象。


5. 它返回新创建的对象，除非构造函数返回非 null 对象引用。在这种情况下，将返回该对象引用。

1. It creates a new object. The type of this object is simply object.
2. It sets this new object's internal, inaccessible, [[prototype]] (i.e. __proto__) property to be the constructor function's external, accessible, prototype object (every function object automatically has a prototype property).
3. It makes the this variable point to the newly created object.
4. It executes the constructor function, using the newly created object whenever this is mentioned.
5. It returns the newly created object, unless the constructor function returns a non-null object reference. In this case, that object reference is returned instead.

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

Note: constructor function refers to the function after the new keyword, as in

new ConstructorFunction(arg1, arg2)

完成此操作后，如果请求新对象的未定义属性，脚本将检查对象的属性 [[prototype]] 对象。这就是你如何在JavaScript中获得类似于传统类继承的东西。

Once this is done, if an undefined property of the new object is requested, the script will check the object's [[prototype]] object for the property instead. This is how you can get something similar to traditional class inheritance in JavaScript.

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

The most difficult part about this is point number 2. Every object (including functions) has this internal property called [[prototype]]. It can only be set at object creation time, either with new, with Object.create, or based on the literal (functions default to Function.prototype, numbers to Number.prototype, etc.). It can only be read with Object.getPrototypeOf(someObject). There is no other way to set or read this value.

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

Functions, in addition to the hidden [[prototype]] property, also have a property called prototype, and it is this that you can access, and modify, to provide inherited properties and methods for the objects you make.

以下是一个例子：

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'

这就像类继承一样，因为现在，你使用新的ObjMaker（）也似乎继承了'b'属性。

It's like class inheritance because now, any objects you make using new ObjMaker() will also appear to have inherited the 'b' property.

如果你想要类似子类的东西，那么你这样做：

If you want something like a subclass, then you do this:

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

---

在最终找到这个页面，用漂亮的图表很好地解释了这一点。

---

I read a ton of rubbish on this subject before finally finding this page, where this is explained very well with nice diagrams.

这篇关于JavaScript中的'new'关键字是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！