1. Write a call

Three features of native Call

  1. Change this to point.
  2. To call a call is to call a function. (Can return results)

The implementation code

function person(a,b,c) {
    return {
        name: this.name,
        a: a,
        b: b,
        c: c
    }
}

const egg = {name: 'hello'};

Function.prototype.myCall = function(obj) {
    obj = obj || window
    obj.p = this;
    const newArg = [];
    for (let i = 1; i < arguments.length; i++) {
        newArg.push(arguments[i]);
    }
    
    constresult = obj.p(... newArg);delete obj.p;
    return result;
}

person.myCall(egg,'thumb up'.'collection'.'forward')
person.call(egg,'thumb up'.'collection'.'forward')
Copy the code

2. Apply handwriting

Apply is similar to Call except that apply accepts only two arguments, one pointing to this and the other to an array.

Several features of native Apply

  1. Change this to point.
  2. Call the function and accept the return value.

The implementation code

function person(a,b,c) {
    return {
        name: this.name,
        a: a,
        b: b,
        c: c
    }
}

const egg = {name: 'hello'};

Function.prototype.myApply = function(obj,arr) {
    obj.p = this;
    let result;
    if(! arr) { result = obj.p(); }else{ result = obj.p(... arr); }delete obj.p;
    return result;
}

person.myApply(egg,['thumb up'.'collection'.'forward'])
person.apply(egg,['thumb up'.'collection'.'forward'])
Copy the code

3. Write a bind

What native Bind does

  1. Will return a function. (This should return a function that changes this and takes an argument.)
  2. It changes the this point.
  3. The native bind method returns a function that invalidates this if it creates an instance with new. This is not invalidated without calling new.

Matters needing attention

  1. Arguments are actually objects, not arrays.
  2. Using Array. Prototype. Slice. The call (the arguments, 1) : you can get all the elements of the arguments including after the second element, and put it in to the Array.
  3. The following solution involves the knowledge of the prototype chain, which is worth pondering over many times.

The implementation code

function person(a,b,c) {
    console.log(this.name);
    console.log(a,b,c);
}

const egg = {name: 'hello'};

Function.prototype.myBind = function(obj) {
    let that = this;
    let arr = Array.prototype.slice.call(arguments.1);
    // Define an empty function as a bridge
    let empty = function() {}
    let newf = function () {
        let arr2 = [].slice.call(arguments);
        let arrSum = arr.concat(arr2);
        // Determine whether new is called
        if (this instanceof empty) {
            that.apply(this,arrSum);
        } else {
            that.apply(obj,arrSum);
        }
    }

    empty.prototype = that.prototype;
    newf.prototype = new empty;
    return newf;
}

const bibi = person.myBind(egg,'thumb up'.'pay')
// const b = new bibi(' charge ')
bibi('charging')
// person. Apply (egg,[' like ',' favorites ',' forward '])
Copy the code
  • CodeSandBox online code

Refer to the link

Native JavaScript implements Call, Apply, and bind-Web

revelation

  • First of all, call, apply and bind seem simple, but actually they need strong basic skills.
  • This article needs to repeatedly read, figure out, refueling, hope to see several times!