JavaScript Inheritance

01-pseudoclass-construction.js

// Declaring our Person object
var Person = function(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
};

// Adding a couple of operations
Person.prototype.getFirstName = function() {
    return this.firstName;
};

Person.prototype.setFirstName = function(firstName) {
    this.firstName = firstName;
};

Person.prototype.getLastName = function() {
    return this.lastName;
};

Person.prototype.setLastName = function(lastName) {
    this.lastName = lastName;
};

Person.prototype.sayHello = function() {
    return "Hello, I am a person and my name is "
         + this.firstName + " " + this.lastName;
};

// Constructing a couple instances
var buffy = new Person('Buffy', 'Summers');
var willow = new Person('Willow', 'Rosenberg');

console.log(buffy.getFirstName()); // Buffy
console.log(willow.getFirstName()); // Willow

// Setting a new first name for Buffy
buffy.setFirstName('Buffy Anne');

console.log(buffy.getFirstName()); // Buffy Anne
console.log(willow.getFirstName()); // Willow

02-pseudoclass-inheritance.js

// Declaring our Student object
var Student = function(firstName, lastName, studentNumber) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.studentNumber = studentNumber;
};

// Overwriting the object's prototype with the parent prototype
// This is where we actually inherit from Person
Student.prototype = new Person();

// Adding getter and setter functions
Student.prototype.getStudentNumber = function() {
    return this.studentNumber;
};

Student.prototype.setStudentNumber = function(studentNumber) {
    this.studentNumber = studentNumber;
};

// Constructing a student
var xander = new Student('Xander', 'Harris', 1234);

console.log(xander.getFirstName()); // Xander
console.log(xander.getLastName()); // Harris
console.log(xander.getStudentNumber()); // 1234

03-inheritance-pseudoclass-overriding.js

// Overriding a parent operation
Student.prototype.sayHello = function() {
    return "Hello, I am a student and my name is "
         + this.firstName + " " + this.lastName;
};

console.log(buffy.sayHello()); // Buffy is a person
console.log(willow.sayHello()); // So is Willow
console.log(xander.sayHello()); // But Xander's a student

04-inheritance-pseudoclass-static.js

// Creating a factory method for Person
Person.create = function(firstName, lastName) {
    return new Person(firstName, lastName);
}

var giles = Person.create("Rupert", "Giles");

console.log(giles.sayHello());

05-inheritance-pseudoclass-super.js

Student.prototype.sayHello = function() {
    return Person.prototype.sayHello.call(this) + ", and I'm also a student";
};

console.log(xander.sayHello());

06-functional-construction.js

// Declaring our Person object
var Person = function(firstName, lastName) {
	var _firstName,
	    _lastName,
	    self = {};
	
	(function(){
		_firstName = firstName;
		_lastName = lastName;
	})();
	
	self.getFirstName = function() {
		return _firstName;
	}
	
	self.setFirstName = function(firstName) {
		_firstName = firstName;
	};
	
	self.getLastName = function() {
		return _lastName;
	};
	
	self.setLastName = function(lastName) {
		_lastName = lastName;
	};
	
	self.sayHello = function() {
		return "Hello, I am a person and my name is "
             + _firstName + " " + _lastName;
	};
	
	return self;
};

// Constructing a couple instances
var buffy = Person('Buffy', 'Summers');
var willow = Person('Willow', 'Rosenberg');

console.log(buffy.getFirstName()); // Buffy
console.log(willow.getFirstName()); // Willow

// Setting a new first name for Buffy
buffy.setFirstName('Buffy Anne');

console.log(buffy.getFirstName()); // Buffy Anne
console.log(willow.getFirstName()); // Willow

07-functional-inheritance.js

// Declaring our Student object
var Student = function(firstName, lastName, studentNumber) {
    var _studentNumber,
        parent = [],
        self = {};
	
	// Constructor	
    (function(){
        self = Person(firstName, lastName);
        parent.sayHello = self.sayHello;
        _studentNumber = studentNumber;
    })();
    
    // Public interface
    self.getStudentNumber = function() {
        return _studentNumber;
    };
    
    self.setStudentNumber = function(studentNumber) {
        _studentNumber = studentNumber;
    };
    
    // Overriding a parent operation
    self.sayHello = function() {
        return "Hello, I am a student and my name is " 
             + self.getFirstName() + " " + self.getLastName();
    };
    
    // Calling a super operation from this object
    self.sayHelloSuper = function() {
        return parent.sayHello() + ", and I'm also a student.";
    };
    
    return self;
};

// Constructing a student
var xander = Student('Xander', 'Harris', 1234);

console.log(xander.getFirstName()); // Xander
console.log(xander.getLastName()); // Harris
console.log(xander.getStudentNumber()); // 1234

console.log(buffy.sayHello()); // Buffy is a person
console.log(willow.sayHello()); // So is Willow
console.log(xander.sayHello()); // But Xander's a student
console.log(xander.sayHelloSuper());

08-inheritance-functional-static.js

// Creating a factory method for Person
Person.create = function(firstName, lastName) {
    return Person(firstName, lastName);
}

var giles = Person.create("Rupert", "Giles");

console.log(giles.sayHello());