Example of a circular reference in Javascript?

JavascriptClosures

Javascript Problem Overview


I was wondering if anyone has a good, working example of a circular reference in javascript? I know this is incredibly easy to do with closures, but have had a hard time wrapping my brain around this. An example that I can dissect in Firebug would be most appreciated.

Thanks

Javascript Solutions


Solution 1 - Javascript

A simple way to create a circular reference is to have an object that refers to itself in a property:

function Foo() {
  this.abc = "Hello";
  this.circular = this;
}

var foo = new Foo();
alert(foo.circular.circular.circular.circular.circular.abc);

Here the foo object contains a reference to itself.

With closures this is usually more implicit, by just having the circular reference in scope, not as an explicit property of some object:

var circular;

circular = function(arg) {
  if (arg) {
    alert(arg);
  }
  else {
    // refers to the |circular| variable, and by that to itself.
    circular("No argument");
  }
}

circular("hello");
circular();

Here the function saved in circular refers to the circular variable, and thereby to itself. It implicitly holds a reference to itself, creating a circular reference. Even if circular now goes out of scope, it is still referenced from the functions scope. Simple garbage collectors won't recognize this loop and won't collect the function.

Solution 2 - Javascript

Or even simpler, an array "containing" itself. See example:

var arr = [];
arr[0] = arr;

Solution 3 - Javascript

Probably the shortest way to define a cyclic object.

a = {}; a.a = a;

Solution 4 - Javascript

window.onload = function() {
hookup(document.getElementById('menu'));

function hookup(elem) { elem.attachEvent( "onmouseover", mouse);

function mouse() {
}

} }

As you can see, the handler is nested within the attacher, which means it is closed over the scope of the caller.

Solution 5 - Javascript

Or using ES6:

class Circular {
  constructor() {
    this.value = "Hello World";
    this.self = this;
  }
}

circular = new Circular();

Solution 6 - Javascript

You can do:

  • window.window...window
  • var circle = {}; circle.circle = circle;
  • var circle = []; circle[0] = circle; or circle.push(circle)
  • function Circle(){this.self = this}; var circle = new Circle()

Solution 7 - Javascript

var b = [];
var a = [];
a[0] = b;
b[0] = a;

Printing a or b would return Circular.

Solution 8 - Javascript

function circular(arg){
    var count = 0;

    function next(arg){
        count++;
        if(count > 10) return;
        if(arg){
            console.log('hava arg: ' + arg);
            next();
        }else{
            console.log('no arg');
            next('add');
        }
    }
    next();
}
circular();

Circular and with a closures.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMatthewJView Question on Stackoverflow
Solution 1 - JavascriptsthView Answer on Stackoverflow
Solution 2 - JavascriptAlan KisView Answer on Stackoverflow
Solution 3 - JavascriptcychoiView Answer on Stackoverflow
Solution 4 - JavascriptJosh StodolaView Answer on Stackoverflow
Solution 5 - JavascriptcodeepicView Answer on Stackoverflow
Solution 6 - JavascriptThomas SmithView Answer on Stackoverflow
Solution 7 - JavascriptPsiView Answer on Stackoverflow
Solution 8 - JavascriptLiucwView Answer on Stackoverflow