Detailed explanation of JavaScript function introduction

Function Introduction

function

• A function is also an object
• A function is an encapsulation of n statements that implement functions and can be called at any time when needed.
• Functions can be executed, other types of data cannot be executed
• When you use typeof to check a function object, it returns function

advantage:

• Improve code reuse
• Easy to read and communicate

Creating a function

Constructor creates a function

grammar

var fun =new Function(code block);

There are relatively few functions constructed in this form.

Function declaration creates a function

grammar:

function function name (parameter 1, parameter 2... parameter N) {
    Statement...
}

Function Expressions Create Functions

var function name = function function name (parameter 1, parameter 2... parameter N) {
    Statement...
}

Function Parameters

Formal parameters:

• Specify one or more parameters in the () of the function
• Multiple parameters are separated by , and declaring a parameter is equivalent to declaring the corresponding variable inside the function, but no value is assigned.

Actual parameters:

• When calling a function, you can specify the actual parameters in ()
• The actual parameters will be assigned to the corresponding formal parameters in the function
• When calling a function, the parser does not check the type of the actual parameter (so pay attention to whether it is possible to receive illegal parameters, and if so, you need to type check the parameters)

function sum(a, b) {
    console.log(a + b);
}
sum(1, 2); //Call function and pass in actual parameters 

Number of parameters:

• The number of actual and formal parameters of a function can be different
• A. The number of actual parameters is greater than the number of formal parameters: the function runs normally and the extra actual parameters are ignored
• B. The number of actual parameters is less than the number of formal parameters: the extra formal parameters will become undefined variables

Question : When passing variable parameters when calling a function in JavaScript, is it passed by value or by reference?

• Understanding 1: All are value (basic/address value) transfer
• Understanding 2: It may refer to transfer or reference transfer (address value)

var a = 3;
function fn(a) {
    a = a + 1;
}
fn(a);
console.log("a is:", a); // 3

Here it can be understood as value (basic) transfer

var obj = { name: "心猿" }; // declare an object function fn(obj) {
    console.log(obj.name);
}
fn(obj); // "Monkey Heart"
//This can be understood as address value transfer or reference transfer (address value)

Function call

Direct call:

函數名()

function fn(obj) {
    console.log("I was called directly!");
}
fn()//direct call 

Calling via object

obj.函數名()

Obj = {
    fun(){
        console.log("I called it through an object!");
    }
}
Obj.fun(); //Call function through object 

new call

new fun()

function fun() {
    console.log("I called it through new!");
    return 1 + 2; // return a value }
var result = new fun();
console.log("result:", result);//fun {}
console.log("Data type of result:",typeof result);//"object"

Notice:

1. A function called with new always gets an object, regardless of whether the function returns a value or not.

2. Use new to call a function, which is a function used to create an object (constructor)

fun.call/apply(obj)

This is a temporary method to make fun become obj for calling

var obj = { name: "心猿" }; // declare an object function fun() {
    this.age = 5000;
    console.log("Call the function through fun.call(obj)!");
}
//Cannot be called directly through obj.fun(), but can be called through fun.call(obj) fun.call(obj) //Equivalent to obj.fun
//Print the function called by fun.call(obj)!
console.log("You can also use it as a method of obj to call age information" + "age:", obj.age); //5000

Function return value

A function may or may not have a return value.

• Function with return value: The function body returns a value through the return syntax, which determines the next step of the program
• Function without return value: The function only implements a certain function and does not need to return a value (there is no return statement in the function body)
• The return value can be of any data type, including primitive data types, objects, and functions.

Execute function immediately

After the function is defined, it is called immediately. This kind of function is called an immediately executed function.

Immediately executed functions are usually executed only once.

grammar:

(function(){
	Code blocks;
})();

For example:

(function (a, b) {
    console.log("num:", a + b);
})(1,3);//4

method

• A property in an object can be a function
• If a function is stored as a property of an object. Then we call this function a method of this object
• Calling this function is to call the method of the object, which is essentially no different from a function.

var obj = new Object()
{
    obj.name = "Monkey Heart";
    obj.age = 3000;
    obj.sayName = function(){
        console.log("name:",obj.name);
    }
}
obj.sayName();

Another way to write it:

var obj = {
    name: "Yima",
    age: 3000,
    sayName: function () {
        console.log("name:", obj.name);
    }
}
obj.sayName();

To enumerate the properties in an object:

You can read my article about the differences between different traversal methods: Comparing the differences between for, forEach, for...in, and for...of in JavaScript

Using for...in Statement

grammar

for(var index in arr)
{
    console.log(index); //code block}

for ...in statement object has several attributes, and the loop body will be executed several times. Each time it is executed, the name of an attribute in the object is assigned to the variable.

var person = {
    name:"Sun Wukong",
    age:5777,
    gender:"Male"
};
for(var index in person)
{
    console.log(person[index]);
}

Scope

Scope refers to the range of a variable.

There are two kinds of scopes in JavaScript:

1. Global scope (global variables)

2. Function scope (local variables)

3. Block-level scope ES6 syntax

Global Scope

• Variables defined outside a function or inside a function without using the var declaration.
• The global scope is created when the browser page is opened and destroyed when the page is closed.
• There is a global object window in the global scope
• It represents a browser window
• It represents a browser window, which is created by the browser and we can use it directly
• If you use this global object window in a node.js environment, an error will be reported and the result will only be displayed in a browser.
• In the global scope:
  • The created variables are saved as attributes of the window object
  • The created functions will be saved as methods of the window object
• Variables in the global scope are global variables
• You can access it from any part of the page

Variables are saved as attributes of the window object

var a = 10;
console.log("a:",a);
console.log("window.a:",window.a);

Due to environmental reasons, an error will be reported in node.js

It will display normally in the browser

Functions will be used as methods of the window object

function fun(){
   console.log("I am the window.fun function!")
}
window.fun();

Function Scope

• The function scope is created when the function is called, and the function scope is destroyed after the function is executed.
• Each time a function is called, a new function scope is created, and they are independent of each other.
• Variables in the global scope can be accessed in the function scope
• When a function scope operates a variable, it will search for it in its own scope. If it is found, it will be used directly. If it is still not found in the global scope, ReferennceError will be reported.
• To access global variables in a function, you can use the window object

Block scope

ES6 (ECMAScript 2016) variables declared using let are scoped to the statement block

for(let i=0;i<100;i++){
			}

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!