First, bind features

  1. The first argument is passed as this to the function calling it (bind can pass several arguments).
  2. If the first argument passes the underlying data type, the this of the calling function points to the wrapper class instantiation object of the underlying data type.
  3. If the first argument is null or undefined, the function that calls this points to the window.
  4. The second argument after bind is a list of arguments to the function that called it.
  5. The bind method returns a new method that is currified and can still pass arguments, but this cannot be changed by call, apply, or bind.
  6. The new method returned by bind, if instantiated with new, invalidates the object to which this was bound by bind. This points to the newly instantiated object and can use properties or methods from the original method prototype chain.

Ii. Preliminary Simulation implementation (new not implemented)

After the new method is instantiated, this does not point to the newly instantiated object, which does not implement bind’s sixth feature.

// This will point to the object const obj = {name: Function sayHello(age, sex, hobby) {this.hobby = hobby console.log(" my this points to: ", this); console.log(`Hello, ${this.name}, age: ${age}, sex: ${sex}, hobby: ${hobby}`); } // Test method on the prototype attribute sayHello.prototype.fater = 'dad is Function'; // Use the original bind method const fun = sayhello. bind(obj, 32, 'male'); // instantiate the function returned by bind const f = new fun('female'); // output console.log(' bind returns prototype sayHello property: ', f.ater); / / bind preliminary simulation method -- -- -- -- -- -- -- -- -- -- -- -- -- -- the Function. The prototype. MyBind = Function (object) {/ / record this, need to return to normal after method, after this point to the caller, More about this we can see here: https://blog.csdn.net/Kindergarten_Sir/article/details/109909886 const that = this; // const arg = Array.prototype.slice.apply(arguments, [1]); Const [,...arg] = arguments; const [,...arg] = arguments; Return function () {return function () {return function () {return arguments (); Bind that. Apply (object, [...arg,...arguments]); } // Use custom myBind const newFun = sayhello. myBind(obj, 32, 'male'); Var nf = new newFun('female'); Console. log(' custom myBind returns property on prototype after instantiation using test method sayHello: ', nf.fater)Copy the code

Test results:

3. Improve myBind

Key points:

  1. The previous method returned internally was a normal function, so this satisfies who defined the point to be, so you can use instanceof to check if new is used. Instanceof is used to check if the constructor’s prototype property is present in the prototype chain of an instance object.

  2. Converts an internally returned function to a named function and points the return function’s prototype to the original function’s prototype.

    // This will point to the object const obj = {name: Function sayHello(age, sex, hobby) {this.hobby = hobby console.log(" my this points to: ", this); console.log(`Hello, ${this.name}, age: ${age}, sex: ${sex}, hobby: ${hobby}`); } // Test method on the prototype attribute sayHello.prototype.fater = 'dad is Function'; // Use the original bind method const fun = sayhello. bind(obj, 32, 'male'); // instantiate the function returned by bind const f = new fun('female'); // output console.log(' bind returns prototype sayHello property: ', f.ater); / / perfect simulation method the bind method -- -- -- -- -- -- -- -- -- -- -- -- -- -- the Function. The prototype. MyBind = Function (object) {/ / record this, need to return to normal after the method, after this point to the caller, More about this we can see here: HTTP: / / https://blog.csdn.net/Kindergarten_Sir/article/details/109909886 / / this is a function of call myBind method here. const that = this; // const arg = Array.prototype.slice.apply(arguments, [1]); Const [,...arg] = arguments; const [,...arg] = arguments; Const newFun = function () {const newFun = function () {const newFun = function () { So you can use instanceof to check if you're using new. // If this is instantiated using new, this refers to the new instantiated object. If this is instantiated using new, this refers to the new instantiated object. You point the function's this to the object passed through myBind. Bind () that. Apply ((this instanceof newFun)? this : object, [...arg, ...arguments]); } // Change the function returned internally to a named function with the prototype of the returned function pointing to the prototype of the original function. newFun.prototype = that.prototype; MyBind const newFun = sayhello. myBind(obj, 18, 'male'); Var nf = new newFun('female'); Console. log(' custom myBind returns property on prototype after instantiation using test method sayHello: ', nf.fater)Copy the code

Test results:



Call’s implementation point is here

The implementation point of Apply is here

If you can help 👍+ attention oh ~~ we learn the front end together.