Functions in Javascript

Tags:

<!-- Based on the code from
     Douglas Crockford, Chap 4. Functions, Javascript: The Good Parts, Oreilly.
     Print ISBN: 978-0-596-51774-8 | ISBN 10: 0-596-51774-2
     Ebook ISBN: 978-0-596-15873-6 | ISBN 10: 0-596-15873-4 -->
<html>
  <body>
    <pre>
      <script>
        // Method 
        document.writeln('Method call');
        var obj = {
          value: 0,
          increment: function(inc) {
            this.value += typeof inc == 'number' ? inc : 1;
          }
        }
        obj.increment();
        document.writeln(obj.value);  // 1
        obj.increment(2);
        document.writeln(obj.value);  // 3

        // Function 
        document.writeln('Function call');
        var value = 0;
        function f() {
          this.value += 1;
        }
        document.writeln(value);  // 0
        f();
        document.writeln(value);  // 1

        // Workaround for 'this' in a nested function of a method.
        document.writeln('Nested function call');
        var obj2 = {
          value: 0,
          increment: function() {
            var that = this;  // points to obj2
            function h() {
              that.value += 1;
              // 'this' inside h() points to global namespace.
            }
            h();
          }
        }
        document.writeln(obj2.value);  // 0
        obj2.increment();
        document.writeln(obj2.value);  // 1

        // Constructor and the use of prototype.
        document.writeln('Constructor and prototype');
        var Foo = function(string) {
          this.name = string;
        }
        Foo.prototype.print_name = function() {
          document.writeln(this.name);
        }
        var f = new Foo("foo");
        f.print_name();  // "foo"

        // Apply
        document.writeln('Apply');
        var obj3 = {
          val:1,
          bar: function() {
            document.writeln(this.val);
          }
        }
        var obj4 = {
          val: 2
        }
        obj3.bar.apply(obj4);  // 2
      </script>
    </pre>
  </body>
</html>

prototype and apply looks very interesting. It feels like some lego blocks that I can assemble with great flexibility.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *