How to create a 'dot function'? (js objects?)

Question

Document.prototype.greenify = function(){
    return {
        style : function(){
            return this.color = "green";
        }
    }
};
document.getElementsByTagName("H1")[0].greenify();

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>TEST</h1>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

Hey out there,

I wanna build a 'dot function'. My function for trial should 'greenify' my element. I already tried to add the function to Window- object but I came to the same result. So, now my question... What I did wrong or did I forget something? I'm thankfully for each answer I receive :)

By "dot function" do you mean a method? You need to add it to the prototype of the objects you'll be invoking it on, but adding to someone else's prototype (even the browser's) is a Bad Idea. — ssube
– ssube, Commented Mar 12, 2015 at 15:27
... please don't do this. Add a function greenify(), which accepts a HTML element, and do that instead. — Matt
– Matt, Commented Mar 12, 2015 at 15:27
Despite this can be done, I totally agree with Matt. Of course it's matter of opinions, but take a look at this article: perfectionkills.com/whats-wrong-with-extending-the-dom .. I would rather recommend you to make your own little "object" to deal with such things instead. — briosheje
– briosheje, Commented Mar 12, 2015 at 15:29
@briosheje It's not a matter of opinion, it's actually dangerous on the grounds that a variable or library can be set up with a no-collision option, but that's not practical if you are extending someone's prototype. Depending on the implementation, you may also run into unusual prototypes around native objects. — ssube
– ssube, Commented Mar 12, 2015 at 15:30

Oriol · Accepted Answer · 2015-03-12 15:26:52Z

5

h1 elements don't inherit from Document.prototype. They inherit from those:

HTMLHeadingElement.prototype
HTMLElement.prototype
Element.prototype
Node.prototype
EventTarget.prototype
Object.prototype

For example, you can add the method to HTMLElement.prototype:

HTMLElement.prototype.greenify = function(){
    this.style.color = "green";
};
document.getElementsByTagName("H1")[0].greenify();

HTMLElement.prototype.greenify = function(){
    this.style.color = "green";
};
document.getElementsByTagName("H1")[0].greenify();

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>TEST</h1>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

However, note that modifying objects you don't own is considered a bad practice.

answered Mar 12, 2015 at 15:26

Oriol

291k71 gold badges459 silver badges535 bronze badges

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

2 Comments

ssube Over a year ago

Note that adding to a prototype not under your control, especially a native one, is bad practice and may cause collisions with other libraries. You should avoid it whenever possible. This answer is correct, however, so no dv.

myolli4 Over a year ago

Thank you very much I already tried it from the beginning of the week. :)

Collectives™ on Stack Overflow

How to create a 'dot function'? (js objects?)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related