We Keep Coding

Can I edit a constructor function in javaScript to add properties?

I have this basic constructor function(with two inputs)
function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }
To create an object with the constructor function Person, I do
var person1 = new Person("John", "Doe");
the output is
if I want to add a new property to the object person1 (age, for example), I do
person1.age = 20;
and the output is
now, I want to create a new object with the same constructor function... let say person2. Because I know his age, I want to add this info to the object too. I do it like this
var person2 = new Person("Jennifer", "Unknown", 30);
the output is
the output comes without the age property, because the constructor function Person doesn't know it
To create the object person2 with those 3 inputs using Person, I must redefine Person (with those 3 inputs) and recreate person2, passing those 3 info's or add the extra info if object already exists ...
My question is:
How to proceed, if I want to add a third object with Person (person3), by passing 4 inputs (firstName, lastName, age, nationality)? I have to redefine Person (again) and then create person3? ... This seems tedious and not logic work! I confess I'am a newbie in jS!
is it there a way to edit a constructor function without redefining it every time I want to create a new object with extra properties? Can I add new property to a constructor functions without redefining it? And, if I want to edit a constructor function to add a method? for example:
status = function(){
alert(this.firstName + " " + this. lastName + " " + ", a person with" + " " + this. age + " " + "years old" + " " + "was found nearby doing jS stuff!" )}
summarizing... my goal is:
I start with start and want to end with end without redefining Person, just editing it.
My question make sense? I appreciate any tip.

Well, there's no such thing as "edit" a function, but you can reuse the old implementation to define your new function instead of rewriting it completely.
function Person(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
Person.prototype.speak = function () {
console.log('hey!')
}
p1 = new Person('first1', 'last1')
console.log('p1 firstName', p1.firstName)
p1.speak() // hey!
// store old prototype object
oldPrototype = Person.prototype
Person = function (firstName, lastName, age) {
// call the old constructor to initialize with existing properties
oldPrototype.constructor.call(this, firstName, lastName)
// assign new properties
this.age = age
// assign a new default property
this.otherProp = 'new prop'
}
// copy over the old prototype to the new Person
Person.prototype = oldPrototype
p2 = new Person('first2', 'last2', 10)
console.log('p2 firstName', p2.firstName)
console.log('p2 new properties', p2.age, p2.otherProp) // 10 and 'new prop'
p2.speak() // should work! because we already copied the old prototype object over
// it will not affect any of the old Person instances that were initialized before
console.log('p1 age', p1.age) // undefined
console.log('p1 otherProp', p1.otherProp) // undefined
While this is possible, don't overuse it!
Because it seems like an anti-pattern to override a constructor function.
You should better create a new constructor function by extending your Person instead.
Read more about Inheritance in JavaScript

Object creation and use of the prototype delegation

In the following example i have a simple Spy object. I wanted to create another object setting the prototype with the original object, so I've used Object.create().
Now I have a new object, which have just some properties from the original ('code' and 'breath' method). All the other properties (objects - 'name' and arrays - 'enemies') are in the _proto_ object, which i can use, because they are delegated to the original object. So far so good.
The tricky part is that if I change anything in the AnotherSpy included in the _proto_ object (the object name for example), those changes will be reflected in all the objects created from the original spy, including himself!
I also tried create a new object with using JSON.parse(), but in this way I have a new object which only have access to the 2 things that were previously in the _proto_ object - the array of enemies and the name object, without being able to use any methods of the original object (the 'breath' method).
let Spy = {
code: '007',
enemies: ['Dr.No'],
fullName: {
firstName: 'James',
lastName: 'Bond'
},
breath: function() {
console.log('im breathing..')
}
}
// original Spy breathing
Spy.breath(); // ok, he breaths
// create a new object with Object.create()
let OtherSpy = Object.create(Spy);
console.log(OtherSpy) // have direct access to properties 'code' and function 'breath' and all the others throught the __proto__ object
// Make OtherSpy breath
OtherSpy.breath(); // ok, he is breathing
// so far so good. Lets change the property and function on the OtherSpy
OtherSpy.code = '008';
OtherSpy.breath = () => {
console.log('im a new breathing')
};
OtherSpy.breath(); // ok, he's breathing differently
console.log(Spy.code); // 007 ok, original spy has the same code
Spy.breath() // ok, he stills breath in the same way.
// change the object 'name' of the OtherSpy
OtherSpy.fullName.firstName = 'Enemy';
// That change will reflect also on the original Spy...
console.log(Spy.fullName.firstName); // Enemy !!!!
// Trying in another way:
let NewSpy = JSON.parse(JSON.stringify(Spy));
console.log('NewSpy')
console.log(NewSpy) // now i dont have access to methods in the original object
NewSpy.breath() // Uncaught TypeError: NewSpy.breath is not a function
It seems that all properties included in the _proto_ object are shared in all objects that use that prototype chain.
Aside from this tricky parts that would greatly appreciate an explanation, I would like to know the proper way to create an object in JavaScript (without using ES6 classes) in order to get the advantage of the prototype delegation
and to be able to modify the properties and functions of the derived object without messing up with the original object nor any other derived objects.
Thanks in advance!

Nested properties are somewhat unuseful, so you may flatten it through using getters/setters:
const Spy = {
firstName: "Agent",
lastName: "Unnamed",
breath(){
console.log(`${this.fullName} is breathing`);
},
get fullName(){
return this.firstName + " " + this.lastName;
},
set fullName(name){
const [first, last] = name.split(" ");
this.firstName = first;
this.lastName = last;
}
};
const james = Object.create(Spy);
james.fullName = "James Bond";
james.breath();
console.log(james.fullName, james.firstName, james.lastName);

Another way would be to construct the name object inside of an constructor:
function Spy(name, code, enemies){
this.name = (([first, last]) => ({first, last}))(name.split(" "));
this.name.toString = () => name;
this.code = code;
this.enemies = enemies;
}
Spy.prototype = {
breath(){
console.log(`${this.name} is breathing`);
}
}
Usable as:
const james = new Spy("James Bond", "007", ["Dr. No"]);
james.breath();
console.log(james.name, "" + james.name);

value of parent object not changed from inheritance through prototype

Am new in javascript OOP, please bear with me
Changing the value of parent object from inherited object Student should change the age of the person but am getting exactly same value.
<script>
function Person(age){
this.age=age;
}
function Student(){}
var person=Student.prototype=new Person(10);
var oldAge=person.age;
Student.age=20;
var newAge=person.age;
alert("Person old age="+oldAge+"\New age="+newAge);
</script>
as person and Student inherited from same Person object then value of age of both sudent and person should change on changing the value from Student
I already went through Prototypical inheritance - writing up and JavaScript Inherited Properties Default Value questions
problem is i want to change the value of Person through Student which inherits the property of Person.
I think am missing something here please help me understand this.

There are two patterns which are used to implement inheritance in javascript
Prototype Object oriented pattern
Constructor Object oriented pattern
Now i will use the first method
Some prerequisite knowledge :
All the JS objects have a property that points to a prototype
object, thus apart from it's own properties, the object can also
access porperties of it's own prototype
__proto__ : It's a property which all objects have, this points to
the prototype of that object.
Object.create(arg) : It is used to create objects and initaliaze
their prototype OR set their __proto__ property.
Object.create MDN link
below snippet implements inheritance as well as allows you to modify the value of Person through Student.
:
function Person(age){
this.age=age;
this.getAge = function () { return this.age;}
};
function Student(){};
//Creating Person instance
var person = new Person(23);
console.log("Old Person age is " + person.age);
//Creating a student instance and inheriting it from person instance
//Object.create method creates a object whose __proto__ point to the object passed
//Thus student will be an object having a property __proto__ that would point to person instance
//This assosciation allows the instance of student to access insatnce of Person
var student = Object.create(person);
//Change age of person through student
student.__proto__.age = 24;
console.log("New Person age is " + person.age);
console.log("We can also call parent object methods from child" + " for e.g calling getAge from student" + student.getAge());
Now to achieve something similar using second method, following snippet can be used :
function Person(age){
this.age=age;
}
function Student(){}
//Create person instance
var person = new Person(23);
console.log("Old age of person is " + person.age);
//Inherit the person instance
Student.prototype = person;
//create a student object
var student = new Student();
//Change the person instance age value
//this change is possible because we
//can access person object through
//student.__proto__.
student.__proto__.age = 24;
console.log("New age of person is " + person.age);

The simplest way to explain this is that person.age is a property on an instance, where as Student.age is a static property that is not related to your instance.
You can simplify the whole example to remove student, and you'll still see you have something like an instance property and a static property.
function Person(age){
this.age = age;
}
var person = new Person(10);
var oldAge = person.age;
Person.age = 20;
var newAge = person.age;
alert("Person old age=" + oldAge + "\New age=" + newAge);
alert(Person.age);

In JavaScript, you should always use prototypal inheritance to make this work.
var person = {
age: 10
}
var student = Object.create(person);
var oldAge=person.age;
student.age=20;
var newAge=student.age;
alert("Person old age="+oldAge+"\New age="+newAge);
In your code, Since function Student doesn't have the property age in Creation phase, JavaScript engine will make a property called age in memory. In execution phase, JavaScript engine will assign 20 to the new property that was created in creation phase.
If you execute inside the browser, the you will notice function Student has a new property, called age, which is equal to 20.

difference between using this and prototype to define methods of a class in JavaScript? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Javascript - this Vs. prototype
Advantages of using prototype, vs defining methods straight in the constructor?
Prototype or inline, what is the difference?
When creating a class in JavaScript, how is declaring methods inside the object using this different then declaring it by accessing the prototype ? it seems to me to serve the same purpose.
window.onload = function() {
tc = new TestClass();
tc.init(); //logs initting
tc.reset(); //logs resetting
tc.doSomething(); //logs doing something
};
var TestClass = function(){
this.init = function(){
console.log("initting");
}
this.reset = function(){
console.log("resetting");
}
this.destroy = function(){
console.log("destroying");
}
}
TestClass.prototype.doSomething = function(){
console.log("doing something");
}

In most situations you will have the same functional result. But internally it's quite different in that when you attach the functions to this, then every instance of the type gets its own copy of the function. By attaching the functions to prototype, all instances share the same function instances. Using prototype reduces memory usage.

Before you read: English is not my mother language ;)
In practice both this and prototype is almost the same, but this and prototype has distinct meaning in javascript.
1) Javascript is based on prototype inheritance. What this mean is that one object can inherit the prototype model from another object. Using prototype you can emulate inheritance on javacript (with limitations), for example:
// create a 'class' Vehicle
var Vehicle = function() {};
Vehicle.prototype.wheels = 0;
Vehicle.prototype.maxSpeed = 0;
Vehicle.prototype.displayInfo = function() {
alert("hello, I have " + this.wheels + " wheels and max speed of " + this.maxSpeed);
};
var vehicleInstance = new Vehicle();
vehicleInstance.displayInfo(); // displays: Hello, I have 0 wheels and max speed of 0
// create a 'class' Car using the prototype from Vehicle
// and change some properties.
var Car = function(maxSpeed) {
if(maxSpeed)
this.maxSpeed = maxSpeed;
};
// inherit the prototype from vehicle
Car.prototype = new Vehicle();
// change some properties
Car.prototype.maxSpeed = 200;
Car.prototype.wheels = 4;
var car = new Car();
car.displayInfo(); // displays: Hello, I have 4 wheels and max speed of 200
2) Properties in this has precedence over properties in prototype, for example:
var car = new Car(); // car prototype: maxSpeed = 200;
car.displayInfo() // displays: Hello, I have 4 wheels and max speed of 200
//set maxSpeed to 300 on 'this'
var car = new Car(300); // see Car definition above
// call displayInfo() in car instance. The Car 'class' doesn't have displayInfo()
// itself, but its prototype has. The javascript VM will look
// for displayInfo() in the car instance, if it not found in the
// instance it will look in car.prototype and on car.prototype.prototype etc.
// until it founds a property called displayInfo()
// or reaches the end of the chain (Object.prototype).
car.displayInfo() // displays: Hello, I have 4 wheels and max speed of 300
This also applies for the prototype of the prototype, for example.
var Class1 = function() { };
Class1.prototype.someValue = 1;
var Class2 = function() { };
Class2.prototype = new Class1();
Class2.prototype.someValue = 2; // this overrides the Class1.prototype.someValue prototype
var class2 = new Class2();
class2.someValue = 3; // this overrides the Class2.prototype.someValue;
3) Properties defined on prototype are not instantiated for every new instance of the same object, for example:
// create a new class and inherit the prototype model from Vehicle.
var Motorcycle = function() { };
Motorcycle.prototype = new Vehicle();
// motorcycles has 2 wheels
Motorcycle.prototype.wheels = 2;
var motorcycle = new Motorcycle();
motorcycle.dysplayInfo(); // displays: Hello, I have 2 wheels and max speed of 200
//now, if I change the method dysplayInfo from Vehicle, it will change for every
//object that inherits Vehicle prototype:
Vehicle.prototype.displayInfo = function() {
Alert("Wheels: " + this.wheels + ", Max speed: " + this.maxSpeed);
}
//observe that I didn't create another Motorcycle instance ,
//I'm using the same instance that I've created before change
//the Vehicle.dysplayInfo() method
motorcycle.displayInfo() // displays: Wheels: 2, Max speed: 200
As you can see, the same method used in Vehicle is used by any object that inherits his prototype. This make your code much more efficient, since you're using the same function for more than one object. You can have thousands of objects inheriting from a fat prototype and still get a low memory footprint.
In short:
By using prototype you are able to create powerful 'classes like' objects, with a well defined inheritance tree (we say prototype chain) which will run more efficiently and will use less memory.
What I have said here does not exhaust the subject of prototype inheritance/chain. Here are other resources you can read. I recommend since understand prototypes in javascript is essencial to write good and maintainable code.
What I have said here does not exhaust the subject of prototypes:
https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript?redirectlocale=en-US&redirectslug=Introduction_to_Object-Oriented_JavaScript
http://javascript.crockford.com/prototypal.html
http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/

They have the same effect in that particular case, but they're very different. One (the?) major difference is that methods attached using this are properties of the object itself and not of its prototype, so iterating the object like so:
for(var x in tc) {
if(tc.hasOwnProperty(x)) {
console.log('Has property ' + x);
}
}
will omit methods added using prototype. Another difference is the references; assigning the methods to this will create new function objects each time, but using the prototype, they're all the same function. (This may or may not be what you want, and it matters most when attaching extra properties to the methods.)

In Javascript, the difference between 'Object.create' and 'new'

I think the difference has clicked in my head, but I'd just like to be sure.
On the Douglas Crockford page Prototypal Inheritance in JavaScript, he says
In a prototypal system, objects inherit from objects. JavaScript,
however, lacks an operator that performs that operation. Instead it
has a new operator, such that new f() produces a new object that
inherits from f.prototype.
I didn't really understand what he was trying to say in that sentence so I performed some tests. It seems to me that the key difference is that if I create an object based on another object in a pure prototypal system, then all the parent parent members should be on the prototype of the new object, not on the new object itself.
Here's the test:
var Person = function(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.toString = function(){return this.name + ', ' + this.age};
// The old way...
var jim = new Person("Jim",13);
for (n in jim) {
if (jim.hasOwnProperty(n)) {
console.log(n);
}
}
// This will output 'name' and 'age'.
// The pure way...
var tim = Object.create(new Person("Tim",14));
for (n in tim) {
if (tim.hasOwnProperty(n)) {
console.log(n);
}
}
// This will output nothing because all the members belong to the prototype.
// If I remove the hasOwnProperty check then 'name' and 'age' will be output.
Is my understanding correct that the difference only becomes apparent when testing for members on the object itself?

Your assumptions are correct, but there is another pattern that Douglas doesn't talk much about - the prototype can be used for properties as well. Your person class could have been written as:
var Person = function(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.name = null; //default value if you don't init in ctor
Person.prototype.age = null;
Person.prototype.gender = "male";
Person.prototype.toString = function(){return this.name + ', ' + this.age;};
In this case, iterating over properties of an instance of this class, as you do in your example, would generate no output for the 'gender' property.
EDIT 1:
The assignment of name and age in the constructor do make the properties visible by hasOwnProperty (thanks #matt for reminding me of this). The unassigned gender property would not be visible until someone sets it on the instance.
EDIT 2:
To further add to this, I present an alternative inheritance pattern - one that I have personally used for very large projects:
var inherits = function(childCtor, parentCtor) {
function tempCtor() {};
tempCtor.prototype = parentCtor.prototype;
childCtor.superclass = parentCtor.prototype;
childCtor.prototype = new tempCtor();
childCtor.prototype.constructor = childCtor;
};
var Person = function(name){
this.name = name;
}
Person.prototype.name = "";
Person.prototype.toString = function(){
return "My name is " + this.name;
}
var OldPerson = function(name, age){
OldPerson.superclass.constructor.call(this);
this.age = age
};
inherits(OldPerson, Person);
OldPerson.prototype.age = 0;
OldPerson.prototype.toString = function(){
var oldString = OldPerson.superclass.toString.call(this);
return oldString + " and my age is " + this.age;
}
This is a fairly common pattern with a small twist - the parent class is attached to the child via the "superclass" property permitting you to access methods/properties overridden by the child. Technically, you could replace OldPerson.superclass with Person, however that is not ideal. If you ever changed OldPerson to inherit from a class other than Person, you would have to update all references to Person as well.
EDIT 3:
Just to bring this full circle, here is a version of the "inherits" function which takes advantage of Object.create and functions exactly the same as I previously described:
var inherits = function(childCtor, parentCtor) {
childCtor.prototype = Object.create(parentCtor.prototype);
childCtor.superclass = parentCtor.prototype;
};

EDIT: This answer was originally a response to #jordancpaul's answer, which he has since corrected. I will leave the portion of my answer that helps explain the important difference between prototype properties and instance properties:
In some cases, properties are shared between all instances and you need to be very careful whenever you're declaring properties on the prototype. Consider this example:
Person.prototype.favoriteColors = []; //Do not do this!
Now, if you create a new Person instance using either Object.create or new, it doesn't work as you might expect...
var jim = new Person("Jim",13);
jim.favoriteColors.push('red');
var tim = new Person("Tim",14);
tim.favoriteColors.push('blue');
console.log(tim.favoriteColors); //outputs an array containing red AND blue!
This doesn't mean you can't ever declare properties on the prototype, but if you do, you and every developer who works on your code needs to be aware of this pitfall. In a case like this, if you prefer declaring properties on the prototype for whatever reason, you could do:
Person.prototype.favoriteColors = null
And initialize it to an empty array in the constructor:
var Person = function(name, age) {
...
this.favoriteColors = [];
}
The general rule when using this method is that default values for simple literal properties (strings, numbers, booleans) can be set on the prototype directly, but any property that inherits from Object (including arrays and dates) should be set to null and then initialized in the constructor.
The safer way is to only declare methods on the prototype, and always declare properties in the constructor.
Anyway, the question was about Object.create...
The first argument passed to Object.create is set as the prototype of the new instance. A better usage would be:
var person = {
initialize: function(name, age) {
this.name = name;
this.age = age;
return this;
},
toString: function() {
return this.name + ', ' + this.age;
}
};
var tim = Object.create(person).initialize("Tim",14);
Now the output will be the same as in your first example.
As you can see, it's a different philosophical approach from the more classical style of OOP in Javascript. With Object.create, the emphasis is on creating new objects from existing objects, rather than on the constructor. Initialization then becomes a separate step.
Personally I have mixed feelings about the Object.create approach; it's very nice for inheritance because of the second parameter that you can use to add additional properties to an existing prototype, but it also is more verbose and makes it so instanceof checks no longer work (the alternative in this example would be to check person.isPrototypeOf(tim)).
The main reason I say Object.create is verbose is because of the second parameter, but there are some useful libraries out there that address that:
https://github.com/Gozala/selfish
https://github.com/Raynos/pd
(and others)
I hope that was more enlightening than confusing!