Reading Professional JavaScript (1)

Professional JavaScript for Web Developers (Wrox Professional Guides) [Paperback] – Amazon

Reading “Professional JavaScript for Web Developers”.

JavaScripts’ inheritance is a little tricky, as it doesn’t have “class” concept and every object is just a “function”. There’re many different patterns for managing inheritance, but frequently used one is the “combination inheritance”. It defines properties in the function instances, and defines methods in function prototypes as follows.

function SuperType(name) {
  // define properties for each SuperType instance
  this.name   = name;
  this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function() {  // define method for SuperType
  console.log(this.name);
};


function SubType(name, age) {
  SuperType.call(this, name);  // inherit properties from SuperType
  this.age = age;              // define property for each Subtype instance
}

SubType.prototype = new SuperType();    // inherit methods from SuperType
SubType.prototype.sayAge = function() { // define method for SubType
  console.log(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors);  // => [ 'red', 'blue', 'green', 'black' ]
instance1.sayName();            // => Nicholas
instance1.sayAge();             // => 29

var instance2 = new SubType("Greg", 27);
console.log(instance2.colors);  // => [ 'red', 'blue', 'green' ]
instance2.sayName();            // => Greg
instance2.sayAge();             // => 27

console.log(instance1.sayName == instance2.sayName);  // => true

If the methods are defined in the constructor, its definitions are created for each instances as follows (It’s not efficient and not makes sense).

function Person (name, age, job) {
  this.name = name;
  this.sayName = new Function("alert(this.name)");
}

var p1 = new Person();
var p2 = new Person();
console.log(p1.sayName == p2.sayName);  // => false

If the properties are defined in the prototpye, its definitions are shared among instances as follows (It’s not usually a expected behavior).

function Person() {
  Person.prototype.name    = "";
  Person.prototype.friends = [];

  Person.prototype.say = function() {
    console.log(
      "name = " + this.name + ", " +
      "friends = " + this.friends
    );
  }

  Person.prototype.sayFriends = function() {
    console.log(this.friends);
  }
}

var p1 = new Person();
var p2 = new Person();

p1.name = "Nicholas";
p1.friends.push("John");

p2.name = "Greg";
p2.friends.push("Bob");

p1.say();  // => name = Nicholas, friends = John,Bob
p2.say();  // => name = Greg, friends = John,Bob
Advertisements

Posted on March 13, 2013, in Book, JavaScript. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: