Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
51 views

JavaScript - Operator "New"

The new operator in JavaScript is used to create an object instance based on a constructor function. When new is used, it performs the following steps: 1. A new empty object is created and the constructor function is executed with this set to the new empty object. 2. The new object is set as the prototype of the newly created object. 3. The newly created object is returned if the constructor function does not return an object. If it returns an object, that object is returned instead.

Uploaded by

pedrodotnet
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
51 views

JavaScript - Operator "New"

The new operator in JavaScript is used to create an object instance based on a constructor function. When new is used, it performs the following steps: 1. A new empty object is created and the constructor function is executed with this set to the new empty object. 2. The new object is set as the prototype of the newly created object. 3. The newly created object is returned if the constructor function does not return an object. If it returns an object, that object is returned instead.

Uploaded by

pedrodotnet
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

4/9/2017 JavaScript: Operator new

HTMLCSSJavaScriptDOMSVG

JavaScript:Operatornew
ByXahLee.Date:20130813.Lastupdated:20170409.

Thekeywordnewisaoperator.

Thisoperatorisusedtocreatenewobjects,togetherwithafunction,inthissyntax:

newfunction_name();

JavaScript
//exampleofcreatingaobjectwithuserdefinedconstructor

//defineafunction,noreturnstatement
functionFF(){
this.b=4;//addingaproperty
}

//createanewobject
varx=newFF();

console.log(x);//{b:4}

Functionsdesignedtobeusedwithnewarecalledconstructor,andbyconventionthefirstletterofthefunctionname
iscapitalized.

seeJavaScript:What'sConstructor?

WhatDoesnewDoExactly?
Here'swhatthenewkeyworddo.Let'ssaywehavenewF().

1.Everyfunctionhasapropertykey"prototype"seeJavaScript:PropertyKey"prototype"
2.ThevalueofF.prototypebydefaultis{"constructor":F}(thatis,aobjectwithapropertykey
"constructor",withvalueofthefunctionitself).seeJavaScript:PropertyKey"constructor"
3.JavaScriptcreatesanewemptyobjectwithitsparentbeingthevalueofF.prototype.Let'scallthisnewobject
tempObj.seeUnderstandingPrototypeandInheritance
4.ThefunctionFisexecuted,withF'sthishavingvalueoftempObj.seeJavaScript:thisBinding
5.IfFdoesnothaveareturnstatement,oritdoesbutreturnsavaluethatisnotaobject,thenthetempObjisthe
result.seeJavaScript:What'sObject?IfFreturnsavaluethatisaJavaScriptobject,thenthatobjectis
theresult.

//exampleshowingdifferenceofconstructorwithdifferenttypeofreturnvalueJavaScript

http://xahlee.info/js/js_keyword_new.html 1/6
4/9/2017 JavaScript: Operator new
varF1=function(){this.b=4;};
varF2=function(){this.b=4;return3;};
varF3=function(){this.b=4;return{"c":7};};

varx1=newF1();
varx2=newF2();
varx3=newF3();

console.log(x1);//prints{b:4}
console.log(x2);//prints{b:4}
console.log(x3);//prints{c:7}

//whatnewF()returnsdependsonwhetherFreturnsaobject

What'stheParentofaObjectCreatedwithnew?
IftheconstructorfunctionFdoesnothaveareturnstatementorreturnsanonobjectvalue,thentheparentof
thecreatedobjectisthevalueofF.prototypeatthetimethenewF()iscalled.
Iftheconstructorfunctionhasareturnstatement,and,thereturnvalueisaobjectX,then,thisobjectXisthe
result.Therefore,theparentofthenewlycreatedobjectistheparentofX.Exactlywhatitisdependsonhowthe
functioncreatedX.

//showingtheprototypeofaobjectcreatedbyaconstructorthatdoesn'thave JavaScript
areturnstatement
varFF=function(xx){this.yy=xx;};
varoo=newFF(3);
console.log(Object.getPrototypeOf(oo)===FF.prototype);//true

//showingtheprototypeofaobjectcreatedbyaconstructorthatreturnsa JavaScript
object

//thisfunctionreturnsaobject
varFF=function(xx){return{"yy":3};};

varoo=newFF(3);

//theparentofooisNOTFF.prototype
console.log(Object.getPrototypeOf(oo)===FF.prototype);//false

//becausethefunctionFFreturnsaobject
//so,thenewlycreatedobjectiswhateverthefunctionreturned.
//inthiscase,theobjectiscreatedbyliteralexpression{},andbydefaultits
parentisObject.prototype
console.log(Object.getPrototypeOf(oo)===Object.getPrototypeOf({}));//true
console.log(Object.getPrototypeOf(oo)===Object.prototype);//true

seeJavaScript:PrototypeandInheritance

ChangingConstructor'sPrototypePropertyDoesNotChangeParentofExistingObject

//changingconstructor'sprototypepropertydoesnotchangeparentofexisting JavaScript
object

functionFF(){};
FF.prototype={xx:5};
http://xahlee.info/js/js_keyword_new.html 2/6
4/9/2017 JavaScript: Operator new

varaa=newFF();

console.log(aa.xx);//5

FF.prototype={yy:6};

console.log(aa.yy);//undefined

Reference
ECMAScript2015ECMAScriptLanguage:Expressions#secnewoperator

JSConstructorTopic

1.JavaScript:thisBinding
2.JavaScript:What'sConstructor?
3.JavaScript:PropertyKey"prototype"
4.JavaScript:Operatornew
5.JavaScript:instanceofOperator
6.JavaScript:PropertyKey"constructor"

SingleUkraine JavaScript: FreeGuideon JavaScript:


Ladies Prototypeand... PowerShell MethodChaining...
Ad ukrainawomen.com xahlee.info Ad veeam.com xahlee.info

CUBAPlatform JavaScript: WhatLanguages XahWebDevBlog


OpenSource... SemicolonRules toHate
Ad cubaplatform.com xahlee.info xahlee.info xahlee.info

http://xahlee.info/js/js_keyword_new.html 3/6
4/9/2017 JavaScript: Operator new

Likewhatyouread?
BuyJavaScriptin
Depth

or,buyanew
keyboard,see
KeyboardReviews.

JSBasics

JSinDepth
Function
1. DefineFunction
2. FunctionParameters
3. VariableDeclarationOrder
4. FunctionLevelVariableScope
5. fDeclarationvsExpression
6. Closure
7. FunctionalPrograming
8. f.callf.applyf.bind
9. ArgDefaultValue
10. RestParams
11. ArrowFunction
Properties
1. PropertyOverview
2. PropertyKey
3. DotvsBracketNotation
4. Create/DeleteProperty
5. Read/WritetoProperty
6. CheckPropertyExistence
7. ListProperties
8. PropertyAttributes
9. Getter/Setter
http://xahlee.info/js/js_keyword_new.html 4/6
4/9/2017 JavaScript: Operator new

10. PropertyDescriptor
Object,Inheritance
1. ObjectOverview
2. What'sObject?
3. Prototype,Inheritance
4. CreateObject
5. ObjectLiteralExpression{}
6. FindObject'sParent
7. CreateObjectwithParentX
8. PreventAddingProperty
9. TypeofObject
10. PrimitiveTypesObjectWrapper
11. CloneObject
12. EqualityTestofObjects
13. Boolean()ConstructorObject
Array
1. Array
2. CreateArray
3. SparseArray
4. ArrayLikeObject
5. ArrayHowTo
Constructor
1. thisbinding
2. What'sConstructor?
3. Propertyprototype
4. Operatornew
5. Operatorinstanceof
6. Propertyconstructor

JSObjectReference

ES2015

JSMisc

DOMScripting

http://xahlee.info/js/js_keyword_new.html 5/6
4/9/2017 JavaScript: Operator new

http://xahlee.info/js/js_keyword_new.html 6/6

You might also like