Define native JavaScript functions

Question

How do you define JavaScript functions?

For example:

string.doSomething(); // OR
element.getSomeInfo();

I couldn't find anything on this, but maybe that's because it has a name I don't know.

EDIT

About four years later, let me rephrase this question to explain what I meant. I didn't know about objects, but essentially my question was "How do I define a function as a property of an object?". I wasn't necessarily differentiating between extending native Javascript classes (which is a bad idea) and just defining my own object with functions as properties.

So, to answer my own question, these are some different ways to do that:

const foo = {
    bar: x => 1 / x;
}

so that, for example, foo.bar(4) returns .25. Another one:

function Rocket(speed){
    this.speed = speed;
    this.launch = () => {
        this.speed = 'super fast and upwards';
    }
}

So now one could define const Apollo = new Rocket('standing still'); and call Apollo.launch();

We can additionally extend such classes (including native ones) by

Rocket.prototype.stop = function(){
    this.speed = 'Standing still';
}

and then call it using Apollo.stop();.

`string.doSomething = function () { ... }` Although this is surely a duplicate. — Patrik Oldsberg, Jul 15 '14 at 22:51
It's not clear what you're asking. Are you asking how to add methods native JS classes? — Evan Trimboli, Jul 15 '14 at 22:52
@PatrikOldsberg - OP is probably talking about modifying the String's prototype. — Derek 朕會功夫, Jul 15 '14 at 22:56
@Derek朕會功夫 I considered that, but `element.getSomeInfo()` didn't make sense to me in that context. — Patrik Oldsberg, Jul 15 '14 at 22:57
You may be looking to add methods to [*built–in objects*](http://ecma-international.org/ecma-262/5.1/#sec-4.3.7) (where built–in objects are a sub–set of native objects). That's generally not considered a good idea, however it can be appropriate if the pitfalls are understood and accounted for. — RobG, Jul 15 '14 at 23:31

score 2 · Accepted Answer · answered Jul 15 '14 at 22:52

2

function Person(name) {
    this.name = name;
}

Person.prototype.sayHi = function() {
    return "Hi, I'm " + this.name;
}

var p = new Person("Jack");

p.sayHi() === "Hi, I'm Jack"  // evaluates to true

Is this what you're looking for?

answered Jul 15 '14 at 22:52

Enzo

969
1
8
23

Yes! although I don't fully understand your function Person(name) { this.name = name }. What does this.name = name do? – vrugtehagel Jul 15 '14 at 23:04
@vrugtehagel `name` is an argument passed to the function `Person`. (Quick side note: In JavaScript, functions are first class; [this answer](http://stackoverflow.com/a/13267099/2476755) may help you understand.) However, we want the `Person` object (almost like a class) to have a `name` property. By using `this`, we assign the property `name` to `Person`. It would be the same as if `xName` had been passed to the function and the declaration was `this.name = xName;`. – royhowie Jul 15 '14 at 23:10
Posting code without an explanation is not very helpful. – RobG Jul 15 '14 at 23:26
@vrugtehagel This is kind of the idiomatic way in Javascript to create "Class", although this is not the kind of OOP you might be used to. You might want to study the "this" keyword first: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this – Enzo Jul 16 '14 at 04:33
@vrugtehagel then you might want to study the `new` keyword, basically it creates a new object with its `prototype` set to its constructor's prototype. Here `Person` is the constructor, and we defined `sayHi` on its prototype, so the `p` object inherits that method. Note that when we executed `sayHi` on `p`, the `this` keyword referred to `p` itself. You can find out more about `new` here: http://stackoverflow.com/questions/1646698/what-is-the-new-keyword-in-javascript – Enzo Jul 16 '14 at 04:37
and here also: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new In general, I find MDN to a really good reference for javascript – Enzo Jul 16 '14 at 04:38

score 1 · Answer 2 · answered Jul 15 '14 at 22:53

1

You can add a function as a member of an object.

For example:

var foo = {};

foo.sayHello = function () {
  alert('hello');
}

foo.sayHello();

answered Jul 15 '14 at 22:53

eyuelt

1,386
1
15
22

I mean more like, for example: string.getFirstLetter() where 'Hello world'.getFirstLetter() would return 'H' and 'Bye!'.getFirstLetter() would return 'B'. I know this example can be done easier by string[0] but it's to give you an idea of what I mean. – vrugtehagel Jul 15 '14 at 22:59
@vrugtehagel I see, so you want to know how to add methods to a class' prototype. – eyuelt Jul 15 '14 at 23:02

score 1 · Answer 3 · edited Nov 07 '18 at 07:00

1

Add to prototype of the built-in String object (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype)

String.prototype.doSomething = function(){
    console.log('bingo!');
}

var aaa = "testing123";

aaa.doSomething();

I am not sure what element you mean here though.

edited Nov 07 '18 at 07:00

Peter Mortensen

30,738
21
105
131

answered Jul 15 '14 at 22:54

Nik Terentyev

2,270
3
16
23

1

You should add some more detail on prototype (i.e., a link or something), as posting only code isn't considered a complete answer. – royhowie Jul 15 '14 at 23:01

Define native JavaScript functions

EDIT

3 Answers3