Understand javascript function calls

Implicit arguments with this

When a function is called, two implicit arguments are passed in addition to the arguments explicitly declared in the function definition: arguments and this.

The arguments parameter

The arguments argument represents the collection of all arguments passed to the function.
Use the arguments.length attribute to get the actual number of arguments passed to the function.
Arguments (arguments[2]); arguments (arguments[2]);
Arguments is an array-like object. You cannot use array methods on arguments objects.
In non-strict mode, the Arguments object is an alias for a function argument, and changing the Arguments object affects the corresponding function argument, and vice versa.
Using arguments as a parameter alias affects code readability and should be avoided. Changing arguments via Arguments does not work in strict mode.

This parameter

This represents the function context, which is the object associated with the function call.
In Java object-oriented languages, this usually refers to an instance of the class that defines the current method.
However, in javascript, calling a function as a method is just one way of calling a function. The this argument is determined by how the function is defined and called

How a function is called

There are four ways to call a function

Called directly as a function; myfunc()
As a method associated on an object, object-oriented programming; obj.myfunc()
Called as a constructor to instantiate an object; new Myfunc()
Through the apply and call methods of functions

Call as a function

Called directly as a function, in non-strict mode, the function context (the value of this keyword) is the global context (the window object). In strict mode, this is undefined.

/* The function definition is called as a function */
function aa(){console.log(this)}
aa();
/* Function expressions are called as functions */
let bb = function(){console.log(this)}
bb();
/* Immediately call function expression is called as a function */
(function(){console.log(this)}) ();Copy the code

Called as an object method

When a function is assigned a property of an object and called by an object property reference, the function is called as a method of the object. The value of this, the function called as an object method, is associated with the object and allows access to other methods and properties of the associated object.

function aa(){return this}
console.log(aa()==window);

var obj1 = {}
obj1.aa = aa;
console.log(obj1.aa()==obj1);

var obj2 = {}
obj2.bb = aa;
console.log(obj2.bb()==obj2);
Copy the code

Called as a constructor

The constructor call is preceded by the keyword new.
The purpose of the constructor is to create and initialize a new object, which is then returned as the constructor value.
Calling a function with the keyword new triggers the following actions:
1. Create a new empty object.
2. This object is passed to the constructor as the this argument and becomes its context;
3. The newly constructed object is the return value of the new operator.
4. If the constructor returns an object, that object is returned as the value of the entire expression, and this passed to the constructor is discarded.
5. If the constructor returns a non-object type, the return value is ignored and the newly created object is returned.

function Ninja(){
  // This represents the Ninja function context
    this.skulk = function(){
      // This denotes the context of the anonymous function
        return this; }}// Skulk is called as an object and returns its associated object
var ninja1 = new Ninja();
var ninja2 = new Ninja();
console.log(ninja1.skulk() == ninja1);
console.log(ninja2.skulk() == ninja2);
// Skulk returns window when called directly after being copied to a variable
var skulk = ninja2.skulk;
console.log(skulk() == window);
Copy the code

Call through apply and call methods

Javascript provides a way to display function calls that specify any object as the context of the function. Every function has apply and call methods. The apply and Call methods set the context of the function.

function juggle(){
    var result = 0;
    for(var n=0; n<arguments.length; n++){
        result+=arguments[n]
    }
    this.result = result;
}

var ninja1 = {};
var ninja2 = {};

juggle.apply(ninja1, [1.2.3.4.5])
juggle.call(ninja2, 1.2.3.4.5.6)

console.log(ninja1.result == 15)
console.log(ninja2.result == 21) 
Copy the code

The Apply and Call functions are similar, with the only difference being how parameters are passed. The first parameter of apply and call serves as the context for the function, and the second parameter of apply is an array containing the parameter values. Call can pass in any number of arguments as arguments to the function.

Summarize the influence of four function invocation methods on this value

If called as a function, in non-strict mode, this refers to the global Window object; In strict mode, this refers to undefined.
As a method call, this usually refers to the invoked object
Called as a constructor, this points to the newly created object.
Called by call or apply, this refers to the first argument of call or apply.

Resolve function context issues

In the callback function, the function context is not as expected. For example, the context of the event callback function is the object that triggered the event. In addition to setting function context using call and apply, you can use the arrow function and the bind method to solve function context problems.

Determines the arrow function’s this value

Arrow functions do not have a separate this value, which is determined when the arrow function is created.
The arrow function’s this is the same as the context in which it is declared.
When the arrow function is called, the this parameter is not passed implicitly, but the context is inherited from the function at definition.

<button id="test">click me</button>
function Button(){
  this.clicked =false;
  this.click = function(){
    this.clicked = true; }}var button = new Button();
var elem = document.getElementById('test');
elem.addEventListener('click', button.click); as the context for button.click.
Copy the code

<button id="test">click me</button>
function Button(){
  this.clicked =false;
  this.click = () = >{
    this.clicked = true; }}var button = new Button();
var elem = document.getElementById('test');
elem.addEventListener('click', button.click);//button.click is defined in the context of the object returned by new, the button.
Copy the code

The bind method

All functions can use the bind method to create new functions and bind them to the parameters passed in by the bind method. The bound function has the same behavior as the original function.

<button id="test">click me</button>
function Button(){
  this.clicked =false;
  this.click = () = >{
    this.clicked = true; }}var button = new Button();
var elem = document.getElementById('test');
elem.addEventListener('click', button.click.bind(button));// Regardless of how button.click is defined, its context points to button.
Copy the code