multiple Element.prototype not working

Question

Element.prototype = {
    hasClass : function(className){
        return this.className.contains(className, ' ');
    },
    getId: function(){
        return this.id;
    }
};

individually if it works

    String.prototype.contains = function(item, from){
        return this.indexOf(item, from) != -1;
    };

    Element.prototype.hasClass = function(className){
        return this.className.contains(className, ' ');
    };
    Element.prototype.getId = function() {
        return this.id;
    };

    document.body.innerHTML=document.getElementById('foo').hasClass('blah');

<div id="foo" class="blah"></div>

It is the first time I deal with prototype

Off topic, but your `hasClass` is a little messed up. The second argument to `contains` is being passed as the second argument to `.indexOf()`, which expects an index number, not a string. The `' '` you're passing is probably being converted to `0`. And you'll get false positives as well. `...hasClass("la"); // true` — , Oct 22 '14 at 21:33
what would be the best way to create something like described above? — alessandrio, Oct 22 '14 at 22:14
You already answered the question: `individually if it works` you're replacing the entire prototype of Element with an object containing only 2 methods. I am not sure if JS allows you to replace the prototype of Element so the methods will not show up or if it does allow you to break Element. — HMR, Oct 22 '14 at 23:57

score 1 · Answer 1 · answered Oct 22 '14 at 21:24

1

I think the problem is that you are setting prototype to a new object. If you are using jQuery or something similar, then you can do something like this:

$.extend(Element.prototype, {
    hasClass : function(className){
        return this.className.contains(className, ' ');
    },
    getId: function(){
        return this.id;
    }
});

That ought to work.

answered Oct 22 '14 at 21:24

Dan

1,451
1
11
8

I always assign prototype properties one at a time (which `$.extend` or `_.extend` both do). The only time I directly assign to the prototype is when I'm using inheritance: `MyObj.prototype = new ParrentType();` – Sukima Oct 22 '14 at 21:29
I need not use jquery – alessandrio Oct 22 '14 at 22:12
@Sukima you mean `Child.prototype=Object.create(Parent.prototype)` don't you? http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 it's bad to create an instance of Parent to set as the prototype of Child, the Parent constructor has likely some initialization to create instance specific members that have no business being on Child.prototype. – HMR Oct 22 '14 at 23:59
Yeah, still haven't left my ES3 days. Usually managed via `function Child() { Parent.call(this); }` and `Child.prototype = new Parent()`. But you are correct with ES5 and above `Object.create` is the better choice. I'm going to start looking into modifying my habit there. – Sukima Oct 23 '14 at 04:01

multiple Element.prototype not working

1 Answers1