example 0.3: JavaScript object sugar

Here are some lines of code.

var renderer = new THREE.WebGLRenderer();
renderer.setSize( 800, 400 );
document.body.appendChild( renderer.domElement );

Same code again in other style.

var renderer = new THREE.WebGLRenderer();
renderer.setSize( 800, 400 );
document.body.appendChild( renderer.domElement );

1-2-three
example 0.3

// The only universally supported way to give an object a 
// protype is to do it at the time the object is created.
// The modern way to do this is using Object.create(prototype).
// Re-using a previous example:

// We must now define the prototype first.
var object2 = {job:"teacher"};

// Now object1 has object 2 as a prototype,
// which is what we wanted, but...
var object1 = Object.create(object2);

// We now need to add object1's other properties
// one per line, which is not the most elegant.
object1.shoeSize = 8;
object1.eyeColor = "brown";

// Let's make sure it works.
document.write("object1.job = " + object1.job + "<br>");

// JavaScript objects are very flexible, and there are many
// ways to use them effectively. One way, however, is to divide
// our objects up into two sorts. One will do for us the job
// that classes do in C and Java, i.e. contain all properties
// that we need only one copies of, like methods. Let's call
// these "base" objects. The other will contain only properties 
// that will generally be different for each object.

// We can now define some special functions ("syntactic sugar")
// to make our intended use of JavaScript objects easy and as
// elegant as possible. JavaScript has a generic object called
// Object, which we will use as a foundation to build all our
// bases and regular objects on.

// Base classes may themselves have prototypes (Object, if nothing
// else). The newBase function allows us to create a new base class
// by passing its prototype a throw-away object containing all the
// properties we want in the class.

Object.newBase = function(params) {
  var result = Object.create(this);
  if (typeof(params)!=='undefined') {
    for (var key in params)
      result[key] = params[key];
  }
  return result;
};

// Regular objects can be created using the sugar function newObj
// defined below. This function supports an optional
// Python-like property called __init__ that can be used to
// initialize a new object.
  
Object.newObj = function() {
  var result = Object.create(this);
  if (result.__init__)
    result.__init__.apply(result,arguments);
  return result;
};

// Let's rework the example above to use newBase and newObj.

object2Props = 
{
  job : "teacher",
  
  __init__ : function(shoeSize,eyeColor)
  {
    this.shoeSize = shoeSize;
    this.eyeColor = eyeColor;
  }
};

var obj2 = Object.newBase( object2Props );
var obj1 = obj2.newObj(8,"brown")

// Did it work?

document.write("obj1.shoeSize = " + obj1.shoeSize +"<br>");
document.write("obj1.eyeColor = " + obj1.eyeColor +"<br>");
document.write("obj1.job = " + obj1.job +"<br>");

// Now let's repeat the previous inheritance example 
// using the newBase and newObj syntactic sugar functions.

Object.newBase = function(params) {
  var result = Object.create(this);
  if (typeof(params)!=='undefined') {
    for (var key in params)
      result[key] = params[key];
  }
  return result;
};
  
Object.newObj = function() {
  var result = Object.create(this);
  if (result.__init__)
    result.__init__.apply(result,arguments);
  return result;
};

var EmployeeProps = 
{ 
  __init__ : function(job)
  {
    this.job = job;
  }
};

var EmployeeBase = Object.newBase( EmployeeProps );

var TeacherProps =
{
  __init__ : function(job,shoeSize,eyeColor)
  {
    EmployeeBase.__init__.call(this,job);
    this.shoeSize = shoeSize;
    this.eyeColor = eyeColor;
  }
}

var teacherBase = EmployeeBase.newBase(TeacherProps);

var object4 = teacherBase.newObj("teacher",8,"brown");

// Did it work?

document.write("object4.shoeSize = " + object4.shoeSize +"<br>");
document.write("object4.eyeColor = " + object4.eyeColor +"<br>");
document.write("object4.job = " + object4.job +"<br>");

</script></body></html>

example 0.3: JavaScript object sugar

1-2-threeexample 0.3

1-2-three
example 0.3