1

I'm trying to understand the difference between the 3 following functions. I came up with a few "conclusions" after a day on MDN and other sources and I was wondering if anybody could help me validate them. Thank you :)

BLOCK #1 (prototype-based constructor function example)

function Person (name){
    this.name = name;
    this.greeting = function(){
      alert(this.name);
      };
    }
  var person = new Person('Bob');

BLOCK #2 (another prototype-based constructor function example)

function Person(name) {
      this.name = name;
    }
    Person.prototype.greeting = function() {
      alert(this.name);
    }
  let person = new Person("Bob");

BLOCK #3 (prototype-based ES6 class example)

 class Person {
   constructor(name) {
     this.name = name;
   }
   greeting() {
     alert(this.name);
   }
 }
 let person = new Person("Bob");

Questions:

  1. The three functions add the name and greeting members to the Person object prototype. Is this statement correct?

  2. Code in Block #3 uses the new ES6 class keyword and works "behind the scenes" in a different way compared to the code in Block #1 and Block #2. (PS. I'm writing "behind the scenes" because I don't have yet a clear view of what happens under the hood when I call the function, but for the time being I assume I am too new to deep dive).

  3. Code in Block #1 and Block #2 reach the same and work "behind the scenes" in the same way. The difference in the code between the two is that in Block #1 we keep both the name variable and the function greeting in the same block of code, while in Block #2 we keep the function greeting separate from the variable name (adding the greeting function to the Person prototype, using Person.prototype.greeting)

  4. Using Person.prototype.greeting = function () {...} in Block #2, we achieve the same result as putting this.greeting = function (...) below this.name in Block #1

Thank you!

Community
  • 1
  • 1
user3926863
  • 325
  • 4
  • 13

1 Answers1

0

To answer the questions:

  1. No, the statement is not correct, neither code adds the "name" to the prototype and only code blocks #2 and #3 add the greeting to the prototype.
  2. It probably is too deep of a dive, I cannot verify what precisely happens behind the scenes, but the code essentially behaves as block #2.
  3. Code blocks #1 and #2 definitively do not work the same way, nor do they reach the same end results. The block one (and i have to remind you, as written by me, since I am operating under the assumption you made a mistake in copy-paste) will create an instance of an object and assign both the property name and function greeting to the newly created instance, whereas code block #2 will assign the property name to the instance, but the function greeting to the prototype, so the other half of your question #3 is correct.
  4. Absolutely not, for every object created using block #1, you are defining and creating a new instance of the function greeting and attaching it to the newly created object, you are not using prototype inheritance at all in this case.
Dellirium
  • 1,362
  • 16
  • 30
  • You are right @Dellirium, I had made a mistake in copy-pasting. I edited the code and replaced it with the correct one (which is also reflecting the code you wrote). – user3926863 Jan 12 '19 at 21:52
  • Okay then all my points stand since the assumption of a mistake was correct, i will edit the answer to remove the "assumption part" and avoid confusion for future readers. The 4 answers given bellow are valid. – Dellirium Jan 12 '19 at 21:53