'this' object can't be accessed in private JavaScript functions without a hack?

后端 未结 3 1012
北海茫月
北海茫月 2020-12-10 07:09

I was working on a project for a while, trying to figure out what I was doing wrong, when I finally narrowed \"the bug\" down to the fact that the below code doesn\'t work a

3条回答
  •  醉话见心
    2020-12-10 07:38

    Works like this because each function has associated its own execution context.

    However there are other ways to do it, for example:

    Using call or apply to invoke the function:

    function Alpha() {
      this.onion = 'onion';
    
      function Beta() {
        alert(this.onion);
      }
    
      Beta.call(this);
    }
    
    var alpha1 = new Alpha();
    // Alerts 'onion'
    

    The new ECMAScript 5th Edition Standard, introduces a way to persist the function context, the Function.prototype.bind method:

    function Alpha() {
      this.onion = 'onion';
    
      var Beta = function () {
        alert(this.onion);
      }.bind(this);
    
      Beta();
    }
    
    var alpha1 = new Alpha();
    // Alerts 'onion'
    

    We can say that the Beta function is bound, and no matter how you invoke it, its this value will be the intact.

    This method is not widely supported yet, currently only IE9pre3 includes it, but you can include an implementation to make it work now.

    Now let me elaborate about how this works:

    The this value exist on each execution context, and for Function Code is set implicitly when a function call is made, the value is determined depending how the reference if formed.

    In your example, when you invoke Beta();, since it is not bound to any object, we can say that the reference has no base object, then, the this value will refer to the global object.

    Other case happens when you invoke a function that is bound as a property of an object, for example:

    var obj = {
      foo: function () { return this === obj;}
    };
    obj.foo(); // true
    

    As you can see, the reference being invoked obj.bar(); contains a base object, which is obj, and the this value inside the invoked function will refer to it.

    Note: The reference type is an abstract concept, defined for language implementation purposes you can see the details in the spec.

    A third case where the this value is set implicitly is when you use the new operator, it will refer to a newly created object that inherits from its constructor's prototype:

    function Foo () {
      return this; // `this` is implicitly returned when a function is called 
    }              // with `new`, this line is included only to make it obvious
    
    var foo = new Foo();
    foo instanceof Foo; // true
    Foo.prototype.isPrototypeOf(foo); // true
    

提交回复
热议问题