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