title: this inside prototype function equal to window instead of object instance
body: <p>In the following code in <code>HeadDirective.prototype.link</code>, <code>this</code> is equal to the global <code>window</code> object rather than the <code>HeadDirective</code> instance. My understanding is that the value of <code>this</code> inside a prototype function is the containing object itself.</p>
  
  <pre class="lang-js prettyprint-override"><code>var HeadDirective = (function () {
      function HeadDirective($rootScope, $compile) {
          this.$rootScope = $rootScope;
          this.$compile = $compile;
          this.restrict = 'E';
      }
      HeadDirective.prototype.link = function (scope, elem) {
          var html = '&lt;link rel="stylesheet" ng-repeat="cssUrl in routeStyles" ng-href="{{cssUrl}}" /&gt;';
          elem.append(this.$compile(html)(scope));
          scope.routeStyles = [];
          this.$rootScope.$on('$routeChangeStart', function (e, next, current) {
              if (next &amp;&amp; next.$$route &amp;&amp; next.$$route.css) {
                  if (!Array.isArray(next.$$route.css)) {
                      next.$$route.css = [next.$$route.css];
                  }
                  angular.forEach(next.$$route.css, function (sheet) {
                      scope.routeStyles.push(sheet);
                  });
              }
          });
          this.$rootScope.$on('$routeChangeSuccess', function (e, next, current) {
              if (current &amp;&amp; current.$$route &amp;&amp; current.$$route.css) {
                  if (!Array.isArray(current.$$route.css)) {
                      current.$$route.css = [current.$$route.css];
                  }
                  angular.forEach(current.$$route.css, function (sheet) {
                      scope.routeStyles.splice(scope.routeStyles.indexOf(sheet), 1);
                  });
              }
          });
      };
      return HeadDirective;
  })();
  
  directives.directive('head', [
      '$rootScope', '$compile', function ($rootScope, $compile) {
          return new HeadDirective($rootScope, $compile);
      }]);
  </code></pre>
  
  <p>The above code was generated from the following TypeScript:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>class HeadDirective implements ng.IDirective {
  
      constructor(private $rootScope: ng.IRootScopeService, private $compile: ng.ICompileService) {}
  
      link(scope: IScope, elem: JQuery): void {
          var html = '&lt;link rel="stylesheet" ng-repeat="cssUrl in routeStyles" ng-href="{{cssUrl}}" /&gt;';
          elem.append(this.$compile(html)(scope));
          scope.routeStyles = [];
          this.$rootScope.$on('$routeChangeStart', (e: ng.IAngularEvent, next?: IRoute, current?: IRoute): any =&gt; {
              if(next &amp;&amp; next.$$route &amp;&amp; next.$$route.css){
                  if(!Array.isArray(next.$$route.css)){
                      next.$$route.css = [next.$$route.css];
                  }
                  angular.forEach(next.$$route.css, (sheet: string) =&gt; {
                      scope.routeStyles.push(sheet);
                  });
              }
          });
          this.$rootScope.$on('$routeChangeSuccess', (e: ng.IAngularEvent, next?: IRoute, current?: IRoute): any =&gt; {
              if(current &amp;&amp; current.$$route &amp;&amp; current.$$route.css){
                  if(!Array.isArray(current.$$route.css)){
                      current.$$route.css = [current.$$route.css];
                  }
                  angular.forEach(current.$$route.css, (sheet) =&gt; {
                      scope.routeStyles.splice(scope.routeStyles.indexOf(sheet), 1);
                  });
              }
          });
      }
  
      restrict = 'E';
  }
  
  directives.directive('head', ['$rootScope','$compile', ($rootScope: ng.IRootScopeService, $compile: ng.ICompileService): ng.IDirective =&gt;{
      return new HeadDirective($rootScope, $compile);
  }]);
  </code></pre>
  
  <p>According to the latest TypeScript language specification:</p>
  
  <blockquote>
    <p>The type of <code>this</code> in an expression depends on the location in which the reference takes place:</p>
    
    <ul>
    <li>In a constructor, <strong>instance member function</strong>, instance member accessor, or instance member variable initializer, <code>this</code> is of the class instance type of the containing class.</li>
    <li>In a static member function or static member accessor, the type of <code>this</code> is the constructor function type of the containing class.</li>
    <li>In a function declaration or a standard function expression, <code>this</code> is of type Any.</li>
    <li>In the global module, <code>this</code> is of type Any.</li>
    </ul>
    
    <p>In all other contexts it is a compile-time error to reference this. </p>
  </blockquote>
  
  <p>The TypeScript language specification is quite clear. Inside a member function (which is compiled into a prototype function), <code>this</code> refers to the class instance. This is obviously not what I'm seeing.</p>
  
  <p>Any ideas? Could Browserify be interfering with <code>this</code>?</p>