Javascript Reflection.

2012-05-21

In this video Douglas Crockford talks about the good and bad parts of Javascript. One of the things I really like is the easy support for reflection. Suppose we have this code:

function Person (name, salary) {
this.name = name;
this.salary = salary;
}

var person = new Person('Vera', 1500);

How do we know if the Person class “has” a certain property? Well, with reflection of course!

The following code checks if the Person class has the properties ‘name’ and ‘birthdate’. If the properties exist, it’s shows the value. If not, a message:

<!DOCTYPE html>
<html>
<head>
<title>Javascript Reflection</title>
<script type="text/javascript">
//<![CDATA[
function Person (name, salary) {
    this.name = name;
    this.salary = salary;
}

var person = new Person('Vera', 1500);

var name = person["name"];
if (name !== undefined) {
  document.writeln("name: " + name);
}

document.write("<br />");

var birthdate = person["birthdate"];
if (birthdate === undefined) {
  document.writeln("Birthdate is not a property of Person");
}
//&gt;</span>
<span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre>
</div>

<p>Which outputs:</p>

<div class="highlighter-rouge"><pre class="highlight"><code>name: Vera
Birthdate is not a property of Person`
</code></pre>
</div>

<p>We can also use reflection to iterate the properties of Person:</p>

<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;title&gt;</span>Javascript Reflection<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
<span class="c1">//&lt;![CDATA[</span>
<span class="kd">function</span> <span class="nx">Person</span> <span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">salary</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">;</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">salary</span> <span class="o">=</span> <span class="nx">salary</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">var</span> <span class="nx">person</span><span class="o">=</span><span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="s1">'Vera'</span><span class="p">,</span> <span class="mi">1500</span><span class="p">);</span>

<span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="k">in</span> <span class="nx">person</span><span class="p">)</span> <span class="p">{</span>
  <span class="nb">document</span><span class="p">.</span><span class="nx">writeln</span><span class="p">(</span><span class="nx">i</span><span class="o">+</span><span class="s2">"="</span><span class="o">+</span><span class="nx">person</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
<span class="p">}</span>
<span class="c1">//
>
</script>
</head>
<body>
</body>
</html>

Which outputs:

name=Vera salary=1500