Function Constructors, "new" operator and setting Prototypes

Javascript Programming
#1

Thanks for you help on this one.

See reply on bottom. It works now for the function constructor and now I can add as many names as I want just using the “new” operator and they will all share the same prototypes.

<DOC Type html>
<html>
    
<head>

<title>Function Constructors, "new" and Setting New Prototypes </title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    
<script src = "https://code.jquery.com/jquery-latest.min.js"></script>
    
</head>
    

<body>
 
<script>

//Hello Everyone lets do some Javascript
    console.log("Hello World");
    
//Copy and paste this post to find out how to build Objects using function contructors and the 'new' property
 
    
//Building Objects , Function Constructiors, 'new' and how to Set New Prototypes.
    
//A function constructor is a normal function that is used to construct objects.  Lets take a look at these examples.
    
function Person(firstname,lastname){
    console.log(this);
    this.firstname = firstname;
    this.lastname = lastname;
    console.log('This function is invoked');
    
    return{greeting:  'I got in the way'}
    
}
//I can now create/construct a new Object using the "new" operator.  So I can create these OBjects on the fly and they will have the same prototypes as the original Object used to create it except it will first create an empty Object
    
    
var mike = new Person();   
    console.log(mike);     //firstname and lastname undefined but same prototypes as original for both new Persons
    
var sarah = new Person();
    console.log(sarah);
    
// Next we will construct the new object we can also change the parameters of the function on the fly like firstname and lastname can be changed to the real first and lastnames for every Object / new Persons that you create.
    
var john = new Person('John', 'Doe');  //names defined
console.log(john);
    
var jane = new Person('Jane' , 'Doe');  //names defined
console.log(jane);

// Next we will do the same thing as before except this time when we can also add some more prototypes to the object on the fly and they will become prototypes of the new Object as will. 
    
 function Persons(firstname,lastname){
    console.log(this);
    this.firstname = firstname;
    this.lastname = lastname;
    console.log('This function is invoked now');  
}
    
Persons.prototype.getFullName = function(){
    return this.firstname + "  " + this.lastname;  
    
};//new prototype added on the fly to all others
var johnny = new Persons('John', 'Lewis');
console.log(johnny);
    
var janet = new Persons('Janet', 'Jackson');
console.log(janet);
    
Persons.prototype.getFormalName = function(){
    return this.lastname + "  " + this.firstname;
}  //new prototype added on the fly to all others
 
console.log(janet.getFormalName());

console.log(johnny.getFullName());

console.log(Persons.prototype);  //list Object and all prototypes
    
//The 'this' variable points to a new empty Object { }, and that object is returned from the function automatically. The 'new' operation creates or constructs the new Object with all the prototypes of the original Object.  This is how do you set the protoype when constructing a new Object?  Javascript does this automatically. But you can also all prototypes to newly created objects or to the originall Object that it was created from.  This is powerful because that means that I can also add prototypes to existing default Objects like numbers and strings and booleans and arrays.  This is how JQuery is developed and other JS libraries.
    
    

    
//Built-in Function Constructors in Javascript
    
// There are many built-in function constructors in Java script for instance new Number creates an Object that holds a primitive value but the Number is an Object and it has several prototypes that are associated with it.  Play with this int he console.
    
var a = new Number(3); // construct Object primitive value(3)
    
console.log(a);   //will print Object with primitive value
    
Number.prototype;   //All the Number prototypes
    
 a.toFixed(3);     // 3.000
    
var b = new Date("1/3/1959");

    console.log(b);
    
    b.prototype;  //Date prototypes
    
    var c = new String("John"); //Creates Object String
    
    c.prototype  //will list prototypes of String
    
    console.log(c);
    
   console.log(c.length);
    
//So what you thing are primitive value are actually Object that contain primitive values.  And because they are Objects they have prototypes and methods.
    

  
</script>
   


</body>
</html>
#2

Looks to me like your Persons function does not have contain the input parameters first name and lastname.

It should be

function Persons(firstname, last name) {

all the other stuff

}
#3

Well if you ignore the autocorrect, lastname!

#4

You are correct!!!

And also when I add the parameters then they are not stings when I define this.firstname = firstname and this.lastname = lastname. And then it works!!! Let me fix it and repost the correct code.

1 Like
#5

This Review is so important and so powerful. Function Constructors , “this”, “new”, and creating prototypes. Everything is really an object in Java Script. Even primitives are objects that hold primitive values. Here is my review and it give a better understanding the second time around.

<DOC Type html>
<html>
    
<head>

<title>Function Constructors, "new" and Setting New Prototypes </title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    
<script src = "https://code.jquery.com/jquery-latest.min.js"></script>
    
</head>
    

<body>
 
<script>

//Hello Everyone lets do some Javascript
    
    console.log("Hello World");
    
//Copy and paste this post in sections to find out how to build Objects using function contructors and the 'new' property
 
    
//Building Objects , Function Constructiors, 'new' and how to Set New Prototypes.
    
//A function constructor is a normal function that is used to construct objects.  Lets take a look at these examples.
    
function Person(firstname,lastname){
    console.log(this);
    this.firstname = firstname;
    this.lastname = lastname;
    console.log('This function is invoked');
    
     return {greeting:  'I got in the way'}  //Function returns an Object and gets in the way of the Person Object
}
    
    
//I can now create/construct a new Object using the "new" operator.  So I can create new Objects on the fly and they will have the same prototypes as the original object used to create it except it will create an empty object
    
    
var mike = new Person();   
    console.log(mike);     //firstname and lastname undefined but same prototypes as original for both new Persons
    
var sarah = new Person();
    console.log(sarah);
    
// After we  construct the new object we can also change the parameters of the function on the fly like firstname and lastname can be changed to the new first and lastnames for every Object / new Persons that you create.
    
var john = new Person('John', 'Doe');  //names defined
console.log(john);
    
var jane = new Person('Jane' , 'Doe');  //names defined
console.log(jane);

Person.prototype.getFullName = function(){
    return this.firstname + "  " + this.lastname;
};
    
    console.log(john);   // gets in the way and changes to Object   {greetings: "I got in the way"}
    
    console.log(jane);   // gets in the way and changes Object greetings: {"I got in the way"} 
    
    jane.prototype;    // undefined jane not a function
    
    john.prototype;    //Undefined jane not a function
    
    console.log(jane.getFullName());  // error message  Jane not a function
    
    console.log(john.getFullName());  // error message John not a function
   
    
//--------------------------------------------------------------------------------------------------------------------------
    
// This time we will do the same thing as before except we wiil not return an Object that gets in the way and this time we can also add some more prototypes to the object on the fly that will work and they will become prototypes of the new Object as will. 
    
 function Persons(firstname,lastname){
    console.log(this);
    this.firstname = firstname;
    this.lastname = lastname;
    console.log('This function is invoked now');  
}                                                  //We do not return an object that will get in the way
    
Persons.prototype.getFullName = function(){
    return this.firstname + "  " + this.lastname;  
    
};                                                    //new prototype added on the fly to all newlly created new Person objects
    
var johnny = new Persons('John', 'Lewis');            //create variable new Person and give names to that new Person
console.log(johnny);
    
var janet = new Persons('Janet', 'Jackson');         // create variable new Person and give name to that new Person
console.log(janet);
    
Persons.prototype.getFormalName = function(){
    return this.lastname + "  " + this.firstname;
}                                                      //new prototype added on the fly to all other created new Persons
 
console.log(janet.getFormalName());                   // prints Full name of variable janet using new prototype

console.log(johnny.getFullName());                   // prints Full name of variable janet using new prototype

console.log(Persons.prototype);                      //list all prototypes pf object Persons
    
//The 'this' variable points to a new empty Object { }, and that object is returned from the function automatically. The 'new' operation creates or constructs the new Object with all the prototypes of the original Object.  This is how you set the protoype when constructing a new Object?  Javascript does this automatically. But you can also add prototypes to newly created objects or to the original Object that it was created from.  This is powerful because that means that I can also add prototypes to existing default Objects like numbers and strings and booleans and arrays.  This is how JQuery is developed and other JS libraries.
     
//---------------------------------------------------------------------------------------------------------------------------------
    
//Built-in Function Constructors in Javascript
    
// There are many built-in function constructors in Java script for instance new Number creates an Object that holds a primitive value but the Number is an Object and it has several prototypes that are associated with it.  Play with this in the console.
    
var a = new Number(3); // construct Object primitive value(3)
    
console.log(a);   //will print Object with primitive value
    
Number.prototype;   //All the Number prototypes
    
 a.toFixed(3);     // 3.000
    
var b = new Date("1/3/1959");

    console.log(b);
    
    b.prototype;  //Date prototypes
    
    var c = new String("John"); //Creates Object String
    
    c.prototype  //will list prototypes of String
    
    console.log(c);
    
   console.log(c.length);
    
//So what you think are primitive value are actually Objects that contain primitive values.  And because they are Objects they have prototypes and methods.
    

  
</script>
   


</body>
</html>