-6

See: JavaScript Object Literal notation vs plain functions and performance implications?

I am thinking converting my functions and associated data into object notation. What is the performance cost (if any?)

I currently use a naming convention with my functions that is structured and reflects what would become objects. Therefore object literal notation does not really add much clarification to the purpose of a function.

Regardless, I plan to convert to proper objects. Will I gain or loose anything in the way of execution speed by doing so? (Perhaps due to dereferencing?)

I am thinking converting the following functions and associated data into object notation. I would end up with the following objects:

oFilter
oMenuImage
oTimer
oWindow
oMouseEvent
oElement
oLayout
oTooltip

So in looking at a the first functions below the object oFilter might contain functions such as:

ControlCreate
Store
Restore
ResetThenAnimate
Animate
Spin
SetRotation
Resize
SlideStyleToggle
Get
Set
Enable
Play

The complete web page and script can be found: HERE or HERE
but stay on the home page the rest isn't updated.

The site is a rather large educational project. In the near future I will be learning object literal notation (which I like) and use of frameworks. Here is a list of existing functions (it is big): Find all "function fn", Hidden, Regular expressions, Find Results 2, Current Document

function fnFilterControlCreate(filterPlayAll, startIndex, endIndex,
      MdmPtPageJava.js(123):        function fnFilterStore(oObj, oObjImage, filterIndex) {
      MdmPtPageJava.js(133):        function fnFilterRestore(oObj, oObjImage, filterIndex) {
      MdmPtPageJava.js(152):        function fnFilterResetThenAnimate(oObj, oObjImage, filterIndex) {
      MdmPtPageJava.js(179):        function fnFilterAnimate(oObj, oObjImage, filterIndex, flMultiplier) {
      MdmPtPageJava.js(201):        function fnFilterSpin(oObj, oObjImage, filterIndex, IsImageLarge) {
      MdmPtPageJava.js(242):        function fnFilterSetRotation(oObj, oObjImage, filterIndex, deg) {
      MdmPtPageJava.js(259):        function fnFilterResize(oObj, oObjImage, filterIndex, flMultiplier, IsImageLarge, imgWidthPassed, imgHeightPassed, DoHeight) {
      MdmPtPageJava.js(331):        function fnFilterSlideStyleToggle(oObj, oObjImage, filterIndex) {
      MdmPtPageJava.js(357):        function fnFilterGet(filterPlayAll, startIndex, endIndex,
      MdmPtPageJava.js(446):        function fnFilterSet(filterPlayAll, startIndex, endIndex,
      MdmPtPageJava.js(463):        function fnFilterEnable(filterPlayAll, startIndex, endIndex,
      MdmPtPageJava.js(494):        function fnFilterApply(filterPlayAll, startIndex, endIndex,
      MdmPtPageJava.js(529):        function fnFilterPlay(playDirection, timerMethod, IsImageLarge,
      MdmPtPageJava.js(568):        function fnFilterStop(filterPlayAll, startIndex, endIndex,
      MdmPtPageJava.js(628):        function fnFilterGetByIndex(
      MdmPtPageJava.js(991):        function fnFilterGetByTagName(filterTagName) {
      MdmPtPageJava.js(1002):        function fnFilterGetRandom(filterClassSingle, filterClassDynamic, filterIndex,
      MdmPtPageJava.js(1022):        function fnFilterTimingGetByIndex() {
      MdmPtPageJava.js(1029):        function fnFilterTimingGetRandom() {
      MdmPtPageJava.js(1037):        function fnStyleBackgroundToggle(oObj, oObjImage, filterIndex) {
      MdmPtPageJava.js(1058):        function fnMenuImgAnimationPlayFirst(playDirection, timerMethod, IsImageLarge, oObjNextParent, oObjNextImage, oObjNext, oObjNextLarge,
      MdmPtPageJava.js(1076):        function fnMenuImgAnimationPlayNext(playDirection, timerMethod, IsImageLarge, oObjNextParent, oObjNextImage, oObjNext, oObjNextLarge,
      MdmPtPageJava.js(1095):        function fnMenuImgAnimationPlayAgain(playDirection, timerMethod, IsImageLarge, oObjNextParent, oObjNextImage, oObjNext, oObjNextLarge,
      MdmPtPageJava.js(1110):        function fnMenuImgAnimationPlay(playDirection, timerMethod, IsImageLarge, oObjNextParent, oObjNextImage, oObjNext, oObjNextLarge,
      MdmPtPageJava.js(1422):        function fnTimerStart(timerType, timerGroup, timerId, IsImageLarge,
      MdmPtPageJava.js(1548):        function fnTimerSet(timerType, timerGroup, timerId, IsImageLarge,
      MdmPtPageJava.js(1629):        function fnTimerFilterStart(playDirection, timerMethod, IsImageLarge,
      MdmPtPageJava.js(1688):        function fnTimerMoveStart(playDirection, timerMethod, IsImageLarge,
      MdmPtPageJava.js(1794):        function fnTimerFilterStepDoGroup(timerType, timerGroup, timerId, IsImageLarge) {
      MdmPtPageJava.js(1910):        function fnTimerFilterStepDoItem(timerType, timerGroup, timerId, IsImageLarge) {
      MdmPtPageJava.js(2041):        function fnTimerMoveStepDoGroup(timerType, timerGroup, timerId, IsImageLarge) {
      MdmPtPageJava.js(2151):        function fnTimerMoveStepDoItem(timerType, timerGroup, timerId, IsImageLarge) {
      MdmPtPageJava.js(2460):        function fnTimerSetDisplayed(timerType, timerGroup, timerId, IsImageLarge) {
      MdmPtPageJava.js(2505):        function fnTimerStop(timerType, timerGroup, timerId, IsImageLarge) {
      MdmPtPageJava.js(2536):        function fnTimerMoveTest(timerType, timerGroup, timerId, IsImageLarge) {
      MdmPtPageJava.js(2558):        function fnTimerObjectSet(playDirection, timerMethod, IsImageLarge, oObjNextParent, oObjNextImage, oObjNext, oObjNextLarge, iImageSize, oObjGroupIndex, oObjGroupImageIndex, oObjLocked, IgnoreLock) {
      MdmPtPageJava.js(2599):        function fnTimerDeactivate(timerType, timerGroup, timerId, IsImageLarge, timerDoRoot) {
      MdmPtPageJava.js(2636):        function fnTimerDefaults(timerType, timerGroup, timerId, IsImageLarge,
      MdmPtPageJava.js(2899):        function fnTimerBusy(timerType, timerGroup, timerId, IsImageLarge) {
      MdmPtPageJava.js(2921):        function fnTimerObjectExists(timerType, timerGroup, timerId, IsImageLarge) {
      MdmPtPageJava.js(2930):        function fnTimerKeyText(playDirection, timerType, timerGroup, timerId, IsImageLarge) {
      MdmPtPageJava.js(2942):        function fnTimerIntervalText(timerType, timerGroup, timerId, IsImageLarge, UseRootKey) {
      MdmPtPageJava.js(2957):        function fnTimerRootKeyText(timerType, timerGroup, timerId, IsImageLarge) {
      MdmPtPageJava.js(3001):        function fnTimerGetElapsed(timerType, timerGroup, timerId, IsImageLarge) {
      MdmPtPageJava.js(3058):        function fnBodyImagesHtmlBuild() {
      MdmPtPageJava.js(3075):        function fnMenuImgHtmlBuild() {
      MdmPtPageJava.js(3955):        function fnlayoutContainerHeightGetAll() {
      MdmPtPageJava.js(3987):        function fnWindowResize() {
      MdmPtPageJava.js(4324):        function fnWindowBlockWidthAjust()
      MdmPtPageJava.js(4331):        function fnWindowBlockWidth()
      MdmPtPageJava.js(4454):        function fnWindowClientWidth() {
      MdmPtPageJava.js(4500):        function fnWindowSessionLoad() {
      MdmPtPageJava.js(4510):        function fnWindowSessionSave() {
      MdmPtPageJava.js(4525):        function fnWindowCookieLoad() {
      MdmPtPageJava.js(4533):        function fnWindowCookieSave() {
      MdmPtPageJava.js(4541):        function fnWindowCookieBuild() {
      MdmPtPageJava.js(4555):        function fnDocumentLoad() {
      MdmPtPageJava.js(4575):        function fnDocumentLoadInit() {
      MdmPtPageJava.js(4615):        function fnMathNumberRandomGetByRange(filterRangeLow, filterRangeHigh, filterRealFlag) {
      MdmPtPageJava.js(4626):        function fnFontSizeIncrease() {
      MdmPtPageJava.js(4632):        function fnFontSizeDecrease() {
      MdmPtPageJava.js(4643):        function fnDebugStart(debugOption, debugMessage) {
      MdmPtPageJava.js(4680):        function fnMouseEventOverImg(menuImage) {
      MdmPtPageJava.js(4704):        function fnMouseEventOutImg(menuImage) {
      MdmPtPageJava.js(4720):        function fnMouseEventClickImg(menuImage) {
      MdmPtPageJava.js(4758):        function fnWindowPopupOpen() {
      MdmPtPageJava.js(4772):        function fnElementObjectBlockCount() {
      MdmPtPageJava.js(4803):        function fnElementObjectContainerCreate() {
      MdmPtPageJava.js(4836):        function fnElementObjectCreate() {
      MdmPtPageJava.js(5001):        function fnElementGetRef(elementObject, elementObjectId, elementName) {
      MdmPtPageJava.js(5016):        function fnElementGetRefFromElement(element, elementId, elementName, elementSource) {
      MdmPtPageJava.js(5048):        function fnElementCreate(element, elementLayoutFirst) {
      MdmPtPageJava.js(5064):        function fnElementCopy(element, elementLayoutFirst, elementSource, elementStyleDisplay) {
      MdmPtPageJava.js(5111):        function fnElementFindInElement(
      MdmPtPageJava.js(5183):        function fnElementEventsCopy(elementObject, elementSourceObject, elementObjectId, elementSourceObjectId) {
      MdmPtPageJava.js(5260):        function fnElementBreakSet(element, elementId, elementLayoutFirst, elementStyleDisplay, elementStyleVisibility, elsementStyleClear) {
      MdmPtPageJava.js(5328):        function fnConsoleEventLog(mouseEventCurr, mouseEventType, mouseEventObject, mouseEventCurrRootObj,
      MdmPtPageJava.js(5495):        function fnTextReplace(text, stringFind, stringReplace) {
      MdmPtPageJava.js(5506):        function fnWindowError(errorMsg, errorUrl, errorLineNum) {
      MdmPtPageJava.js(5550):        function fnWindowErrorDebug(UseDebugger, errorMsg, errorUrl, errorLineNum) {
      MdmPtPageJava.js(5624):        function fnBrowserGetVs() {
      MdmPtPageJava.js(5635):        function fnBodyConsoleToggle(ConsoleBlock) {
      MdmPtPageJava.js(5908):        function fnLayoutFontSize(layoutMenuIndex) {
      MdmPtPageJava.js(5923):        function fnLayoutNext(layoutMenuIndex) {
      MdmPtPageJava.js(5936):        function fnLayoutCheck(layoutPrefered) {
      MdmPtPageJava.js(5943):        function fnLayoutRefresh(layoutMenuIndex, IsTemporary) {
      MdmPtPageJava.js(5954):        function fnLayoutSelectByIndex(layoutMenuIndexPassed, IsTemporary)
      MdmPtPageJava.js(6603):        function fnElementPosGet(oObjGroupIndex, oObjIndex, DoScroll, DoBase, element, elementWidthDefault, elementHeightDefault) {
      MdmPtPageJava.js(6617):        function fnElementPosCalculate(element, oObjGroupIndex, oObjIndex) {
      MdmPtPageJava.js(6646):        function fnParseInt(stringToParse) { return parseInt("0" + stringToParse); }
      MdmPtPageJava.js(6651):        function fnLayoutTopMaxGet(DoOffset, DoScroll, DoBase, element)
      MdmPtPageJava.js(6679):        function fnLayoutLeftMaxGet(DoOffset, DoScroll, DoBase, element)
      MdmPtPageJava.js(6707):        function fnLayoutWidthMaxGet(DoOffset, DoScroll, DoBase, element, elementWidthDefault)
      MdmPtPageJava.js(6736):        function fnLayoutHeightMaxGet(DoOffset, DoScroll, DoBase, element, elementHeightDefault)
      MdmPtPageJava.js(6818):        function fnMouseEventAddToElement(eventName, eventFunction, eventFunctionName, eventFunctionArgs, oObj) {
      MdmPtPageJava.js(6860):        // function fnMouseZoomHandler(e) {
      MdmPtPageJava.js(6902):            function fnTooltipShow(e, tooltipSourceElementPassed, tooltipId, tooltipInnerHtml, tooltipWidth) 
      MdmPtPageJava.js(6978):                function fnTooltipPos(e, direction)
      MdmPtPageJava.js(7020):                function fnTooltipFade(e, direction)
      MdmPtPageJava.js(7047):                function fnTooltipFadeIncrement(e, direction, beforeFlag)
      MdmPtPageJava.js(7085):                function fnTooltipHide(e) {
      MdmPtPageJava.js(7099):                function fnTooltipStop(e)
      MdmPtPageJava.js(7117):        function fnElementChangeCss(theClass, element, value)
      MdmPtPageJava.js(7151):        function fnMouseEventHandler(e)
      MdmPtPageJava.js(7404):        function fnMouseEventCurrRootObjSet(mouseEventObjectPassed)
      MdmPtPageJava.js(7422):        function fnMouseEventLastSet(e) {
      MdmPtPageJava.js(7433):        function fnMouseEventCurrSet(e) {
      MdmPtPageJava.js(7481):        function fnMouseEventCheckInvalid() {
      MdmPtPageJava.js(7528):        function fnMenuImgSetLock(IsImageLarge, oObjGroupIndex, oObjGroupImageIndex, oObjLocked, IgnoreLock) {
      MdmPtPageJava.js(7540):        function fnMenuImgHideId(e, IsImageLarge, oObjNextParentId, oObjNextImageId, oObjNextId, oObjGroupIndex, oObjGroupImageIndex, oObjLocked, IgnoreLock) {
      MdmPtPageJava.js(7568):        function fnMenuImgHide(playDirection, IsImageLarge, oObjNextParent, oObjNextImage, oObjNext, oObjNextLarge, oObjGroupIndex, oObjGroupImageIndex, oObjLocked, IgnoreLock) {
      MdmPtPageJava.js(7645):        function fnMenuImgToggleRange(HideImage, HideImageLarge, startIndex, endIndex, IsImageLarge, oObjNextParentId, oObjNextImageId, oObjNextId, iImageSize, oObjGroupIndex, oObjGroupImageIndex, oObjLocked, IgnoreLock) {
      MdmPtPageJava.js(7766):        function fnMenuImgToggle(IsImageLarge, oObjNextParentId, oObjNextImageId, oObjNextId, iImageSize, oObjGroupIndex, oObjGroupImageIndex, oObjLocked, IgnoreLock) {
      MdmPtPageJava.js(7816):        function fnMenuImgLayoutRefresh(layoutActionPassed, startIndex, endIndex, IsImageLarge, oObjGroupIndex, oObjGroupImageIndex, oObjLocked, IgnoreLock) {
      MdmPtPageJava.js(7922):        function fnMenuImgShowIndex(IsImageLarge, oObjNextParent, oObjNextImage, oObjNext, oObjNextLarge, iImageSize, oObjGroupIndex, oObjGroupImageIndex, oObjLocked, IgnoreLock) {
      MdmPtPageJava.js(7935):        function fnMenuImgShowStack(timerMethod, IsImageLarge, oObjNextParentId, oObjNextImageId, oObjNextId, iImageSize, oObjGroupIndex, startIndex, endIndex, oObjLocked, IgnoreLock) {
      MdmPtPageJava.js(8027):        function fnMenuImgShowId(playDirection, timerMethod, IsImageLarge,
      MdmPtPageJava.js(8111):        function fnMenuImgProcess(playDirection, timerMethod, IsImageLarge, oObjNextParent, oObjNextImage, oObjNext, oObjNextLarge, iImageSize, oObjGroupIndex, oObjGroupImageIndex, oObjLocked, IgnoreLock) {
      MdmPtPageJava.js(8691):        function fnElementGet(Id) { return document.getElementById(Id); }
      MdmPtPageJava.js(8696):        function fnMenuObjectSetAll(oObjGroupIndex, oObjIndex) {
      MdmPtPageJava.js(8866):        function fnMenuObjectTextSet(oObjGroupIndex, oObjIndex) {
      MdmPtPageJava.js(8964):        function fnMenuObjectNameSet(oObjGroupIndex, oObjIndex) {
      MdmPtPageJava.js(9065):        function fnMenuObjectIndexSet(oObj, DoIgnoreError) {
      MdmPtPageJava.js(9202):        function fnMenuObjectIndexSetByName(oObj) {
Community
  • 1
  • 1
DHorse
  • 219
  • 2
  • 12
  • 3
    write a test in [jspref](http://jsperf.com/) and profile it – Arun P Johny Jul 15 '13 at 11:45
  • 1
    Please show us what you have done. What code are you comparing? – 000 Jul 15 '13 at 11:49
  • 4
    Depends what your code is now ("pretty clear" = ?), and what it is going to become ("proper objects" = ?). Profile. – Lightness Races in Orbit Jul 15 '13 at 11:50
  • @JoeFrambach I believe the script can files can be viewed on the site. I'm not sure if I otherwise post all of it here or??? – DHorse Jul 15 '13 at 12:27
  • @LightnessRacesinOrbit excuse the lack of clarity, in the above list of functions anyplace you see fnTimerXXXXXX that function would become part of the timer object. Similarly, all fnMenuImgXXXXX would become part of the menu image object. Additionally, the variables specific to those functions would be incorporated into the objects. But would that be slower than leaving it as is? – DHorse Jul 15 '13 at 12:29
  • Now I get it, @JoeFrambach is right, Ling's Cars (who use outrageous sales techniques) would like the site. It was an educational work and with the mouse over events currently turned on it is amusing but busy and annoying. Despite appearances, nothing is for sale on the site (except maybe a used car.) – DHorse Jul 19 '13 at 13:42
  • @ArunPJohny I will do that (jspref.) Although the question is important, I have to convert my script (to object literal notation) anyway. When that is eventually done I'll put it on the site and place a link here. – DHorse Jul 19 '13 at 14:17
  • @LightnessRacesinOrbit I only half answered your request for clarification "proper objects" = objects created using object literal notation. All use of the word object refers to that as opposed to a regular object under JavaScript. – DHorse Jul 19 '13 at 14:20
  • 1
    @DHorse: I have no idea why you have this requirement. There is no distinction between objects initialised with object literal notation and objects built up in some other fashion, beyond syntax at the point of initialisation. Absolutely none at all. It's like asking how to convert a "car" to a "proper car" where "proper car" means the car was built in Japan rather than Korea. It's meaningless. – Lightness Races in Orbit Jul 19 '13 at 14:59
  • @LightnessRacesinOrbit The requirement is mainly educational. I guess it boils down to this. I currently am not wrapping my functions within objects but that would change if I use that style. If I understand your answer, object literal notation is an issue of style and will have the exact same performance as other JavaScript objects that contain functions. I should research performance issues in JavaScript relating to dereferencing where objects are concerned. I think... – DHorse Jul 19 '13 at 18:32
  • I don't know what you are doing with your edits here; you have added a huge block of code and other information twice; once before it got reopened, and then you removed it and added it back recently. – Andrew Barber Jul 20 '13 at 09:49
  • 1
    @AndrewBarber - See the discussion here: http://meta.stackexchange.com/questions/189591/is-sos-programmers-site-a-better-place-for-advanced-questions/189595#189595 – Brad Larson Jul 20 '13 at 18:34
  • @DHorse: Yes, more or less. Whether you created an object with object literal notation or not has no bearing whatsoever on the object itself -- it's just an initialisation syntax. – Lightness Races in Orbit Jul 21 '13 at 15:55

1 Answers1

0

As T.J. Crowder states in his comment to the question "JavaScript Object Literal notation vs plain functions and performance implications?":

Perf questions in JS are tricky, because the engines vary so much. But if you mean the two options in the question, the answer is almost certainly no. Once the engine has the function reference, doing the call will be the same in both cases, so we have to look at how the engine gets the function reference.

In the first example, to call foo the engine has to look up foo on the binding object of the execution context. In the second example, it has to look up Baz the same way, then look up foo on Baz, which is more steps. But I bet it doesn't make a real difference.

Community
  • 1
  • 1
DHorse
  • 219
  • 2
  • 12