Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
281 views
in Technique[技术] by (71.8m points)

javascript - JavaScript中的“ new”关键字是什么?(What is the 'new' keyword in 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.

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

  • What is it?

    (它是什么?)

  • What problems does it solve?

    (它解决什么问题?)

  • When is it appropriate and when not?

    (什么时候合适,什么时候不合适?)

  ask by Alon Gubkin translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

It does 5 things:

(它做五件事:)

  1. It creates a new object.

    (它创建一个新对象。)

    The type of this object is simply object .

    (这个对象的类型就是object 。)

  2. It sets this new object's internal, inaccessible, [[prototype]] (ie __proto__ ) property to be the constructor function's external, accessible, prototype object (every function object automatically has a prototype property).

    (它将这个新对象的内部不可访问的[[prototype]] (即__proto__ )属性设置为构造函数的外部可访问原型对象(每个函数对象都会自动具有prototype属性)。)

  3. It makes the this variable point to the newly created object.

    (它使this变量指向新创建的对象。)

  4. It executes the constructor function, using the newly created object whenever this is mentioned.

    (它执行的构造函数,使用每当新创建的对象this被提及。)

  5. It returns the newly created object, unless the constructor function returns a non- null object reference.

    (它返回新创建的对象,除非构造函数返回一个非null对象引用。)

    In this case, that object reference is returned instead.

    (在这种情况下,将返回该对象引用。)

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

(注意: 构造函数是指new关键字之后的函数,例如)

new ConstructorFunction(arg1, arg2)

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.

(完成此操作后,如果请求新对象的未定义属性,则脚本将改为检查对象的[[prototype]]对象的属性。)

This is how you can get something similar to traditional class inheritance in JavaScript.

(这就是您可以获得类似于JavaScript中传统类继承的方法的方法。)

The most difficult part about this is point number 2. Every object (including functions) has this internal property called [[prototype]] .

(关于这一点最困难的部分是点号2。每个对象(包括函数)都具有称为[[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.).

(只能在对象创建时使用newObject.create或基于文字(功能默认为Function.prototype,数字为Number.prototype等)进行设置。)

It can only be read with Object.getPrototypeOf(someObject) .

(只能使用Object.getPrototypeOf(someObject)读取它。)

There is no other way to set or read this value.

(没有其他方法可以设置或读取该值。)

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.

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


Here is an example:

(这是一个例子:)

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'

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

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

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.

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...