Inheritance through Parasitism in JavaScript

Question

Inheritance through Parasitism in JavaScript

Just finished a Douglas Crockford lecture where he introduced the concept of parasitic inheritance in JavaScript. This involves one constructor calling another to modify the object. The code example he provided is:

function gizmo(id, secret) {
  secret = secret || {};
  secret.id = id;
  return {
    toString: function () {
      return "gizmo " + secret.id;
    }
  };
}

function hoozit(id) {
  var secret = {},
      that = gizmo(id, secret);
  that.test = function (testid) {
    return testid === secret.id;
  };
  return that;
}

var myHoozit = hoozit(20);
console.log(myHoozit.test(20)); //returns true

The code seems pretty straightforward except for one thing - the hoozit function raises confusion. Without setting secret = {}, you won't get a true returned. This puzzles me because in the gizmo function, there's secret = secret || {} which should handle this scenario... but it doesn't.

Why does the short circuit (secret = secret || {}) fail in the gizmo function when no second parameter is passed in the hoozit function (breaks in Chrome and Firefox)??

javascript

Answer 1

Answer №1

What is the reason behind the malfunction of the short circuit (secret = secret || {}) in the gizmo function when a second parameter is not passed in the hoozit function (this issue occurs in both Chrome and Firefox)??

The issue lies in the fact that you are unable to access secret within that.test as it does not exist in that particular scope:

function hoozit(id) {
  var that = gizmo(id);
  that.test = function (testid) {
    // 'secret' is not defined in this or any higher scope
    // hence, a reference error occurs
    return testid === secret.id;
  };
  return that;
}

The only existing secret object is local to the gizmo function.

If you define it without passing it to gizmo, then secret = secret || {} will result in creating a new object inside the gizmo function, i.e., secret = {}. This new object can only be accessed within the gizmo function and is unrelated to the secret variable in the hoozit function. The secret object within gizmo is separate from the one in hoozit.

function hoozit(id) {
  var secret = {},      // secret object is created here
      that = gizmo(id);
  that.test = function (testid) {
    // since `secret.id` was never set, the comparison results in `false`
    return testid === secret.id;
  };
  return that;
}

There is no issue with secret = secret || {}, it is functioning as intended.

Answer 2

What is the reason behind the malfunction of the short circuit (secret = secret || {}) in the gizmo function when a second parameter is not passed in the hoozit function (this issue occurs in both Chrome and Firefox)??

The issue lies in the fact that you are unable to access secret within that.test as it does not exist in that particular scope:

function hoozit(id) {
  var that = gizmo(id);
  that.test = function (testid) {
    // 'secret' is not defined in this or any higher scope
    // hence, a reference error occurs
    return testid === secret.id;
  };
  return that;
}

The only existing secret object is local to the gizmo function.

If you define it without passing it to gizmo, then secret = secret || {} will result in creating a new object inside the gizmo function, i.e., secret = {}. This new object can only be accessed within the gizmo function and is unrelated to the secret variable in the hoozit function. The secret object within gizmo is separate from the one in hoozit.

function hoozit(id) {
  var secret = {},      // secret object is created here
      that = gizmo(id);
  that.test = function (testid) {
    // since `secret.id` was never set, the comparison results in `false`
    return testid === secret.id;
  };
  return that;
}

There is no issue with secret = secret || {}, it is functioning as intended.

Answer 3

Answer №2

Here is a more straightforward example to consider:

function Foo(baz){
    baz = baz || {};
    baz.boo = 1;
}

function Bar(baz){
    baz = baz || {};
    Foo(baz);
    return baz;
}

When we invoke Bar(), we pass an object to Foo, which then modifies the object by adding a boo property. Simple and effective!

Now, let's modify our Bar function like this:

function Bar(baz){
    baz = baz || {};
    Foo();
    return baz;
}

The key difference here is that we are not passing an object to Foo. Consequently, Foo creates an object within its own scope, adds a property to it, and then exits. Since this new object is not in the scope of Bar, Bar remains unaware of its existence and cannot access it. As there are no references pointing to this object, it gets removed from memory shortly after.

However, your situation differs slightly due to the involvement of the toString function. This function holds a reference to the object, making it a local variable within its scope once the outer scope has finished execution. If we skipped passing a secret object, it would remain confined within that particular scope unless explicitly exported.

A more sensible approach would be to establish the secret as a property of the original object itself. By doing so, the secret can still be accessed by knowledgeable JavaScript users, leading to smoother code management and integration into inheritance methods.

In case you are unaware, remember that SomeFunction.call allows for multiple arguments. The first argument specifies the value of this within the function, while subsequent arguments consist of regular function parameters.

function gizmo() {
    this.toString = function () {
        return "gizmo " + this.id;
    };
};

function hoozit(id) {
    this.id = id;
    gizmo.call(this); // enables gizmo to interact with this object

    this.test = function (is) {
        return this.id === is;
    };
};

h = new hoozit(1);
console.log(h.test(1)); // true
console.log(h.toString()); // "gizmo 1"

Answer 4

Here is a more straightforward example to consider:

function Foo(baz){
    baz = baz || {};
    baz.boo = 1;
}

function Bar(baz){
    baz = baz || {};
    Foo(baz);
    return baz;
}

When we invoke Bar(), we pass an object to Foo, which then modifies the object by adding a boo property. Simple and effective!

Now, let's modify our Bar function like this:

function Bar(baz){
    baz = baz || {};
    Foo();
    return baz;
}

The key difference here is that we are not passing an object to Foo. Consequently, Foo creates an object within its own scope, adds a property to it, and then exits. Since this new object is not in the scope of Bar, Bar remains unaware of its existence and cannot access it. As there are no references pointing to this object, it gets removed from memory shortly after.

However, your situation differs slightly due to the involvement of the toString function. This function holds a reference to the object, making it a local variable within its scope once the outer scope has finished execution. If we skipped passing a secret object, it would remain confined within that particular scope unless explicitly exported.

A more sensible approach would be to establish the secret as a property of the original object itself. By doing so, the secret can still be accessed by knowledgeable JavaScript users, leading to smoother code management and integration into inheritance methods.

In case you are unaware, remember that SomeFunction.call allows for multiple arguments. The first argument specifies the value of this within the function, while subsequent arguments consist of regular function parameters.

function gizmo() {
    this.toString = function () {
        return "gizmo " + this.id;
    };
};

function hoozit(id) {
    this.id = id;
    gizmo.call(this); // enables gizmo to interact with this object

    this.test = function (is) {
        return this.id === is;
    };
};

h = new hoozit(1);
console.log(h.test(1)); // true
console.log(h.toString()); // "gizmo 1"

Answer 5

Answer №3

To resolve the issue, ensure that secret = {} is defined.

The error occurs at return testid === secret.id; because secret must be initialized.

The key aspect to note is where secret.id is assigned a value, as all operations are within the function gizmo(). The crucial line is: that = gizmo(id, secret);

In JavaScript, objects are passed by reference when passed as arguments. This implies that any changes made to an object in one function will affect it locally.

If this behavior is not desired, a copy of the argument would be necessary. However, in this scenario, updates to secret in gizmo should also reflect in hoozit, so everything aligns as intended.

An alternative way to express the solution:

function gizmo(secret) {              
   secret = secret || {'id':null};    
   return {
      toString: function () {
         return "gizmo " + secret.id; 
      }
   };
}

function hoozit(id) {
   var secret = {'id':id},           
       that   = gizmo(secret);        

   that.test  = function (testid) {
      return testid === secret.id;
   };

   return that;
}

var myHoozit = hoozit(20);
console.log( myHoozit.test(20) ); //returns true

Answer 6

To resolve the issue, ensure that secret = {} is defined.

The error occurs at return testid === secret.id; because secret must be initialized.

The key aspect to note is where secret.id is assigned a value, as all operations are within the function gizmo(). The crucial line is: that = gizmo(id, secret);

In JavaScript, objects are passed by reference when passed as arguments. This implies that any changes made to an object in one function will affect it locally.

If this behavior is not desired, a copy of the argument would be necessary. However, in this scenario, updates to secret in gizmo should also reflect in hoozit, so everything aligns as intended.

An alternative way to express the solution:

function gizmo(secret) {              
   secret = secret || {'id':null};    
   return {
      toString: function () {
         return "gizmo " + secret.id; 
      }
   };
}

function hoozit(id) {
   var secret = {'id':id},           
       that   = gizmo(secret);        

   that.test  = function (testid) {
      return testid === secret.id;
   };

   return that;
}

var myHoozit = hoozit(20);
console.log( myHoozit.test(20) ); //returns true

Inheritance through Parasitism in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

What possible reasons could there be for my vue project failing to load the JavaScript file?

Node replication including a drop-down menu

Implementing swipe functionality to Bootstrap carousel

Display the list of cities associated with the country chosen in the form

Tips for concealing JavaScript code while inspecting elements with AngularJS

Prioritize loading CMS content before mounting the React component

Displaying HTML elements in a specific order using ng-repeat

Can a function be called from outside its parent function?

Spin the Three.js camera in a circular motion along the Y-axis

Tips for embedding a file within a text box in HTML and enabling users to make direct edits

What is the solution for resolving an Optional chaining Error in a React project?

Enrolling JavaScript documents and connected inline programming

WordPress CSS & JS files failing to enqueue properly

The component "SafeAreaViewRN" could not be located within the UIManager

Every time Fetch() is called in Node.js, a fresh Express session is established

What is the best way to horizontally align my divs and ensure they stack properly using media queries?

Exploring the topic of AngularJS unit testing and working with httpBackend timeouts

Having difficulties injecting a Service into a TypeScript Controller

The functionality of returning false on ajax response does not effectively prevent the form from submitting

The result of the $.post() request is back