CODEWITHSUNDEEP
javascriptprototype
user8783104
user8783104

Reputation: 185

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

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');

Upvotes: 0

Views: 58

Answers (3)

N-ate
N-ate

Reputation: 6925

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);

Upvotes: 0

N-ate
N-ate

Reputation: 6925

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');

Upvotes: 0

JLRishe
JLRishe

Reputation: 101662

.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.

Upvotes: 1

Related Questions