Detailed explanation of usage examples of two non-inherited methods in JavaScript

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. The parameters received are different. 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:

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:

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 apply() and The real use of call() is to expand the scope in which the function runs. If we want to use the traditional method to achieve it, please see the following code:

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!

See the red code, we find that, To make the scope of the HelloName() function be on the object myObject, we need to dynamically create the HelloName attribute of myObject. This attribute points to the HelloName() function as a pointer, so that when we call myObject.HelloName(), this inside the function The variable 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 the function in the function

function temp1() { 
console.log(this); //Object {} 
function temp2() { 
console.log(this); //Window 
} 
temp2(); 
} 
var Obj = {}; 
temp1.call(Obj); //运行结果见上面的注释！！！！

The execution result is the same as the following:

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

The above is the detailed content of Detailed explanation of usage examples of two non-inherited methods in JavaScript. For more information, please follow other related articles on the PHP Chinese website!