Introduction to the use of apply() method and call() method in JavaScript_javascript skills

1. Each function contains two non-inherited methods: apply() and call().
2. They have the same purpose, they all call functions in a specific scope.
3. It is different in terms of receiving parameters. apply() receives two parameters, one is the scope in which the function runs (this), and the other is the parameter array.
The first parameter of the call() method is the same as the apply() method, but the parameters passed to the function must be listed.
Example 1:

Copy code The code is as follows:

window.firstName = "diz ";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
console.log("Hello " this.firstName " " this.lastName, " glad to meet you!");
}
HelloName.call(window); //huo .call(this);
HelloName.call(myObject );

The running result is:
Hello diz song glad to meet you!
Hello my Object glad to meet you!
Example 2:

Copy code The code is as follows:

function sum(num1, num2) {
return num1 num2;
}
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,20])); //30

Analysis: In Example 1, we found that the real use of apply() and call() is to expand the scope in which the function runs. If we want to use traditional methods to achieve it, please see below Code:

Copy code The code is as follows:

window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
console.log("Hello " this.firstName " " this.lastName, " glad to meet you!");
}
HelloName(); //Hello diz song glad to meet you!
myObject.HelloName = HelloName;
myObject. HelloName(); //Hello my Object glad to meet you!

Looking at the red code, we found that in order to make the scope of the HelloName() function on the object myObject, we need to dynamically Create the HelloName property of myObject, which serves as a pointer to the HelloName() function. In this way, when we call myObject.HelloName(), the this variable inside the function points to myObject, and other internal public properties of the object can be called.
By analyzing Example 2, we can see the real application of the call() and apply() functions. In actual projects, they need to be handled flexibly according to actual conditions!
A small question: Take another look at the this variable when defining a function in the function

Copy the code The code is as follows:

function temp1() {
console.log(this); //Object {}
function temp2() {
console.log(this); //Window
}
temp2();
}
var Obj = {};
temp1.call(Obj); //See the green comment above for the running results! ! ! !

The execution result is the same as the following:

Copy the code The code is as follows:

function temp1() {
console.log(this);
temp2();
}
function temp2() {
console.log(this);
}
var Obj = {};
temp1.call(Obj);

4. bind() method
Support browsing of this method The devices include IE9, Firefox4, Safari5.1, Opera12, and Chrome. It is a method belonging to ECMAScript5. Let’s look at the example directly:

Copy code The code is as follows:

window.color = " red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
var OSayColor = sayColor.bind(o );
OSayColor(); //blue

Here, sayColor() calls the bind() method, passes in the o object, and returns the OSayColor() function, in OSayColor() , the value of this is the o object.