[TYPO3-dev] WARNING: Is Prototype affecting the inbuilt JavaScript Array and Object types?

[Peter Klein]

-- 
Peter Klein/Umloud Untd

"R. van Twisk" <typo3 at rvt.dds.nl> skrev i en meddelelse 
news:mailman.2482.1158274999.6429.typo3-dev at lists.netfielders.de...

>>
>> What would you advice?
>>
> Investigate... ask peter klein, he has experience on the subject.
>>

Here's an example JS code that illustrates what the problem is:

-- cut --
<script>

 /* This functions extends the standard Object object in Javascript, similar 
to what prototype library does (did?). */

 /* This function merges the properties of two objects, and returns the 
merged properties */
 Object.prototype.objMerge = function(obj) {
 var merged = new Object();
 for (var i in this) {
  if (isNaN(i)) merged[i] = this[i];
 }
 for (var i in obj) {
  if (isNaN(i)) merged[i] = obj[i];
 }
 return merged;
 }


 objOne = new Object();
 objOne = {
  languageKey: 'default',
  tabChar: 'Tabchar',
  backColor: 'ButtonFace',
  borderColor: 'Gray',
  backColorLn: '#f0f0f0',
  borderColorLn: 'GrayText',
  textColorLn: 'Gray',
  defaultFontSize: 9,
  linenumColWidth: 47
 };
 objTwo  = new Object();
 objTwo = {
  languageKey: 'default',
  tabChar: 'Space',
  textColorLn: 'Green',
  defaultFontSize: 11,
  linenumColWidth: 52
 };

 mergedObj = objOne.objMerge(objTwo);
 for (var i in mergedObj) {
  document.write(i+' = '+mergedObj[i]+'<br />')
 }
</script>
-- cut --

If you run the above JS, you'll get an output like this:

languageKey = default
tabChar = Space
backColor = ButtonFace
borderColor = Gray
backColorLn = #f0f0f0
borderColorLn = GrayText
textColorLn = Green
defaultFontSize = 11
linenumColWidth = 52
objMerge = function(obj) { var merged = new Object(); for (var i in this) 
{ if (isNaN(i)) merged[i] = this[i]; } for (var i in obj) { if (isNaN(i)) 
merged[i] = obj[i]; } return merged; }

Notice that "objMerge" is now a property of the merged object.
And if I have more "Object.prototype" in my script, the merged object will 
have those properties too.


To illustrate the differences, try this JS:
(Here' the merge function is a seperate function and doesn't extend Object.)

-- cut --
 <script>

 objMerge = function(obj1,obj2) {
 var merged = new Object();
 for (var i in obj1) {
  if (isNaN(i)) merged[i] = obj1[i];
 }
 for (var i in obj2) {
  if (isNaN(i)) merged[i] = obj2[i];
 }
 return merged;
 }


 objOne = new Object();
 objOne = {
  languageKey: 'default',
  tabChar: 'Tabchar',
  backColor: 'ButtonFace',
  borderColor: 'Gray',
  backColorLn: '#f0f0f0',
  borderColorLn: 'GrayText',
  textColorLn: 'Gray',
  defaultFontSize: 9,
  linenumColWidth: 47
 };
 objTwo  = new Object();
 objTwo = {
  languageKey: 'default',
  tabChar: 'Space',
  textColorLn: 'Green',
  defaultFontSize: 11,
  linenumColWidth: 52
 };

 mergedObj = objMerge(objOne,objTwo);
 for (var i in mergedObj) {
  document.write(i+' = '+mergedObj[i]+'<br />')
 }
</script>

-- cut --


It will show a correct output like this:

languageKey = default
tabChar = Space
backColor = ButtonFace
borderColor = Gray
backColorLn = #f0f0f0
borderColorLn = GrayText
textColorLn = Green
defaultFontSize = 11
linenumColWidth = 52


BTW: I read somewhere (forgot to bookmark it :( ) that prototype.js v1.5+, 
doesn't extend "Object" anymore, only "Array", so maybe the problem have 
been solved.
As extending "Array" doesn't give the same problems, as you can only access 
JS arrays using numeric keys. (If the key isn't numeric, then it's an 
"Object", not an "Array")

---
Peter Klein