“Perception: 🌟🌟🌟🌟🌟“

“Taste: Tofu with crab roe“

“Cooking time: 5 minutes“

This article has been included in the front-end canteen namesake warehouse Github github.com/Geekhyt, welcome to the canteen, if you think the food and wine is delicious, reward a Star for the canteen boss is a great encouragement.

The interviewer in front of me was a bit unfathomable, I could tell by his silvery hair and clean gait. As usual, I was prepared to spend three minutes giving the interviewer the elaborate introduction I had prepared the night before. I am confident and proud to tell about the efforts I have put into the past project, the results of the optimization I have done, and how much revenue I have increased for the company…

Obviously, the interviewer was very interested in the numbers I said, his mouth slightly turned up, after some detailed discussion and technical line. The interviewer took out a piece of paper.

Write code.

The interviewer who focuses on the basics is the right interviewer, and to conquer him, I wrote the code while explaining how to do it.

Write a call

The difference between call and apply: The call method receives a list of arguments, and the apply method receives an array of arguments.

  • 1.contextUse as you existcontext, it iswindow
  • 2. UseObject(context) 将 contextConvert to object and passcontext.fn 将 thisPoint to thecontext
  • 3. Loop parameters, pay attention to from1To start, the first0The first is the context, and the second is the parameters we need
  • 4. Set the parameter to a stringpush 进 args
  • 5. Array is called when string and array are concatenatedtoStringMethod so that the parameters can be passed in one by one and passedevalperform
  • 6. Delete the results before returningfn
Function.prototype.call = function(context) {

    context = context ? Object(context) : window;

    context.fn = this;

    let args = [];

    for (let i = 1; i < arguments.length; i++) {

        args.push('arguments['+ i +'] ');

    }

    let res = eval('context.fn('+ args +') ');

    delete context.fn;

    return res;

}

Copy the code

Handwritten apply

  • 1.applyNo need to loop through the argument list, passed inargsIs an array
  • 2. ButargsThis parameter is optional. If not passed, it is executed directly
Function.prototype.apply = function(context, args) {

    context = context ? Object(context) : window;

    context.fn = this;

    if(! args) {

        return context.fn();

    }

    let res = eval('context.fn('+ args +') ');

    delete context.fn;

    return res;

}

Copy the code

Write a bind

  • 1.bindArguments to can be passed in both the binding and the call
  • 2.bindArgsIs the parameter passed in the binding except for the first parameter,argsIs the parameter passed in when the call is made
  • 3. If usednewOperator to construct the binding functionthisPointing.thisPoints to the current instance
  • Through 4.FnLink prototypes, like thisfBoundThe parent class can be accessed through the prototype chainFnThe properties of the
Function.prototype.bind = function(context) {

    let that = this;

    let bindArgs = Array.prototype.slice.call(arguments.1);

    function Fn () {};

    function fBound(params) {

        let args = Array.prototype.slice.call(arguments);

        return that.apply(this instanceof fBound ? this : context, bindArgs.concat(args));

    }

    Fn.prototype = this.prototype;

    fBound.prototype = new Fn();

    return fBound;

}

Copy the code

Write a new

  • 1.ConstructorisnewWhen the first argument passed in, the restargumentsIs the other parameter
  • 2. Useobj.__proto__ = Constructor.prototypeInherit the method on the prototype
  • 3. Will the restargumentsTo pass toContructor, the bindingthisPointing toobjAnd perform
  • 4. If the constructor returns a reference type, return that reference type, otherwiseobj
const myNew = function() {

    let Constructor = Array.prototype.shift.call(arguments);

    let obj = {};

    obj.__proto__ = Constructor.prototype;

    let res = Constructor.apply(obj, arguments);

    return res instanceof Object ? res : obj;

}

Copy the code

Handwritten instanceOf

  • 1. InleftTo find out if there is a prototype equal toprototype
  • 2. Determine the boundary conditions ifleft === nullThat is, find the head and not find the returnfalse.right === left, that is, find returntrue
  • 3.left = left.__proto__, keep looking up
const myInstanceof = function(left, right) {

    right = right.prototype;

    left = left.__proto__;

    while (true) {

        if (left === null) {

            return false;

        }

        if (right === left) {

            return true;

        }

        left = left.__proto__;

    }

}

Copy the code

Handwritten Object. The create

  • Create an empty constructorFAnd then letF.prototypePoint to theobjAnd finally returnFAn instance of the
const myCreate = function (obj) {

  function F() {};

  F.prototype = obj;

  return new F();

}

Copy the code

❤️ love triple strike

1. When you see this, please click a “like” to support it. Your “like” is the motivation for my creation.

2. Pay attention to the public number front canteen, “your front canteen, remember to eat on time”!

3. This article has been included in the front canteen Github github.com/Geekhyt, for a small Star, thank Star.