Call, apply and bind in JS

Time:2021-5-6

Call and apply

call

1. Usage:foo.call(obj, arg1, arg2, ...) -> It is mainly used to change the direction of this

function foo(year, place) {
  console.log(this.name+" is "+year+" born from "+place);
}
window.name = 'syz';
const obj = {
  name: 'syc'
}
foo(1995, 'china'); // syz is 1995 born from china
foo.call(obj, 1995, 'china'); // syc is 1995 born from china

First of all, we need to know that this in each function is bound when it is called, and where this points to depends entirely on the calling position of the function. For example, above, we implemented it firstfoo()Based on the location where we call this function, if we run it in the browser (generally), this points to window, so this. Name = SYZ;
If we want this. A = obj. Name, we can use call to explicitly bind the point of this.

apply

1. Usage:obj.apply(thisObj, [arg1, arg2, ...]) -> It is mainly used to change the direction of this

function foo(year, place) {
  console.log(this.name+" is "+year+" born from "+place);
}
window.name = 'syz';
const obj = {
  name: 'syc'
}
foo(1995, 'china'); // syz is 1995 born from china
foo.apply(obj, [1995, 'china']); // syc is 1995 born from china

The difference between the apply method and the call method is that the second parameter in apply accepts an array. When the number of parameters of the function is not clear, you can use apply to change the direction of this, which is similar to the extension operator...It’s a good effect.

The function of call and apply

1、An important function is to expand the scope of function;

window.color = "red";
let o = {
    color: "blue"
};
function sayColor() {
    console.log(this.color);
}
sayColor(); //red
sayColor.call(this); // Red because this function is called in the global environment and points to window by default
sayColor.call(window); // Red this points to window
sayColor.call(o); // Blue this points to the O object

The biggest advantage of using call and apply to expand the scope is that the object does not need to have any coupling relationship with the method, and the caller controls the direction of this to realize different functions.

bind

1. Usage:foo.bind(obj, arg1, arg2, ...) -> Returns a function that permanently changes the direction of this;

function foo(year, place) {
  console.log(this.name+" is "+year+" born from "+place);
}
window.name = 'syz';
const obj = {
  name: 'syc'
}
foo(1995, 'china'); // syz is 1995 born from china
let haha = foo.bind(obj, 1995, 'china'); 
haha(); // syc is 1995 born from china

Bind is similar to call, but call and apply will be executed immediately, and bind is the function that returns the binding of this (change the direction of this permanently, and the original function remains unchanged)

The differences among apply, call and bind

  • All of them can change the direction of this;
  • The first parameter of the three is the object to which this points. If there is no such parameter or the parameter is undefined or null, it points to the global window by default.
  • All three can pass parameters, but call and bind are parameter lists, and apply is arrays.
  • Bind is a function after returning to bind this, which is convenient for calling later. Apply and call are executed immediately.

Recommended Today

Looking for frustration 1.0

I believe you have a basic understanding of trust in yesterday’s article. Today we will give a complete introduction to trust. Why choose rust It’s a language that gives everyone the ability to build reliable and efficient software. You can’t write unsafe code here (unsafe block is not in the scope of discussion). Most of […]