1. Implement callstep:
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 applyFunction.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 bindThe 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 applyFunction.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 applyCombine 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:
|
<<: How to reset MySQL root password under Windows
>>: How to use tcpdump to capture packets in Linux system
Copy code The code is as follows: Difference betw...
After installing the latest Windows 10 update, I ...
Table of contents 1. The relationship between red...
Table of contents 1. Shallow cloning 2. Deep clon...
Table of contents 1. v-for: traverse array conten...
Remark: The amount of data in this article is 1 m...
I divide the whole process into four steps: Downl...
A few days ago, I watched a video of a foreign gu...
The emergence of jQuery has greatly improved our ...
Problem description: Copy code The code is as fol...
<iframe src=”test.jsp” width=”100″ height=”50″...
This article shares the specific implementation c...
Source of the problem As we all know, all network...
1. Introduction When filtering unknown or partial...
The following questions are all based on the Inno...