js-prototype-context-demo.js

function Person(firstName) {
  var that = this;
  console.log('************************************************************** P');
  console.log('============================================================== P');
  console.log('"this" inside constructor "Person", before anything else');
  console.log(this);

  this.firstName = firstName;

  (function test1() {
    console.log('============================================================== P');
    console.log('in an IIFE inside the constructor "Person"');
    console.log('"this"');
    console.log(this);

    console.log('"that"');
    console.log(that);
  })();

  function test2() {
    console.log('============================================================== P');
    console.log('in a non-self-executing function called inside the constructor "Person"');
    console.log('"this"');
    console.log(this);

    console.log('"that"');
    console.log(that);
  }
  test2();

  this.test3a = function() {
    console.log('============================================================== P');
    console.log('in "this.test3a", a non-self-executing function with the same context as the constructor "Person"');
    console.log('"this"');
    console.log(this);

    console.log('"that"');
    console.log(that);
  };

  this.test3b = function() {
    console.log('============================================================== P');
    console.log('in "this.test3b", which is a non-self-executing function with the same context as the constructor "Person"');
    console.log('"this"');
    console.log(this);

    console.log('"that"');
    console.log(that);
  };

  this.test3c = function() {
    console.log('============================================================== P');
    console.log('in "this.test3c", which is a non-self-executing function with the same context as the constructor "Person"');
    console.log('"this"');
    console.log(this);

    console.log('"that"');
    console.log(that);
  };

  console.log('============================================================== P');
  console.log('"this" after everything in the constructor "Person" has completed');
  console.log(this);
}

// Add a couple of methods to Person.prototype
Person.prototype.walk = function() {
  console.log('============================================================== P');
  console.log('"this" for "Person.prototype.walk/person1.walk", which is a function on the prototype for the constructor "Person"');
  console.log(this);
  console.log('I am walking!');
};

Person.prototype.sayHello = function() {
  console.log('============================================================== P');
  console.log('"this" for "Person.prototype.sayHello", which is a function on the prototype for the constructor "Person"');
  console.log(this);
  console.log('Hello, I\'m ' + this.firstName);
};

// Define the Student constructor
function Student(firstName, subject) {

  var that = this;

  console.log('************************************************************** S');
  console.log('============================================================== S');
  console.log('"this" inside constructor "Student", before anything else');
  console.log(this);

  (function test1() {
    console.log('============================================================== S');
    console.log('in an IIFE inside the constructor "Student", before calling "Person"');
    console.log('"this"');
    console.log(this);

    console.log('"that"');
    console.log(that);
  })();

  function test2() {
    console.log('============================================================== S');
    console.log('in a non-self-executing function called inside the constructor "Student", before calling "Person"');
    console.log('"this"');
    console.log(this);

    console.log('"that"');
    console.log(that);
  }
  test2();

  this.test3a = function() {
    console.log('============================================================== S');
    console.log('in "this.test3a", which is a non-self-executing function with the same context as the constructor "Student", before calling "Person". Overwrites.');
    console.log('"this"');
    console.log(this);

    console.log('"that"');
    console.log(that);
  };

  this.test4 = function() {
    console.log('============================================================== S');
    console.log('in "this.test4", which is a non-self-executing function with the same context as the constructor "Student", before calling "Person". Does not overwrite.');
    console.log('"this"');
    console.log(this);

    console.log('"that"');
    console.log(that);
  };

  // Call the parent constructor, making sure (using Function#call)
  // that "this" is set correctly during the call
  Person.call(this, firstName);

  // Initialize our Student-specific properties
  this.subject = subject;

  (function test5() {
    console.log('============================================================== S');
    console.log('in an IIFE inside the constructor "Student", after calling "Person"');
    console.log('"this"');
    console.log(this);

    console.log('"that"');
    console.log(that);
  })();

  function test6() {
    console.log('============================================================== S');
    console.log('in a non-self-executing function called inside the constructor "Student", after calling "Person"');
    console.log('"this"');
    console.log(this);

    console.log('"that"');
    console.log(that);
  }
  test2();

  this.test3b = function() {
    console.log('============================================================== S');
    console.log('in "this.test3b", which is a non-self-executing function with the same context as the constructor "Student", after calling "Person". Overwrites.');
    console.log('"this"');
    console.log(this);

    console.log('"that"');
    console.log(that);
  };

  this.test7 = function() {
    console.log('============================================================== S');
    console.log('in "this.test6", which is a non-self-executing function with the same context as the constructor "Student", after calling "Person". Does not overwrite.');
    console.log('"this"');
    console.log(this);

    console.log('"that"');
    console.log(that);
  };

  console.log('============================================================== S');
  console.log('"this" after everything in the constructor "Student" has completed');
  console.log(this);
}

// Create a Student.prototype object that inherits from Person.prototype.
Student.prototype = Object.create(Person.prototype);

// Set the "constructor" property to refer to Student
Student.prototype.constructor = Student;

// Replace the "sayHello" method
Student.prototype.sayHello = function() {
  console.log('============================================================== S');
  console.log('"this" for "Student.prototype.sayHello/student1.sayHello", which is a function on the prototype for the constructor "Student"');
  console.log(this);
  console.log('Hello, I\'m ' + this.firstName + '. I\'m studying ' + this.subject + '.');
};

// Add a "sayGoodBye" method
Student.prototype.sayGoodBye = function() {
  console.log('============================================================== S');
  console.log('"this" for "Student.prototype.sayGoodBye/student1.sayGoodBye", which is a function on the prototype for the constructor "Student"');
  console.log(this);
  console.log('Goodbye!');
};

var person1 = new Person('John');
person1.walk();
person1.sayHello();
person1.test3a();
person1.test3b();
person1.test3c();

// Example usage:
var student1 = new Student('Jane', 'Applied Physics');
student1.walk();
student1.sayHello();
student1.sayGoodBye();
student1.test3a();
student1.test3b();
student1.test3c();
student1.test4();
student1.test7();