在Javascript中，“ this.something”是否查找“ something”的作用域链？

Question

Here's what I mean. I'm practicing my object-oriented Javascript (I learn by practice), created the following class for fun

function Funcstack ( ) 
{
      this.stack = []; // stack/array of functions w/ no params

      this.pushFunction = function ( f ) 
      {
         // f: function w/ no params
         this.stack.push(f);
      }

      this.popFunction = function ( f )
      {
        // f: function w/ no params   
          var n = this.stack.length;
          if (n > 0) this.stack.splice(n - 1, 1);
      }
      this.executeFunctions = function ( ) 
      {
          // execute functions from top to bottom of stack
          for ( var i = (this.stack.length - 1); i >= 0; --i )
          {
             var thisfunc = this.stack[i];    
             thisfunc();
          }
      }
}

var fs = new Funcstack();
fs.pushFunction(function() { console.log('z'); });
fs.pushFunction(function() { console.log('y'); });
fs.pushFunction(function() { console.log('x'); });
fs.executeFunctions(); // should print 'xyz'

and was surprised that it worked. The main reason is because I thought that, for example, in

      this.pushFunction = function ( f ) 
      {
         // f: function w/ no params
         this.stack.push(f);
      }

the body of the function wouldn't recognize this.stack because this in the particular context refers to the invoking function pushFunction which doesn't have a member named stack ! So am I correct in thinking that it looked up the scope chain? That seems to contradict the whole idea of this , though ... What's the point of it?

Answer 1

The short answer is "No". An execution context's this is always resolved in the current execution context, therefore it has nothing to do with scope. With broad arrow functions, it's set to the same value as the outer execution context.

A function's this is set by how the function is called or by setting with bind . It's not set lexically (where the call is in the code) or where the function is called from.

Where this is an object (always in non–strict mode) then its properties are resolved in the same way any object's properties are resolved, firstly on itself, then on its [[Prototype]] chain. Where a function is called as a method of an object:

fs.executeFunctions();

then the base object (fs) is set to this within the function. Therefore, when this.stack.length is resolved, this references the fs instance and executeFunctions is resolved as a property of fs .

Answer 2

The reason it works is because of the calling context.

this.stack = []; // <--- is an instance property ( member ) of any instance of Funstack

When you invoke "pushFunction" using "fs" ( the instance reference ) to reference

"this" ( the context ) becomes whatever "fs" object is..

If it still unclear, try reading more on javascript's "calling context".

Answer 3

When you say: var fs = new Funcstack(); , you're declaring an object that is an instance of the class Funcstack . Note that inside the constructor , you are declaring some properties and methods of it.

So, the keyword this in all those methods will refer to the object you've created. You can change the context by using call , apply or bind if you want, at anytime.

Note that you are declaring the pushFunction as a member of the class by saying: this.pushFunction = function(f) { /* (...) */ } . So, you're creating a method into the class. That's why the this keyword refers to the object that is an instance of that class.

If you declared the function as var pushf = function(f) { /* (...) */ } , and then called that function inside some method of the class Funcstack , you would get the error:

TypeError: this.stack is undefined

Take a look at the example below.

 function Funcstack() { this.stack = []; // stack/array of functions w/ no params var pushf = function _pushFunction(f) { this.stack.push(f); } this.pushFunction = function(f) { // f: function w/ no params pushf(f); } this.popFunction = function(f) { // f: function w/ no params var n = this.stack.length; if (n > 0) this.stack.splice(n - 1, 1); } this.executeFunctions = function() { // execute functions from top to bottom of stack for (var i = (this.stack.length - 1); i >= 0; --i) { var thisfunc = this.stack[i]; thisfunc(); } } } var fs = new Funcstack(); fs.pushFunction(function() { console.log('z'); }); fs.pushFunction(function() { console.log('y'); }); fs.pushFunction(function() { console.log('x'); }); fs.executeFunctions(); // should print 'xyz'