Three ways to modify this point

call

function. Call (who this points to, parameter 1, parameter 2...) calls the function and modifies this point in the function;

  • Execute the call method of the function, which will call the function and modify the this point in the function;
  • The 0th parameter in call represents who this in the function refers to when the current function is executed
  • Other parameters are arguments passed to the function.

Note that when the modification is executed as body, you must use document body

function fn(a,b){
    console.log(this,a,b);
}
//Execute directly. this points to window
console.log("Call the function directly, this point window:");
fn(1,2);//window
 
//Change this point of the current function through call
//Change this point to document
console.log("Calling function call method,change this point document:");
fn.call(document,'a','b');//document 
 
//Change this point to document body
console.log("Calling function call method,change this point document.body:");
fn.call(document.body,'a','b');//body(((0

apply

function. Apply (who does this point to, [parameter 1, parameter 2...]) calls the function and modifies this point in the function

  • The apply method that points to the function will call the function and modify the this point in the function;
  • The 0th parameter in apply represents who this in the function points to during the current execution;
  • The first parameter in apply is an array, which represents the parameters we want to pass to the function; And all parameters can only be placed in one array. When there are multiple arrays, parameters with other values will not be received except the first one

The only difference between apply and call is that the call method directly passes parameters in the method, while apply passes all parameters in the form of array;

Note that when the modification is executed as body, you must use document body

function fn(a,b){
   console.log(this,a,b);
}
//Call directly. this points to window
console.log("Direct call, this point window:");
fn('s','r');

//Call the apply method of the function and change this point to document
console.log("Calling function apply method,change this point document:");
fn.apply(document,['2','4']);

//Call the apply method of the function and change this to point to document body
console.log("Calling function apply method,change this point document.body:");
fn.apply(document.body,['2','4']);

bind

function. Bind (pointing, parameter 1, parameter 2,...) bind this pointing

  • Calling the bind method of the function will return a new function bound to this execution;
  • The 0th parameter is the this point of the new function returned by bind
  • The this point of the returned new function is bound and cannot be changed
  • The this point of the new function has been bound when modifying the this point of the original function. Once bound, it cannot be modified again

Summary: calling the bind method of the function will generate a new function. The bound this point is for the new function. After the new function this point is bound, it can no longer be bound (neither call nor apply); If a new parameter is passed in during the call, the new parameter and the bound parameter will be merged, and the bound parameter will always exist; The this point of the original function has not changed. You can continue to call the bind method to generate a new function, and bind a new this point to the new function at the same time

function fn(a,b){
    console.log(this,arguments);
}
//Call the function directly, and this points to window
console.log("Call the function directly, this point window:");
fn(1,2);//window
 
//bind method using function
console.log("Using functions bind Method to return a new function:");
var fn2 = fn.bind(document,3,4);
console.log(fn2 ==fn);//false the new function is not the same as the old function
 
console.log("Primitive function this point:");
fn(5,6);//The this point of the original function remains unchanged. It is still window, and you can continue to call the bind method
 
console.log("Of the new function this point:");
console.log("If a new parameter is passed in during a new function call, the bound parameter and the newly passed in parameter will be merged:");
fn2(7,8);//3,4,7,8 the this point of the new function is the this point bound by the original function
 
//The this point of the new function is bound when the this point of the original function is modified. Once bound, it cannot be modified again, and the bound parameters cannot be modified again
//Only if a new parameter is passed in when a new function is called, the parameters will be merged twice
console.log("New function this Point to modify the original function this When pointing to, it has been bound. Once bound, it cannot be modified again:");
fn2.call(window,9,0);//Here, even if the this point is changed again, fn2 the this point of the new function will never change again
 
//Call the bind method of fn again
console.log("Call again fn of bind Method to return a new function:");
var fn3 = fn.bind(document.body,'a','b');
console.log(fn3 == fn);
fn3('c','d');

Tags: Javascript Front-end ECMAScript

Posted by simply07 on Fri, 29 Apr 2022 19:34:13 +0300