mozilla's bind function question

前端 未结 2 1273
死守一世寂寞
死守一世寂寞 2020-11-29 05:16

Had a question about a implementation of bind function that I found on Mozilla\'s site. For the most part it makes sense to me, but I cant figure out what this check is for

相关标签:
2条回答
  • 2020-11-29 06:01

    Its allows you to call the bound function as a constructor without being bound to the original object. In other words the "bound" function will still work just like the original, unbound version if you call it with new.

    Here's an example:

    var obj = {};
    
    function foo(x) {
        this.answer = x;
    }
    var bar = foo.bind(obj);   // "always" use obj for "this"
    
    bar(42);
    console.log(obj.answer);   // 42
    
    var other = new bar(1);    // Call bar as a constructor
    console.log(obj.answer);   // Still 42
    console.log(other.answer); // 1
    

    How it works

    To simplify the explanation, here's a simplified version of the code that only binds this and doesn't handle arguments or a missing obj parameter:

    Function.prototype.bind = function( obj ) {
      var self = this,
      nop = function () {},
      bound = function () {
        return self.apply( this instanceof nop ? this : obj, arguments );
      };
    
      nop.prototype = self.prototype;
      bound.prototype = new nop();
    
      return bound;
    };
    

    The function that gets returned by Function.prototype.bind behaves differently depending on whether you use it as a function, or a constructor (see Section 15.3.4.5.1 and 15.3.4.5.2 of the ECMAScript 5 Language Specification). The primary difference, is that it ignores the "bound this" parameter when it's called as a constructor (since inside a constructor, this needs to be the newly-created object). So the bound function needs a way to determine how it's being called. For example, bound(123) vs. new bound(123) and set this accordingly.

    That's where the nop function comes in. It's essentially acting as an intermediate "class" so that bound extends nop which extends self (which is the function bind() was called on). That part is set up here:

    nop.prototype = self.prototype;
    bound.prototype = new nop();
    

    When you call the bound function, it returns this expression:

    self.apply( this instanceof nop ? this : obj, arguments ) )
    

    this instanceof nop works by following the prototype chain to determine the if any prototype of this is equal to nop.prototype. By setting nop.prototype = self.prototype and bound.prototype = new nop(), any object created with new bound() will be created with the original prototype from self via bound.prototype. So inside the function call, this instanceof nop (i.e. Object.getPrototypeOf(nop) == nop.prototype) is true and self gets called with this (the newly created object).

    In a normal function call, 'bound()' (without new), this instanceof nop would be false, so obj gets passed as the this context, which is what you would expect on a bound function.

    The reason for using the intermediate function is to avoid calling the original function (in the line bound.prototype = new nop();), which may have side effects.

    0 讨论(0)
  • 2020-11-29 06:10

    I think it's a short notation for (typeof obj != "undefined") ? obj : {}

    That is, if obj is not undefined, return obj, else, return an empty object ({} is an empty object).

    0 讨论(0)
提交回复
热议问题