Can someone help me understand prototypes & class?


#1



Hi,

I have some problems with fully understanding the terms of OOP. I made a lot of excercices in this course of OOP, but i looked quiet some times for help on this forum. Mostly i could figure out the correct code because i rememberd similiar code from (a) previous excercice(s).

Now, can someone try to help me understand following things?

-Prototype

-Class

-Method

-What is the difference between a class and a method?

I hope someone can make this clear to me.
Thanks in advance :slight_smile: !



#2

@apolloskillz,
Do have programming experience
and if so in which language.....????


#3

I have worked a little bit in vb.net so that isnt something to compare javascript with i think.
Further i don't really have experience with programming. I didn't know what language to start with so I started to learn html, css and js.


#4

@apolloskillz,


An object uses the syntax

  • it is encapsulated in a pair of curly-brackets-{ }
    • it can be empty
    • it can have 1 or more properties

A property consists of

  • a property-key and its associated Value
    • the property-key and its associated Value are separated from eachother by a colon :

Thus with

{ key1 : val1 }

we have an object which has 1 property
a key1 property with property-key key1 and its associated Value val1

{ key1 : val1, key2 : val2, key3 : val3 }

we have an object which has 3 properties which are separated from eachother by a comma ,
a key1 property with property-key key1 and its associated Value val1
a key2 property with property-key key2 and its associated Value val2
a key3 property with property-key key3 and its associated Value val3

===========================================================

Now you write an object which has 4 properties separated from eachother by a comma ,
a k1 property with property-key k1 and its associated Value v1
a k2 property with property-key k2 and its associated Value v2
a k3 property with property-key k3 and its associated Value v3


#5

@apolloskillz,

waiting for your Post

Now you write an object which has 4 properties separated from eachother by a comma ,
a k1 property with property-key k1 and its associated Value v1
a k2 property with property-key k2 and its associated Value v2
a k3 property with property-key k3 and its associated Value v3


#6

First of all thanks for your answers. But i already know what an object is and how i can make it.
I just dont fully get what a prototype is and what the difference is between class and a method.


#7

@apolloskillz

An object has one or more properties, separated by a comma_,

A property has a property-key and it's associated VALUE

The associated VALUE can be anything from:

•Number
•String
•Boolean
•Symbol
•Object  ◦Function/'Method'
         ◦Array
         ◦Date
         ◦RegExp
         ◦Math
•Null
•Undefined

================================================

Create an an object
with the properties
k1 with an associated number Value of your choice
k2 with an associated string Value of your choice
k3 with an associated Boolean Value of your choice
k4 with an associated empty Object Value
k5 with an associated function Value with 1 parameter para1
k6 with an associated array Value consisting of 3 number Elements


#8

Thanks Leon for all your advice. I am wondering if anyone anywhere has a diagram which explains how Classes relate to objects/relate to properties/relate to methods. I think this would be very useful.


#9

@apolloskillz,
I am waiting for your reaction...

Create an an object
with the properties
k1 with an associated number Value of your choice
k2 with an associated string Value of your choice
k3 with an associated Boolean Value of your choice
k4 with an associated empty Object Value
k5 with an associated function Value with 1 parameter para1
k6 with an associated array Value consisting of 3 number Elements


#10

This is what i got, what i understand.
Only, im stuck with line 5 & 6. There is a syntax error. I have no idea how to create an object in an object.

var myObject = {
k1: 17,
k2: "Programming is fun",
k3: true,
k4: var secondObject = new Object();
k5: var oneParam = function(param1){};
k6: [5, 66, 777]
};


#11

@apolloskillz,

var myObject = {
 k1: 17,
 k2: "Programming is fun",
 k3: true,
 !! k4: var secondObject = new Object(); !!
 An empty =object= Value is represented by {}
 Thus
 k4: {}, <== do not forget the comma-separator
 
 !! k5: var oneParam = function(param1){}; !!
 A =function= Value is represented by function(){}
 Thus
 k5: function(para1) {}, <== do not forget comma-separator
 k6: [5, 66, 777]
};

And never forget
An object has one or more properties, separated from eachother by a comma ,
( so NO semi-colon-; )

A property has a property-key and it's associated VALUE

( and read the specification-request more carefully =para1= was asked =param1= was used. )

================================================

Create an an object
with the properties

k1 with an associated empty Object Value
k2 with an associated Object Value which has 2=properties=
      a car =property= with its associated string Value "Ford Mustang"
      a color =property= with its associated string Value "Red"
k3 with an associated function Value which takes 2 parameter p1 and p2
      its function-body should be empty
k4 with an associated function Value which takes 1 parameter c1
      its function-body should be console.log() the c1 parameter
k5 with an associated array Value consisting of 4 =mixed= Elements
      1st Element being a =number= Value
      2nd Element being an empty =object= Value
      3th Element being a =object= Value which has 2 =properties=
         a house =property= with an associated =string= Value of your choice
         a houseNr =property= with an associated =number= Value 13
      4th Element being a =function= Value which takes 1 parameter a1
          its  function-body should be empty

#12

Is it normal that k3 & k4 turn a different color then the others?


#13

[definitions]

  • The anObject object is a so-called Literal Notated object
    as you have literally written out the object structure.
  • Every property which has an associated function Value is called a Method
    ( thus if they ask you to create a Method you will know that you are going to work on an Object which has at least 1 property with an associated function Value )

[end-definitions]

========================================================================

var james = {
    job: "programmer",
   married: false,
   sayJob: function() {
          // no PARAMETER used
          // job-property-Value is picked up from within this Object
          // by using the  =this= keyword
          console.log("Hi, I work as a" + this.job);
    }
 };

Description of the james object.
The james object has 3 properties which are seperated by a comma-,

there is a job property with property-key job and it's associated string value 'programmer'
there is a married property with property-key married and it's associated boolean value false
there is a sayJob property with property-key sayJob and it's associated anonymous function VALUE
( they also would 'say', the james-object has the sayJob()-Method )

access via dot-notation

james.job ==> you will get the associated string VALUE of the job property-key, thus
you get the string VALUE 'programmer'

james.married ==> you will get the associated boolean VALUE false

james.sayJob ==> you will get the associated anonymous function VALUE
to call/execute this method you add a pair of parenthesis-( )
james.sayJob();

access via the square-bracket-notation

1 using the literal property-key

james["job"]
james["married"]
james["sayJob"]()

2 using the property-key by reference (=== via a variable )

var propertyKey1 = "job";
var propertyKey2 = "married";
var propertyKey3 = "sayJob";
james[propertyKey1] ==> you will get the associated string VALUE of the job property-key, thus
you get the string "programmer"

james[propertyKey2]
in this case you will get the boolean VALUE of the married property
being false

james[propertyKey3]();
would =display= "Hi, I work as a programmer"

=================================================================

Create an an object
with the properties

k1 with an associated string Value "Hello !"
k2 with an associated Object Value which has 2=properties=
      a car =property= with its associated string Value "Ford Mustang"
      a color =property= with its associated string Value "Red"
k3 Method which takes 2 parameter p1 and p2
      and =return='s both parameter
      as a concatenation with a semi-colon as separator
k4 Method which takes no parameter
      it should by console.log() display the associated Value of k1
k5 with an associated array Value consisting of 3 =mixed= Elements
      1st Element being a =number= Value
      2nd Element being a =object= Value which has 2 =properties=
        a house =property= with an associated =string= Value of your choice
        a houseNr =property= with an associated =number= Value 13
      3th Element being a =function= Value which takes 1 parameter a1
           it should =return= the a1 parameter

access via dot-notation

display the k1-property, by using the k4 Method
display the car and color property Value as a concatenation with equal-sign as separator
display the houseNr

access via the square-bracket-notation

1 using the literal property-key

display the outcome of calling the k3 Method providing the number Value's 1 and 2
display the house property-Value

2 using the property-key by reference (=== via a variable )

display the outcome of calling the function of the 3th Element of k5 providing 1 argument
being a string Value "done"


#14

Thank you for all your help. You helped me to understand OOP much better already.
With every excercice it became a bit clearer.

Im also not sure what you mean with concatenate thing.

Is there a way that i can paste my code in here without losing the structure like in the screenshot?

var anObject = {
k1: "Hello !",
k2: myCar = {
car: "Ford Mustang",
color: "Red"
},
k3: function (p1, p2) {
return p1 + ";" + p2;
},
k4: function () {
console.log(k1);
},
k5: [2016, myHouse = {house: "villa", houseNr: 13},
aFunction = function (a1) {return a1;}]
};

//DOT-NOTATION
console.log(anObject.k1);
console.log(myCar.car + " = " + myCar.color);
console.log(myHouse.houseNr);

//SQUARE-BRACKET-NOTATION
console.log(anObject"k3");
console.log(myHouse["house"]);

console.log(aFunction("Done")); // IS THIS STILL A CORRECT NOTATION?
// I DIDN'T USE SQUARE BRACKETS HERE