{"id":36985,"date":"2018-03-23T03:01:04","date_gmt":"2018-03-22T17:01:04","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=36985"},"modified":"2018-03-23T08:50:03","modified_gmt":"2018-03-22T22:50:03","slug":"javascript-instanceof-object-oriented-programming-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-instanceof-object-oriented-programming-tutorial\/","title":{"rendered":"Javascript instanceof Object Oriented Programming Tutorial"},"content":{"rendered":"
\"Javascript<\/a>

Javascript instanceof Object Oriented Programming Tutorial<\/p><\/div>\n

To understand the Javascript instanceof<\/a> operator is to “get” a whole lot of what Object Oriented Programming (or OOP<\/a>) is about.<\/p>\n

You’ve got your concept of a Class<\/i> which is like a “blueprint” for describing the characteristics (data members) and methods of an Object<\/i> (and you can think of an Object<\/i> as quite often like the “Nouns” of life).<\/p>\n

Using that “blueprint” Class<\/i> during a web application, using client side Javascript you might use the “new”<\/b> keyword like below, and illustrated in that instanceof<\/a> link above …<\/p>\n

\nfunction Car(make, model, year) {
\n this.make = make;
\n this.model = model;
\n this.year = year;
\n}
\nvar auto = new<\/b> Car(‘Honda’, ‘Accord’, 1998);
\n
\nconsole.log(auto instanceof<\/i> Car);
\n\/\/ expected output: true
\n
\nconsole.log(auto instanceof<\/i> Object);
\n\/\/ expected output: true\n<\/p><\/blockquote>\n

… you are “instantiating” the Class<\/i> “Car” to the variable<\/font> “auto” above. That …<\/p>\n


\nfunction Car(make, model, year) {
\n this.make = make;
\n this.model = model;
\n this.year = year;
\n}
\n<\/code><\/p>\n

… above is called a “constructor” and it can contain more than the “data members” it shows above. It can also define “methods”.<\/p>\n

Here’s the good thing about Object Oriented Programming (or OOP) like this. It begs questions.<\/p>\n

What velocity is the Car<\/i> moving? In the “blueprint” Car<\/i> class you would define a “method” you might call “CalculateVelocity” and then to call that method you might go …<\/p>\n


\nvar car_velocity=auto.CalculateVelocity(distance, time); \/\/ where v = d \/ t
\n<\/code><\/p>\n

… via a “constructor” method declaration<\/b> like …<\/p>\n


\nfunction Car(make, model, year) {
\n this.make = make;
\n this.model = model;
\n this.year = year;
\n this.CalculateVelocity = function(distance, time) {
\n return eval(eval('' + distance) \/ eval('' + time));
\n };<\/b>
\n}
\n<\/code><\/p>\n

So the Javascript instanceof<\/a> operator can be thought of as …<\/p>\n

\nThe instanceof operator tests whether the prototype property of a constructor appears anywhere in the prototype chain of an object.\n<\/p><\/blockquote>\n

And we have found, if you are at the situation, dynamically executing client side Javascript, and are unsure, Javascript try\/catch code like …<\/p>\n


\ntry {
\n alert(auto instanceof<\/i> Car);
\n} catch (eee) {
\n alert('false');
\n}
\n<\/code><\/p>\n

… might help you out.<\/p>\n

Today’s web application usage of the Javascript instanceof<\/a> operator uses good old document.write<\/a>(prompt<\/a>([wording],[default]));<\/i> for that “in mid air” prompting feeling to a web application. It is sort of like a game for two players that goes like this …<\/p>\n

    \n
  1. Players navigate to js_instanceof.html<\/a>‘s live run<\/a> link<\/li>\n
  2. A Javascript prompt window appears and both players can read it but before it is answered, the guessing player should turn away while the other player defines an OOP Class and instantiation example, and then clicks the OK button<\/li>\n
  3. At this point the guesser can come back, and try to get inside the other player’s head, answering and fixing an OOP scenario where any question marks (?) planted there by the web application need to be filled in properly by the guesser in order to receive “smirking rights” (no scores today), by clicking the OK Javascript prompt window next presented.<\/li>\n
  4. Whether correct or not, the …
    \n
    \n(instantiatedvariablename instanceof<\/i> Classname) = true
    \n<\/code>
    \n… is presented as a conclusion to this round of the game.<\/li>\n
  5. The web application restarts, and the players may want to swap roles.<\/li>\n<\/ol>\n

    If this was interesting you may be interested in this<\/a> too.<\/p>\n