Question

I am pretty new in JavaScript and I always used it in something like old procedural way.

Now I am studying how to JavaScript implement the object oriented paradigm and I have some doubt on this example finded on a tutorial.

I have an utility.js file that contain this simple code:

var steveApp = {};  // Object container

steveApp.person = 'Steve';  // Add a person field to the steveApp object

steveApp.logPerson = function() {
    console.log(steveApp.person);
}

So I have some doubt about how exaclty works it.

I think that first it define something like an empty object named steveApp by this line:

var steveApp = {};  // Object container

Then I think that the . it is used to add a field to the previous empty object, so I have:

steveApp.person = 'Steve';

that add a valorized person field to the steveApp object.

Finally it do a "strange" thing:

steveApp.logPerson = function() {
    console.log(steveApp.person);
}

it seems to me that add a new field (named logPerson) to the steveApp object but this field is not a normal field (an integer, a string or another object) but it is a function that perform a behvavior (write a log in the console).

Then, into another JavaScript, file it do:

steveApp.logPerson();

and the previous function is perfromed. So what it exactly means? It means that in JavaScript a function could be a field of an object or what?

Abd why to call this function (if it is true that it is a field) I have to do:

steveApp.logPerson();

and not call the field name ?:

steveApp.logPerson;

Tnx

Answer 1

Functions are first class objects in JavaScript. They can be treated just like any other kind of data.

You can store them in variables, store them in properties, pass them as function arguments, etc.

Abd why to call this function (if it is true that it is a field) I have to do:

steveApp.logPerson();

Putting (zero_or_more_aguments_here) after something that evaluates as a function is how you call a function. Leaving them off gives you the function itself, not the result of calling it.

Answer 2

steveApp.logPerson(); //calls the function

while

steveApp.logPerson; // returns the function itself (NOT the return value of the function

you can also print it in the console and you will see:

console.log(steveApp.logPerson())

vs

console.log(steveApp.logPerson);

greetings

Answer 3

The basics is that JavaScript is not strongly typed, so you could even assign different types to the same variables at different times:

var myVar = true;
myVar = 3.14;
myVar = "now a string";
alert("myVar is now a string with content: " + myVar);
myVar = function (someArg) {
    alert("myVar is now a reference to a function, passed argument " + someArg);
    return true;
}
myVar();

typeof myVar; // would return "function"
typeof myVar(); // would return "boolean"

As for your object "fields" (usually called properties), indeed they can receive any type that a normal variable would as well. Including a function, since they are "first-class citizen".

var myObject = {
    myBool: true,
    myNumber: 3.14,
    myMethod: function (myArg) {
        return myArg;
    },
    myNull: null
};

And like previously, you can even re-assign them later on…

Answer 4

Your assumptions are correct. But the difference between the below lines are

steveApp.logPerson();

Accessing logPerson property and invokes it as a function using ()

steveApp.logPerson;

It is just accessing the property logPerson, it returns the reference/value if it is used in RHS in an equation.

If you consider programming language like Scala, it is intelligent enough to infer whether it is a function call or not without using () but in JavaScript it is the reference, and if you try to invoke a normal property which is not a function. You will get an error saying logPerson is not a function.

Answer 5

As mentioned by Quentin & I quote:

Functions are first class objects in JavaScript. They can be treated just like any other kind of data.

You can store them in variables, store them in properties, pass them as function arguments, etc.

Another important thing to know is that objects in JS are passed around or called by reference. They are never copied.

var a = {};
var b = {};
a.test = "hello";
b.test   // returns undefined

Also

var a = {};
var b = a;
a.test = "hello"
b.test // return "hello"

And

var stooge = {first: "Jerome", second: "Howard"}
var x = stooge;
x.nickname = "curly";
var nick = stooge.nickname;
nick // returns "Curly"

How exactly works the JavaScript object? Can i declare a function as a field of a JavaScript object?

5 个答案: