javascript functions and properties [duplicate] - javascript

Let us say we have a function.
function Rabbit(){
console.log("shiv");
}
Now without creating an object of this function i can assign the property of this object
Rabbit.bark = function(line) {
console.log("name is", line);
};
What does this mean. do this add a variable bark to function. or does this add a property to Rabbit object, even if I am not creating an object using the new operator.

Function in JavaScript is just an object, it is called Function object.
And just like any other types of object, it has its own constructor (new Function(...)), methods (apply, bind, call...) and properties (arguments, caller, name...) . See the document.
You might be familiar with creating a function like this:
function Rabbit() {
console.log('shiv');
}
Then you should know that you can also create a function like this:
var Rabbit = new Function('console.log("shiv")');
Now, you might guess it out. If you add a new property to a Function object, as long as you don't overwrite the existing one, the function is still working just fine.
do this add a variable bark to function
No, the function has it own closure, the only way to add variable to the function is to bind it to this object using Rabbit.bind(object)
do this added a property to Rabbit object
Well, since the "Rabbit object" is just an object, Yes.

what does this mean. do this add a variable bark to function. or do
this added a property to Rabbit object
do this add a variable bark to function - No
or do this added a property to Rabbit object - Yes
bark is a property of object of type Function
even if i am not creating an object using new operator
Rabit is already an object (of type Function). You are not creating an instance of this object, just that you are adding a property to it.

Related

Why is it possible to add a property to a function? [duplicate]

Let us say we have a function.
function Rabbit(){
console.log("shiv");
}
Now without creating an object of this function i can assign the property of this object
Rabbit.bark = function(line) {
console.log("name is", line);
};
What does this mean. do this add a variable bark to function. or does this add a property to Rabbit object, even if I am not creating an object using the new operator.
Function in JavaScript is just an object, it is called Function object.
And just like any other types of object, it has its own constructor (new Function(...)), methods (apply, bind, call...) and properties (arguments, caller, name...) . See the document.
You might be familiar with creating a function like this:
function Rabbit() {
console.log('shiv');
}
Then you should know that you can also create a function like this:
var Rabbit = new Function('console.log("shiv")');
Now, you might guess it out. If you add a new property to a Function object, as long as you don't overwrite the existing one, the function is still working just fine.
do this add a variable bark to function
No, the function has it own closure, the only way to add variable to the function is to bind it to this object using Rabbit.bind(object)
do this added a property to Rabbit object
Well, since the "Rabbit object" is just an object, Yes.
what does this mean. do this add a variable bark to function. or do
this added a property to Rabbit object
do this add a variable bark to function - No
or do this added a property to Rabbit object - Yes
bark is a property of object of type Function
even if i am not creating an object using new operator
Rabit is already an object (of type Function). You are not creating an instance of this object, just that you are adding a property to it.

How is the prototype of a function created?

function Circle(radius) {
this.radius = radius;
}
I am trying to understand Objects and prototypes by playing with console. When i tried "Circle", it gave the function. But when i tried Circle.prototype it gave an object. How did Circle got prototype property. it has Constructor and prototype of Object in it. Can some one explain this heirarchy
When you create new function, JS will create new function object with the properties name, length and prototype. The name is the function name, the length is the number of arguments, and the prototype is a reference to a new object that JS create with a constructor property that is reference to the first function object. So when you create a function, you actually create 2 new objects, the function object and the prototype object.
For more information, please see this 30 minutes lecture:
http://www.objectplayground.com/
If you want just the function section, go to minute 16:40.
I think the misunderstanding arises when you read that someone write "every object has a prototype property".
Functions In Javascript are objects. Like every objects, functions have some properties and methods and some of them are defined by default: the length property, the prototype property, the call() apply() and bind() methods and so on. So, a function has a prototype property, by default
function myfunc(){
return "yes I'm a function";
}
//I said that function are objects having properties and methods
//this means you can call them, for example
myfunc.prototype
and you will see that the value you have in return from calling this property is an object. Ok, stop here about functions for now.
Now, you can use any function as a constructor, so you can create a new object calling the function together with the new keyword
var myobj = new myfunc()
and you will have a new object. This object has not a prototype property by default
myobj.proptotype //=> unefined
we can't speak of a prototype property for an object: functions have a prototype property, objects don't.
But, each object it's associated with a prototype object from which properties and methods are inherited. Do you want to see what's the value of the prototype object? One of the solutions is
myobj.__proto__
and you will see the value of the prototype object of your custom object.
Now, take a look at the value of myobj.__proto__ and the value of myfunc.prototype: they are the same. This simply means that the prototype property of the constructor (in other words, the prototype property of the function you use with the new keyword in order to create a new object) is used as the prototype of the new object.
Keep that in mind.
Functions are objects, so functions have properties and methods by default.
Functions have a prototype property.
You use functions as constructors, to create new object.
Objects have not a prototype property.
Objects have a prototype object.
The prototype object value it's the same as the prototype property of the constructor.
To use your code to create a circle, you would use new Circle(10);, or if you want to use that circle later, var circ = new Circle(10);. That will create a new circle object for you to use as you wish.
Circle is a function, another kind of variable or object. You set Circle, and now when you type Circle, it will return the function itself. Not a new circle. Every single function has a few properties, and prototype is one of them.
The prototype object is a part of every function, used for working with classes. You can read about it here.
In Javascript, a function is an object. Every object has a "secret" prototype property attached to it.
In your case Circle's prototype is the Function's prototype because Circle is a function.
The root object that every object derives from is the Object object so if you can walk up the prototype chain until you reach the Object object.
If you intend to use Cirle as a constructor and call it with new, this means that you will create other objects that are going to be instances of Circle and their prototype will point to Circle.prototype.
For more detailed explanation on how prototypes work, there are very good resources online.
For example you can read this: http://eloquentjavascript.net/ the chapter about Data structures: Objects and Arrays.
You can check the prototype of Circle by doing Object.getPrototypeOf(Circle) to confirm that this will be the Function prototype.

JavaScript: Setting variable to new function on created object, it still calls old function

I've got a "class" that looks like this:
export function IBXMReplay() {
var onRow = function(){console.log("not right")};
....
}
Later on, it's called in a function like this:
var seqRow = function() {
onRow();
....
}
This function is essentially called by callbacks for web audio getAudio. I construct the object like this:
var replay = new IBXMReplay();
replay.onRow = function(){console.log("Right")};
However, when onRow() is called, it always prints "not right."
What am I doing wrong??? I tried creating a setter function but that didn't work either.
The problem is that the onRow function is being defined as a variable in the IBXMReplay local scope, and i'm assuming that the seqRow function is also inside IBXMReplay. Local-scope variables cannot be directly accessed nor modified from the outside.
For this to work, you'd need to make the onRow function a property of the IBXMReplay object (in JS functions are objects too):
export function IBXMReplay() {
this.onRow = function(){console.log("not right")};
....
}
Or better yet, store it in the prototype:
var IBXMReplay = function IBXMReplay() {
....
}
IBXMReplay.prototype.onRow = function(){console.log("not right")};
export IBXMReplay
Either way, you can later do:
var replay = new IBXMReplay();
replay.onRow = function(){console.log("Right")};
It should work as you expected.
Now, some explanation about that. Let's say you have 100 instances of the IBXMReplay 'class'. The differences between storing it as an object property vs. a prototype property are subtle but important:
Object property
Storing the method like this.onRow will mean there'll be 100 copies of it in memory. If you later edit it with replay.onRow = something, it'll be completely replaced for that particular instance.
Doing something like delete replay.onRow would not bring the original function back and will instead throw an 'undefined is not a function' error when executing that instance..
Prototype property
Storing the function in the object's prototype instead will mean there'll only be a single copy of onRow being referenced by all instances. When editing the instance with replay.onRow = something, the underlying prototype onRow is merely being shadowed by an object property with the same name, so any calls inside the IBXMReplay class will reference the overriding function instead.
Deleting the instance property delete replay.onRow will 'uncover' the original function.
This is how JavaScript works, and is called the prototype chain. Whenever you do foo.bar, a bar property is searched directly in the foo object, but if not found then it's searched in foo's prototype, and then the prototype's prototype, and so on, until reaching null, which has no prototype.

javascript adding property to function

Let us say we have a function.
function Rabbit(){
console.log("shiv");
}
Now without creating an object of this function i can assign the property of this object
Rabbit.bark = function(line) {
console.log("name is", line);
};
What does this mean. do this add a variable bark to function. or does this add a property to Rabbit object, even if I am not creating an object using the new operator.
Function in JavaScript is just an object, it is called Function object.
And just like any other types of object, it has its own constructor (new Function(...)), methods (apply, bind, call...) and properties (arguments, caller, name...) . See the document.
You might be familiar with creating a function like this:
function Rabbit() {
console.log('shiv');
}
Then you should know that you can also create a function like this:
var Rabbit = new Function('console.log("shiv")');
Now, you might guess it out. If you add a new property to a Function object, as long as you don't overwrite the existing one, the function is still working just fine.
do this add a variable bark to function
No, the function has it own closure, the only way to add variable to the function is to bind it to this object using Rabbit.bind(object)
do this added a property to Rabbit object
Well, since the "Rabbit object" is just an object, Yes.
what does this mean. do this add a variable bark to function. or do
this added a property to Rabbit object
do this add a variable bark to function - No
or do this added a property to Rabbit object - Yes
bark is a property of object of type Function
even if i am not creating an object using new operator
Rabit is already an object (of type Function). You are not creating an instance of this object, just that you are adding a property to it.

Relationship of Function object and Javascript object

Recently I read a tutorial which says if define the function like below.
function Animal() { }
On the surface, this code seems to create a function called Animal.
But with JavaScript, the full truth is slightly more complicated. What
actually happens when this code executes is that two objects are
created. The first object, called Animal, is the constructor function
itself. The second object, called Animal.prototype, has a property
called Animal.prototype.constructor, which points to Animal. Animal
has a property which points back to its prototype, Animal.prototype.
But I have little confuse about it .What about the Function object ?What is the use for the Animal object?
And If I write code like below .
var test= new Function();
and I inspected the variable test in the Developer tool of the Chrome.
I found test is nothing to do with the Function. Can someone tell me why ? thanks.
Updated
The diagram below is the objects relationship when the code is executed, please review it.
If my understanding is wrong. please correct me. thanks.
That blog post goes into a lot of detail that's interesting but unnecessarily confusing for most people most of the time.
First, let's talk about functions; forget about prototypes for a minute. When you create a function:
function Whatever() {
// ...
}
you've created an object. That is, all functions are objects, and they're constructed via the Function built-in constructor. The symbol "Whatever" in this example will have as its value a reference to that object.
Given a reference to a function, it's possible to call it:
Whatever(); // call the function
It's possible to take that value (the reference to the function object) and assign it to another variable, or pass it as a parameter to another function, or to use it just like any other value in JavaScript.
var another = Whatever;
another(); // also calls the "Whatever" function
Constructing a function via the Function constructor explicitly is something that's rarely done, but it gives you a function that's otherwise unremarkable. (In the OP, the constructed function doesn't do anything because no code was passed to the Function constructor.)
Now, things get interesting when a function is invoked as part of a new expression.
var test = new Whatever();
By using new, a new object is instantiated and associated with the "Whatever" function. The "Whatever" function is the constructor for that new object.
Every function object, whether it's ever used as a constructor or not, has an associated "prototype" object. When a function is used as a constructor, then objects it constructs (that is, objects made in new expressions that invoke the function) are implicitly associated with that prototype object.
The prototype object becomes interesting when an object property reference expression is evaluated. Object property references look like this:
obj.name
obj[ nameExpression ]
In such an expression, the property name (either the identifier used in the . expression or the value of the expression inside [ ]) is checked against the set of properties on the object directly. If the name is not the same as one of the object's properties, then the runtime consults the prototype object associated with the constructor function used to make the object.
For most code that most people write, that relationship and some of its direct implications are the only things to worry about. You don't have to fool around with the (non-standard, at this time) "proto" property of objects unless you're putting together some sort of library or framework.
Finally, it might be instructive to look at the Object.create() function and in particular the "polyfill" shown in that documentation.

Categories