How to implement call, apply and bind in native js

How to implement call, apply and bind in native js

1. Implement call

step:

  1. Set the function as a property of the object;
  2. Assign this to the function and pass in the given parameters to execute the function;
  3. Delete this function after execution;
  4. If no parameters are passed in, the default is to point to window;
Function.prototype.mycall = function (context, ...args) {
    //Judge whether it is a function. If it is not a function, an error will be reported if (typeof this !== "function") {
        throw new Error("not a function");
    }
    context = context || window;
    context.fn = this;
    const res = context.fn(...args);
    delete context.fn;
    return res;
}

Test code:

var name = "Li Hui", age = 25;
var obj = {
    name: "Zhou Guo",
    objAge: this.age,
    myFun: function (fm, to) {
        console.log(`name: ${this.name}, age: ${this.age}, from: ${fm}, to: ${to}`)
    }
};
var person = {
    name: "younger brother",
    age: 12,
};

Function.prototype.mycall = function (context, ...args) {
    //Judge whether it is a function. If it is not a function, an error will be reported if (typeof this !== "function") {
        throw new Error("not a function");
    }
    context = context || window;
    context.fn = this;
    const res = context.fn(...args);
    delete context.fn;
    return res;
}

obj.myFun.mycall(person, "Chengdu", "Renshou"); //Name: younger brother, age: 12, from: Chengdu, to: Renshou

2. Implement apply

Function.prototype.myApply = function (context, ...args) {
    //Judge whether it is a function. If it is not a function, an error will be reported if (typeof this !== "function") {
        throw new Error("not a function");
    }
    context = context || window;
    context.fn = this;
    args = args && args[0] || [];
    const result = context.fn(...args);
    delete context.fn;
    return result;
}

Test code:

obj.myFun.myApply(person, ["Chengdu", "Renshou"]); //Name: younger brother, age: 12, from: Chengdu, to: Renshou

3. Implement bind

The bind() method mainly binds a function to an object. bind() will create a function, and the value of the this object in the function body will be bound to the value of the first parameter passed into bind().

Method 1: Using apply

Function.prototype.myBind = function () {
    let self = this; //Save the original function let context = [].shift.call(arguments); //Save the this context that needs to be bound let args = [...arguments]; //Convert the remaining parameters passed in to an array return function () { //Return a new function self.apply(context,[].concat.call(args,[...arguments]));
    }
}

ES6 simplifies it:

Function.prototype.myBind = function (context, ...args1) {
        return (...args2) => { //Return arrow function, this is bound to the function object that calls this method context = context || window;
            return this.apply(context, args1.concat(args2));//Merge parameters}
    }

Method 2: Not using call and apply

Combine the above code with the js handwritten apply code:

Function.prototype.myBind = function (context, ...args1) {
    return (...args2) => { //Return arrow function, this is bound to the function object that calls this method context = context || window;
        context.fn = this;
        const args = args1.concat(args2);
        const res = context.fn(...args);
        delete context.fn;
        return res;
    }
}

Test code:

obj.myFun.myBind(person, "Chengdu", "Renshou")(); //Name: younger brother, age: 12, from: Chengdu, to: Renshou

The above is the details of how native js implements call, apply and bind. For more information about js implementation of call, apply and bind, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Example code for using JS to simply implement the apply, call and bind methods
  • Detailed explanation of the implementation principles of call, apply, and bind in JavaScript
  • How to implement a simple version of call, apply, bind using 50 lines of javascript code
  • Detailed explanation of the code for implementing call, bind, and apply in Javascript

<<:  How to reset MySQL root password under Windows

>>:  How to use tcpdump to capture packets in Linux system

Recommend

Common CSS Errors and Solutions

Copy code The code is as follows: Difference betw...

Detailed explanation of the relationship between React and Redux

Table of contents 1. The relationship between red...

A brief talk about cloning JavaScript

Table of contents 1. Shallow cloning 2. Deep clon...

Detailed explanation of Vue's list rendering

Table of contents 1. v-for: traverse array conten...

How to quickly create tens of millions of test data in MySQL

Remark: The amount of data in this article is 1 m...

Alibaba Cloud Server Linux System Builds Tomcat to Deploy Web Project

I divide the whole process into four steps: Downl...

HTML+Sass implements HambergurMenu (hamburger menu)

A few days ago, I watched a video of a foreign gu...

About IE8 compatibility: Explanation of the X-UA-Compatible attribute

Problem description: Copy code The code is as fol...

iframe parameters with instructions and examples

<iframe src=”test.jsp” width=”100″ height=”50″...

HTML drawing user registration page

This article shares the specific implementation c...

Summary of pitfalls in importing ova files into vmware

Source of the problem As we all know, all network...

Details about the like operator in MySQL

1. Introduction When filtering unknown or partial...

Summary of some small issues about MySQL auto-increment ID

The following questions are all based on the Inno...