Shulou(Shulou.com)05/31 Report--

This article mainly explains how to use the methods of bind, call and apply in JavaScript. The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use bind, call and apply methods in JavaScript.

The basic use of call is var ary = [12,23,34]; ary.slice ()

The execution process of the above two simple lines of code is as follows: ary this example finds the slice method on Array.prototype through the prototype chain lookup mechanism, makes the found slice method execute, and intercepts the ary array in the process of executing the slice method.

Note: before the slice method executes, there is a process of looking up on the prototype (not found in the current instance, and then based on the prototype chain).

When we know that an object calling method will have a lookup process, let's take a look at:

Var obj = {name:'iceman'}; functionfn () {console.log (this); console.log (this.name);} fn (); / / this-- > window// obj.fn (); / / Uncaught TypeError: obj.fn is not a functionfn.call (obj)

The role of the call method: first find the call method, and finally find the call method in the prototype of Function through the prototype chain, and then let the call method execute. When executing the call method, let the this in the fn method become the first parameter value obj, and finally execute the fn function.

Once we know the principle of this prototype, we can analyze and implement these three methods.

Differences among bind, call and apply

Both call and apply are designed to solve the problem of changing the direction of this. The functions are all the same, but the ways of transmitting parameters are different.

In addition to the first parameter, call can receive a list of parameters, and apply accepts only one array of parameters

Let a = {value: 1} function getValue (name, age) {console.log (name) console.log (age) console.log (this.value)} getValue.call (a, 'yck',' 24') getValue.apply (a, ['yck',' 24'])

Bind works the same as the other two methods, except that this method returns a function. And we can achieve Corey through bind.

How to implement a bind function

For the implementation of the following functions, you can think from several aspects

If the first parameter is not passed in, the default is window

Changed the this point so that the new object can execute the function. So can the idea be changed to add a function to the new object and then delete it after execution?

Yes, of course, so we can write like this:

Function.prototype.myBind = function (context) {if (typeof this! = = 'function') {throw new TypeError (' Error')} var _ this = this var args = [... arguments] .slice (1) / / returns a function return function F () {/ / because a function is returned, we can new F () Therefore, it is necessary to judge if (this instanceof F) {return new _ this (... args,... arguments)} return _ this.apply (context, args.concat (.. context,...arg)} how to implement a call function Function.prototype.myCall = function (context,...arg) {var context = context | | window / / add an attribute / / getValue.call (a, 'yck') to context '24') = > a.fn = getValue / / use symbol to select a unique value as the newly added attribute let symbol = new Symbol () Context [symbol] = this; let result = context [symbol] (... arg) / / remove the added function delete context [symbol] return result} how to implement an apply function

The principle of apply implementation is basically similar to that of call implementation, except that the value is passed in a different way.

Function.prototype.myApply = function (context,arg) {var context = context | | window / / add an attribute to context / / getValue.call (a, 'yck',' 24') = > a.fn = getValue / / use symbol to select a unique value as the newly added attribute let symbol = new Symbol (); context [symbol] = this; let result = context [symbol] (arg) / / remove the added function delete context [symbol] return result}

After testing the above functions, it passed perfectly.

Const obj = {name: 'xiaoxiao', getName: function (arg) {console.log (`I am in ${this.name}, and I have ${arg} `in it);} obj.getName ([0huahua' 0]); / / I am const obj2 = {name:' huahua'} / / pass a different obj.getName.myCall (obj2,1,1,1,1,1,1) in xiaoxiao Obj.getName.myBind (obj2) (2 beacon 2, 2); obj.getName.myApply (obj2, [3pje 3, 3)); Thank you for your reading, this is the content of "how to use bind, call and apply methods in JavaScript". After the study of this article, I believe you have a deeper understanding of how to use bind, call and apply methods in JavaScript, and the specific use needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.