Defining Javascript function with prototype property

Question

What's wrong with this piece of code?

(function (){
    'use strict';

    // add hasClass function
   String.prototype.hasClass = function (className) {
       return this.className.search('(\\s|^)' + className + '(\\s|$)') != -1 ? true : false;
   };

   console.log(document.getElementById('link').hasClass('test'));    
})();

I'd expect it to return true or false, but all I get is

TypeError: document.getElementById("link").hasClass is not a function**

UPD: Thanks guys. Now i get it. I should set method to Object or Element (What is more right?) not String!

You are trying to "extend" String, but try to apply the method to a DOM element? — m90
– m90, Commented Sep 27, 2012 at 10:03

tinyd · Accepted Answer · 2012-09-27 10:15:36Z

4

document.getElementById('link') doesn't return a String, it returns a DOM element. You could try this instead:-

 Element.prototype.hasClass = function (className) {
       return this.className.search('(\\s|^)' + className + '(\\s|$)') != -1 ? true : false;
   };

   console.log(document.getElementById('link').hasClass('test'));

answered Sep 27, 2012 at 10:15

tinyd

9526 silver badges9 bronze badges

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

2 Comments

Vala Over a year ago

I wouldn't recommend messing with the prototypes of DOM classes. This is very bad practice and can make your JS incompatible with other JS libraries, etc. It would be much safer to make your own hasClass function that takes an element and a class name as a parameter.

tinyd Over a year ago

I agree. But it's worth understanding that it is possible, and doing it this way does have a certain simplicity. But as you say, it's dangerous!

Vala · Accepted Answer · 2012-09-27 10:03:10Z

1

As far as I know, hasClass is not a method of Element, you're likely thinking of the jQuery method, as such you would have to use jQuery and select the element using a jQuery selector. Other frameworks may also have such methods, I believe YUI does as well.

answered Sep 27, 2012 at 10:03

Vala

5,7041 gold badge32 silver badges56 bronze badges

Comments

danp · Accepted Answer · 2012-09-27 11:10:49Z

The way to do this is to write a function that receives a DOM element, as the String object has nothing to do with it ;)

A simple example:

function hasClass(element, classcheck){
  return element.className.indexOf(classcheck) !== -1;
}

So your code would look like:

(function (){
    'use strict';

    // add hasClass function
    function hasClass(element, classcheck){
      return element && element.className && element.className.indexOf(classcheck) !== -1;
    }

   console.log(hasClass(document.body,'test'));
})();

Obviously, you should be checking that the first argument is actually a DOM element too (quite a lot of different ways to achieve that), but this is the right way to go about it.

Collectives™ on Stack Overflow

Defining Javascript function with prototype property

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related