javascript - what is the effect of applying prototype to functions that are not constructors?

Question

So, I know how to apply the prototype property to modify constructors that will effectively affect instances. Theoretically, the prototype should work on a normal function as well (though not necessarily have an effect if it's not a prototype of a certain instance). So I tried the code (createNewFunction is a normal function that's not a constructor)(full code is at the end)

createNewPerson.prototype.xx = (function() { //alerts hello
            alert("hello");
        })();

I'm wondering what this actually does as to how xx is appended to the function. Is it stored as variable xx that is equal to the anon function? Or is stored as this.xx = function? How will this compare to storing the following code:

createNewPerson.xx = (function() { //alerts hello
        alert("hello");
    })();

This also makes me wonder as to how this this line will be stored(As in if it will be stored as var mm = 3, or it won't append at all?):

createNewPerson.mm = 3;

Full code for reference:

function createNewPerson(name) {
  var obj = {};
  obj.name = name;
  obj.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
  return obj;
}

createNewPerson.mm = 3; //does nothing when i tested it     

createNewPerson.xx = (function() { //alerts hello
  alert("hello");
})();
createNewPerson.prototype.xx = (function() { //alerts hello
  alert("hello");
})();
var salva = createNewPerson('Salva');

You're not assigning any functions here at all. You are assigning the [return values of IIFEs](https://stackoverflow.com/questions/26092101/what-is-this-javascript-pattern-called-and-why-is-it-used)! — Bergi, Nov 13 '17 at 19:00

JLRishe · Answer 1 · 2017-11-13T18:44:48.467

1

.prototype is just an object property like any other. Functions have one by default, and when you create objects in certain ways (e.g. by using a constructor), that .prototype property can be indirectly accessed in special ways. But there's nothing magical about the property itself or assigning things to it.

createNewPerson.prototype.xx = (function() { //alerts hello
    alert("hello");
})();

This alerts "hello" and assigns the value undefined to the .prototype property's .xx property.

Is it stored as variable xx that is equal to the anon function?

It's stored as a property xx that is equal to undefined.

createNewPerson.xx = (function() { //alerts hello
    alert("hello");
})();

This alerts "hello" and assigns the value undefined to the .xx property of the function itself.

This also makes me wonder as to how this this line will be stored(As in if it will be stored as var mm = 3, or it won't append at all?):

createNewPerson.mm = 3;

I don't really understand what you said there, but all this does is assign the value 3 to an .mm property on the function itself.

edited Nov 13 '17 at 18:44

answered Nov 13 '17 at 18:37

JLRishe

99,490
19
131
169

when you say stored as property do you mean var x = literal or {"x": value} – user8783104 Nov 13 '17 at 19:15
@user8783104 I mean the latter. – JLRishe Nov 13 '17 at 19:20
also why is it undefined? – user8783104 Nov 13 '17 at 19:35
An IIFE `(function() { ... })()` immediately calls the enclosed function and evaluates to the returned value of that function. Neither of those functions `return`s anything, so the evaluated value is `undefined` (the result of any function that returns nothing). – JLRishe Nov 13 '17 at 19:37

N-ate · Answer 2 · 2017-11-13T20:15:17.440

Functions are objects and can have properties.

function createNewPerson(name) {
  var obj = {};
  obj.name = name;
  obj.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
  return obj;
}

createNewPerson.mm = 3; //assigns 3 to createNewPerson property mm

createNewPerson.xx = (function() { //assigns result of anonymous function to property xx
  alert("hello");
})();
createNewPerson.prototype.xx = (function() { //assigns result of function to xx
  alert("hello");
})();
var salva = createNewPerson('Salva');//creates new generic object


alert(// these are values of the function, not the object salva
    'mm: ' + createNewPerson.mm +
    '\nxx: ' + createNewPerson.xx
);

//To add a function to a function:

createNewPerson.foo = function(){
    alert('I\'m just a function hanging off another function. I know nothing about the function I hang on.');
};
alert('the above code didn\'t alert, but we can alert it now');
createNewPerson.foo();

Attaching new members to a function does not give them special access to the function.

UPDATE: because when you call createNewPerson('Salva'); the context is "window", the only way to get at mm is by referencing createNewPerson.mm;

If you're looking for something shorter like "this.mm", you can update your code to bind the context. I've added updated code to reflect this.

var createNewPerson = (function (name) {
  alert(this.prior);
  alert(this.after);
  var obj = { name: name };
  return obj;
});


createNewPerson.prior = 'prior to binding';

createNewPerson=createNewPerson.bind(createNewPerson); //this makes the createNewPerson its own context when it is called.

createNewPerson.after = 'after to binding';//property is hung from the function instance created with "bind"
var person = createNewPerson('salva');

thanks! When createNewPerson.mm = 3; is created, will the function look like function { mm = 3..} or function { 'mm': 3, }. — user8783104, Nov 13 '17 at 19:37
@user8783104 Neither of those is valid JavaScript syntax, so...neither? — JLRishe, Nov 13 '17 at 19:46
then what is the equivalent of defining a property within a function? in this case createNewPerson.mm = 3. — user8783104, Nov 13 '17 at 19:55
I've updated my solution to show how you can add properties to the context prior to binding. Maybe you can tell me what syntax your trying to achieve and I can provide a way to implement it. — N-ate, Nov 13 '17 at 20:17
I'm trying to understand why a function cannot have syntax {property: value}, while an object assigned to a variable can, and vice versa — user8783104, Nov 14 '17 at 16:48
Functions are objects. We've actually demonstrated functions having properties above. — N-ate, Nov 14 '17 at 18:02

score 0 · Answer 3 · answered Nov 14 '17 at 18:08

It seems like you may be looking for js constructor syntax; not just property assignment to a function.

//function with a property
function foo(){

}
foo.prop = true;
alert(foo.prop);


//maybe you want a constructor?
function constructor(id) {
    this.id = id;
}
var thing = new constructor(32);
alert(thing.id);

javascript - what is the effect of applying prototype to functions that are not constructors?

3 Answers3