series

Front – Type judgment

Front end Stereotype – prototype chain

Front end octuwen – Inheritance

New nature

The new operator actually returns an object-instance object

Principle:

  • Create an empty object
  • 2, the object’s __proto__ points to the function’s prototype object
  • 3. Change this to point to the generated object
  • 4. Return the generated object

Code implementation:

Function copyNew(Fn) {return function () {// Create a new object and point its implicit prototype to the constructor prototype let obj = {__proto__ : Prototype} // call(obj,... Arguments) // Return obj}}Copy the code

call

Description: The essence is to put a function into an object, and then call the function in the object, change the direction of this

Principle:

  • 1. Place the original function in the upper-afternoon object passed in
  • 2. Get all the arguments passed by the original function
  • 3. The original function stored in the context is passed in and called
  • 4. Delete the original function temporarily stored in the middle of the afternoon
  • Returns the result of calling the original function

Code implementation:

Function.prototype.newCall = function(context) { if (typeof this ! = = 'function') {throw new Error (' not function ')} / / without context, pointing to the Windows context = context | | Windows; // Put the current function in context context.fn = this; / / get all function arguments es5 writing Array. The prototype. Slice. The call (the arguments, 1); let args = [...arguments].slice(1); let result = context.fn(... arg); delete context.fn return result; }Copy the code

apply

Note: Essentially the same as call, the difference is that the parameters are passed in an array

Principle:

  • 1. Place the original function in the upper-afternoon object passed in
  • 2. Get all the arguments passed by the original function
  • 3, determine whether there are parameters, call the original function stored in the context, if there are parameters, the structure passed
  • 4. Delete the original function temporarily stored in the middle of the afternoon
  • Returns the result of calling the original function

Code implementation:

Function.prototype.newApply = function(context) { if (typeof this ! = = 'function') {throw new Error (' not function ')} / / without context, pointing to the Windows context = context | | Windows; // Put the current function in context context.fn = this; let result; If (arguments[1]) {result = context.fn(... arguments[1]); } else { result = context.fn(); } delete context.fn return result; }Copy the code

bind

Description: Returns an original function that changed the direction of this

Definition:

  • The bind method creates a new function. When the new function is called, the first argument to bind will be its runtime this(which cannot be overridden), and the subsequent sequence of arguments will be passed as its arguments before the arguments passed.
  • New functions can also create objects using the new operator: this behavior is like treating the original function as a constructor, and the supplied this value is ignored.

Principle:

  • 1. Save a copy of the current function
  • 2. Get all the parameters passed in
  • Return a new function
  • 4. The new function checks whether the new is used
  • 5. In non-new cases, use apply to change this, passing in all parameters
  • In the case of new, return an instance of the original function
  • Or use a transfer function to inherit the prototype of the original function and assign the instanceof the transfer function to the prototype of the returned function. When the return function is called, this determines whether the prototype of the transfer function is on its prototype chain through instanceof, then return the original function and pass in all parameters. Use the new keyword outside. The result is the same as the realization

Code implementation one:

Function.prototype.newBind = function(context) { if (typeof this ! == 'function') { throw new Error('not function') } const _self = this; const args = [...arguments]; return function F() { if(this instanceof F) { return new _self(... args, ... arguments) } else { return _self.apply(context||windows, [...args,...arguments]) } } }Copy the code

Code implementation two:

Function.prototype.newBind1 = function (context) { let self = this; let args = Array.prototype.slice.call(arguments, 1); const cacheFn = function () {}; const newFn = function () { const newArgs = [...args, ...arguments]; if (this instanceof cacheFn) { return self.apply(this, newArgs) } else { return self.apply(context, newArgs) } }; cacheFn.prototype = self.prototype; newFn.prototype = new cacheFn(); Return newFn}Copy the code

instanceof

Prototype chain search

Implementation:

function instanceof(left, right) { let leftValue = left.__proto__ let rightValue = right.prototype while (true) { if (leftValue === null) { return  false } if (leftValue === rightValue) { return true } leftValue = leftValue.__proto__ } }Copy the code