Some understanding of continuous BIND:

Bind (bind, bind, bind)

Function.prototype.myBind = function(asThis, ... arg) {
    let _this = this;
    if (typeof_this ! = ='function') {
        throw new Error('not a function');
    }
    let newFn = function() {
        console.log('Printed asThis', asThis);// Help understand
        console.log('Printed _this', _this);// Help understand
        return _this.apply(
            newFn.prototype.isPrototypeOf(this)?this : asThis,
            [...arg, ...arguments]
        )
    }
    newFn.prototype = _this.prototype;
    return newFn;
}
Copy the code

In addition

var fNOP = function () {};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
Copy the code

This is to prevent prototype chain tampering. But I didn’t think it was necessary.

Your own test run code:

function fn(age) {
    console.log(arguments);
    console.log(this.name, age);
}

let o1 = { name: 'xiao_ming' },
    o2 = { name: 'xiao_hong' },
    o3 = { name: 'xiao_jun' };

let a = fn.bind(o1, 10);
let b = a.bind(o2, 22);
let c = b.bind(o3, 99);
c(18); //xiao_ming 15
fn.bind(o1, 10).bind(o2, 22).bind(o3, 99)(18); //xiao_ming 10

fn.myBind(o1, 10).myBind(o2, 22).myBind(o3, 99)(18); //xiao_ming 10
Copy the code

The browser prints the following:

The bind() method creates a new function. Bind () takes the first argument to the new function’s this, and the following arguments are passed as the first arguments to the new function. 3. When the new function is running, the original function will be called; 4. Continuous bind generates closures, which is an application of function Currization.fn.bind(o1, 10).bind(o2, 22).bind(o3, 99)(18);Is equivalent to:

let a = fn.bind(o1, 10);
let b = a.bind(o2, 22);
let c = b.bind(o3, 99);
c(18);
Copy the code

When c(18) runs, it calls the b function and passes the arguments 99, 18(bind comes first). Inside the B function, this refers to O3.

When b runs, it calls function A and passes the parameters 22, 99, and 18 to function A. Inside function A, this refers to O2;

When a runs, it will call the fn function and pass the parameters 10, 22, 99, 18 to the fn function. Inside the FN function, this points to o1.

Apply (o1, 10, 22, 99, 18), this refers to o1, and FN receives 10, 22, 99, and 18.

The above implementation of myBind differs from js’s own bind

The test code is as follows:

let a = fn.bind(o1); // The built-in bind
let aa = new a();
let b = fn.myBind(o1); // Bind by yourself
let bb = new b();

console.log(a.prototype); //undefined
console.log(aa.__proto__ === a.prototype); //false
console.log(aa.__proto__ === fn.prototype); //true

console.log(b.prototype); / / {constructor: ƒ}
console.log(bb.__proto__ === b.prototype); //true
console.log(bb.__proto__ === fn.prototype); //true
Copy the code

Produces these differences in their own understanding:

The bind() method creates a new function that is equivalent to a copy of the original, but has no relationship on the prototype chain. The prototype of the new function is undefined

(typeof = ‘function’, prototype = ‘function’, console.log ‘)

An instance of the new function whose __proto__ refers to the prototype of the original function. This instance is generated by the constructor of the original function. So when new is used, bind’s this does not work. New takes precedence over bind.

How to solve the problem of inconsistencies in the implementation of bind?

Reference article:

Handle the front-end “Four Handwriting” at one time

Bind yourself