3

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);
Improve this question

2 Answers 2

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Could you give me some explanation about what is and what's not allowed with the host objects?
@RomanticElectron: That's hard to do. I believe ECMAScript 5 gave more definition to what behaviors host objects are and are not required to implement, but it's probably a bigger topic than I'd care to dive into here. I'd need to read up on it again. I'd suggest doing a search for "host object" in the spec. I did a quick one, and one of the first things I found was "Whether or not a native object can have a host object as its [[Prototype]] depends on the implementation."
I believe your code gives an error at Element.call(this,tagName)
@RomanticElectron: It does... for the same reason noted in the first part of my answer. The Element constructor (a host object) only wants to be invoked in its typical way. Not with any other object as this. I was just showing how you'd normally set up inheritance.
-1

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
Improve this answer

3 Comments

This is incorrect. 1) Your constructor is not returning a new instance of MyObject that inherits from a DOM element. It's returning the DOM element itself, so you could completely remove the constructor, and just call document.createElement() directly, and you'd be doing the same thing. 2) The tempObj.prototype = Element.prototype merely adds a new property to your new element that points to Element.prototype. It has nothing to do with inheritance. 3) When you put new properties on tempObject.prototype, you're now putting them directly on Element.prototype because of...
...your assignment I noted in point 2 above. This means you're adding newMethod() do all DOM elements. The final outcome is pretty much identical to this example.
...What I tried to convey to you in my answer is that you can't do what you're trying to do. If you could, people everywhere would do it, because it would be really convenient. But no one does it... because they can't... because it doesn't work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.