JavaScript: Is prototype synonymous with Static?
I am teaching JavaScript myself coming from an OOP background. The book I'm studying in made me think, "Wow, properties are almost the same as static methods or variables!" If so, I would love to implement them more to save some memory, but before falling in love with them, I want to make sure I use them correctly.
This is true? Is my logic wrong? I am adding some code examples to use as context for my question. Hope this doesn't make it easier:
function person(first, age){
this.firstName = first;
this.age = age;
}
person.prototype.sayHello = function(){
return "hi my name is " + this.firstName + " and I am " + age + ".";
};
and hence the constructor function could be called like this:
var me = new person("Dan", 22);
Also, does this destroy encapsulation? The above example does not declare variables in the class, so they will be globally scoped. I understand that the prototype would not be able to see firstName
or age
if they were declared var firstName
and var age
.
Do I need to choose one or the other? Can I use my added prototypes and encapsulation?
Thanks in advance!
source to share
Is prototype synonymous with Static?
Not. Prototype properties are instance properties. If you attach a method to a function prototype, the instances created from that function will inherit from that prototype. This means that all instances created from this function will share one copy of this method in the prototype.
The "static" property in JavaScript is best represented by a property directly in the constructor function itself:
function Person() {}
Person.count = 0;
Here count
is a "static" property in the constructor. You can update this for example. inside the constructor with Person.count++
;
The above example does not declare variables in the class, so they will be globally scoped
You don't have variable declarations, these are just property assignments. Since the prototype method will be called in the context of an instance this
, it will refer to that instance, and therefore the prototype method has access to these instance properties.
The only thing that is "global" in your example is the constructor person
.
source to share
JavaScript
is not really an object oriented language, so you have no real encapsulation. You have closures
. Your methods can take advantage of closures and access a variable that is only defined in scope
your user function, so you can call them private
. However, you cannot access these variables from a method defined in prototype
, because it is no longer the same scope
.
Also, prototype is not synonymous with static, as described here .
The main prototype
point is that the objects and methods defined in the prototype provide the same instance of those objects and methods for every instance object
created with new
. This means that if a method or object is defined in prototype
rather than through the function scope, it will not have its own instance for every instance of the object created with new
, making it more efficient to create multiple elements.
source to share
Prototypes act similarly to static variables in the classical OOP model, but their purpose is fundamentally different.
The prototype object property is the only reference that will be used for all instances of the class, but can be overridden locally within the instance.
Javascript has no concept of encapsulation in the classical sense. If you want the concept of private variables that are not exposed but are available in internal methods, then you need to use closures.
You can achieve this kind of encapsulation without prototyping.
function Person(name, age) {
var person = {};
person.sayHello = function() {
return "hi my name is " + name + " and I am " + age + ".";
};
return person;
}
With prototypes, any properties that will be shared by different methods on an object will also be published publicly on instances of the object.
Some people like to follow the underscore example to denote variables that need to be private or protected
function Person(name, age) {
this._name = name;
this._age = age;
}
Person.protoype.sayHello = function() {
return "hi my name is " + name + " and I am " + age + ".";
};
source to share