Created
June 29, 2012 19:12
-
-
Save pschyska/3020029 to your computer and use it in GitHub Desktop.
Prototype Examples
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
>>>> Ext.define('Test.view.Explorer', { extend: 'Ext.panel.Panel', showProperties: true, title: 'Properties'}); | |
****** In this case, the String 'My Title' is copied to the object behind foo via Ext.applyIf, because that's what happens with passed config (second param to Ext.create) | |
>>>> var foo = Ext.create('Test.view.Explorer', {title: 'My Title'}); | |
>>>> foo.title; | |
"My Title" | |
>>>> var bar = Ext.create('Test.view.Explorer'); | |
******* because title is no property of bar, JS goes up the prototype chain and finds title at bar.constructor.prototype.title (or the deprecated bar.__proto__.title :-) | |
>>>> bar.title; | |
"Properties" | |
******* As Strings are immutable in JS (and every string operation returns a new String), this would be acceptable usage of prototype properties. Objects and Arrays are mutable however, and it's not safe to use them on the prototype. See example below. | |
>>>> Ext.define('Test.view.NoteExplorer', {extend: 'Test.view.Explorer', title: 'Notes'}); | |
>>>> var notesExplorer = Ext.create('Test.view.NoteExplorer', {title: 'Recent Notes'}); ***** defining title on object notesExplorer via Ext.applyIf | |
>>>> notesExplorer.title; | |
****** Found on object, so not going to prototype | |
"Recent Notes" | |
>>>> notesExplorer.__proto__.title; | |
"Notes" | |
>>>> var notesList = Ext.create('Test.view.NoteExplorer'); | |
>>>> notesList.title; | |
"Notes" | |
>>>> foo.title; | |
"My Title" | |
>>>> notesExplorer.__proto__.title = 'Hello Motto'; | |
>>>> notesExplorer.title; | |
"Recent Notes" // still recent notes because we overrode it the subclass | |
***** it's still "Recent Notes" because it's defined on object notesExplorer, and not looking at prototype at all | |
>>>> notesList.title; | |
"Hello Motto" // this traced up the chain to the prototype and used that value |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
What you found out is correct, but my point applies to non-primitive/mutable properties on the prototype (Array and Object types), and is in fact not inheritance related. The thing is every object shares a common prototype, even if it's not inheriting something with Ext's class system. | |
Pratical example in Ext terms: | |
Ext.define('Explorer', { | |
someObjectProperty: { | |
title: 'The Explorer' | |
} | |
}); | |
var oneExplorer=Ext.create('Explorer'); | |
var twoExplorer=Ext.create('Explorer'); | |
oneExplorer.someObjectProperty.title = 'One explorer' // *1) | |
"One explorer" | |
oneExplorer.someObjectProperty.title | |
"One explorer" // that was expected | |
twoExplorer.someObjectProperty.title | |
"One explorer" // that was probably *not* intended. We only changed the title on oneExplorer, and not twoExplorer, so it should be 'The Explorer', right ;-) | |
*1) someObjectProperty not found on object, so proto property is fetched on first '.' operator. The second '.' operator operates on proto property, fetching reference to title. The = operator changes the title reference from the String 'The Explorer', to the String 'One explorer'. **The someObjectProperty is still on the prototype, and shared between all objects with the changed title attribute** |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment