I have following code:
var objectParent:{
child1:{
test1:function(){},
test2:function(){}
},
child2:{
demo1:function(){},
demo2:function(){},
parent:this // gives child2
grandparent: .... // need to reference objectParent here
}
}
We can reference object by using this keyword, But what for grand object or i mean parent of parent object?
Now, i am using grandparent:objectParent to reference parent object
Is there other way like this selector to reference parentObject?
Are these my coding is bad,good or better?
If all your objects have a parent property that refers to their parent, then can get the grandparent with object.parent.parent.
It's not real clear what you're trying to do.
If you have an element reference elem, then you can get its parent with elem.parentNode. You can get a parent's parent (e.g. a grandparent) with elem.parentNode.parentNode and so on.
If this isn't what you're trying to do, please explain in more detail what you mean by a grandparent object.
If you're not talking about DOM references at all and instead are asking about nested objects in plain javascript, then javascript does not contain any way to get the parent object that you are contained within. You would have to create a property on the child and set it if you need it that way after you've constructed the object (you can't set it with a static declaration either).
I had to do div.parentElement.parentElement to achieve it.
One way to see what to access is by logging div.__proto__ to the console which shows you a long list of properties & methods you can call.
Related
This question already has answers here:
Javascript objects: get parent [duplicate]
(12 answers)
Closed 5 years ago.
I have an object variable a, which has an array associated with it, b. I am passing b to a function and need to check properties in a, the object it's associated with.
How can I do this? Can I somehow use an event emitter?
function ObjectB (stuff) {
this.a = new a();
}
function doSomething (s) {
//need to get b from a
}
var b = new ObjectB(info);
b.a.doSomething(5);
There is no built-in notion of a parent of an object. So, your array a has no reference at all to what you call its parent. You could add one to a if you wanted by adding a property to a. In your lingo, you can't get b from a unless you set a property on a that points to b.
But, the usual way to handle a situation like you describe in Javascript is to either just pass the container so you then have the container and can get a out of the container when you need it or you can pass both the container and the array.
One of the reasons, there no notion of a parent or container is because a can be in lots of other objects. When you have {a: someArray}, the someArray array is not actually "in" the parent object. Instead, there's just a reference in that object that points to someArray and there could be many different objects that point to someArray. There is no "one" container. If you want to designate one such container, then you can set a property somewhere that indicates which container you want to anoint or as I suggested earlier, you can pass both the container and the object so the function you're calling knows which container you want it to use.
Can I somehow use an event emitter?
I don't see any way that an event emitter would be relevant to the question you asked. If you somehow think it is relevant, then we need to see your code to understand how it might be used here.
I create an object in my javascript function, and I'd want to retrieve it in c++ from dom class for change some values, but I can access only by id, tag or class that are part of css syntax. Is there the possibility to get my object and set values or send to him those value?
First of all I think you should always get DOM elements by id or class name because IMHO it's the most versatile way to get things from this kind of tree.
Anyway, just like any other DOM Minko provides the childNodes and parentNode properties if you want/have to browse the tree :
AbstractDOM::childNodes()
AbstractDOM::parentNode()
When you've found the right DOM element, you can then use the other DOM methods to get its content, set its value, etc... Everything you need should be in the AbstractDOM base class definition.
I'm creating a custom element as follows:
var myElementProto = Object.create(HTMLElement.prototype);
document.registerElement('my-element', myElementProto);
Based on this element, I'll be creating some other elements which will inherit all of the methods and attributes I've defined on this element, like so:
var myNewElementProto = Object.create(myElementProto);
document.registerElement('my-newElement', myNewElementProto);
What I'd like to do is have some standard ways in which these elements interact with each other in the DOM, but I'm not sure what the best way of identifying all of the other defined elements are. Is there a way for me to check if a given element has a prototype that's a descendant of myElementProto without just checking to see if it has certain properties I'm defining on myElementProto? That approach seems like it would work, but might cause problems down the line if those properties end up getting changed/removed, so I'd rather avoid it.
Is true if elements prototype is descendant of myElementProto:
var isDescendant = Object.getPrototypeOf( element ) instanceof myElementProto;
I am trying to inherit from the DOM Element object,all code runs fine when I create the object but when I try to call the appendChild() method ,it gives an error saying :
MyObject doesn't have an appendChild method
Here is my code:
var content=document.createTextNode("This was dynamically created");
function MyObject(tagName){
Element.constructor.call(this,tagName);
this.prototype=Element.prototype;
this.prototype=Object.defineProperties(this.prototype,{
newMethod:function(){
//dosomething
}
});
}
var newObj=new MyObject("div");
newObj.appendChild(content);
Though you're doing it incorrectly (more on that later), you're ultimately trying to pass an object that inherits from a DOM Element instead of a DOM Element itself. This is not allowed.
It seems like it should work, but DOM Elements and DOM methods are host objects. They don't play by all the same rules that you'd expect from native objects. The .appendChild() method wants an Element, and nothing else. So what you're trying to do won't work.
With respect to your approach to inheritance, it's entirely incorrect. You don't modify the .prototype property of the new object being created. You modify the .prototype of the constructor function. It's done once, and then all new objects created from the constructor inherit from the object assigned to that constructor's .prototype property.
Because there's no inheritance the way you have it, there's no .appendChild() method. The code below fixes it, but it'll still not work because of the reason given above.
function MyObject(tagName){
Element.call(this, tagName);
}
MyObject.prototype=Object.create(Element.prototype);
Object.defineProperties(MyObject.prototype,{
newMethod: {
value:function(){
//dosomething
}
}
});
Your property descriptor syntax was also wrong, so I fixed it.
This is because calling the constructor function of the Element doesn't create an instance of the DOM Element object rather it tries to set the attributes which are set by the constructor function of the DOM Element object,For example
function MyObject(tagName){
Element.constructor.call(this, tagName);
}
var newObj=new MyObject("div");
will not create a tagName attribute like the one available when we create an instance of the DOM Element object and
alert("Tag Name is set to "+newObj.tagName);
will display
Tag Name is set to undefined
as the constructor function tried to set it but it could not because there was no tagName attribute but If I replace Element.constructor.call(this, tagName); with document.createElement(tagName) you will get the result
Tag Name is set to DIV
In this link: http://css-tricks.com/snippets/jquery/jquery-plugin-template/ it has a line of code that says
// Add a reverse reference to the DOM object
base.$el.data("yourPluginName", base);
what does the "reverse reference to the DOM object" mean?
Assuming that you know the jQuery data function:
It's storing a reference to the instance of the class in the data cache of jQuery, meaning that the stored instance can be used to access the initial base object if it in the current context is not available.
This way, the class instance can be used later. However, the use of the prototype keyword upon the initial class that the instance were created from will modify the instance.
EDIT:
Ooops, it seems that Anurag is right, and I was giving wrong information.
Sorry, the information I gave in initial answer was not completely correct. I've updated the answer, so it now tells the truth.
In the comments you're asking:
so you mean its storing the current state of "base" in the data cache but if we make changes to "base" later on then the one in the data wont be affected? so if for some reason we needed to get the original one again we can do data('yourPluginName') to retrieve it? can you give me an example of when this would be helpful?
It seems that none of the statements are correct.
As I did obviously not remember adequately, the thing stored in data is only a reference to the object:
var obj = {};
obj.hello = "Hello";
$("#someElement").data("object", obj);
obj.world = " world.";
alert(
obj.hello +
$("#someElement").data("object").world
); // alerts "Hello world."
BTW, JavaScript variables with names like this base-thing (but, more often seen as that or similar) are typically used to represent the current context, accessed through the this keyword, which on many occasions is more easy to store in another variable due to scoping/context changes, that will make the current context and therefore this, change.
Also due to issues with context, the stored value in data could be used to access the specific object instance from another context (that is, when this represents something else), instead of the version of the base object that was continually used after a copy of it was stored.
I hope this answered you questions :D
The technique and the problem it solves is general and not specific to jQuery plugins. There may be cases where a Javascript object corresponds to a DOM element, and wraps logic specific to that DOM element. This object might be interested in listening to events such as clicks that happen within that DOM element. The information we get in those callbacks is the element that triggered it, and not the associated object. You could use jQuery's data API or any type of map in general to retrieve the corresponding object, and do something with it.