Location>code7788 >text

Js Functions

Popularity：286 ℃/2024-10-14 16:24:46

Everything is an object in Js and a function is an object too

Creation of functions

Declare a function
// Create the function object
function run(){
   ("Hello World")
}


// Call the function
run()

// Print the contents of the function (without calling it)
 (run)

// function type
 (typeof run) // function
function expression (math.)
// Function expressions (anonymous functions)
const fn3 = function () {
    ("function expression")

}

// Call the anonymous function
fn()
arrow function
// Arrow functions (anonymous functions)
const fn4 = () => {
    ("Hello!")


}

// Call the arrow function
fn()

function parameter

function passing a parameter

formal parameter

  • When defining a function, you can specify a variable number of formal parameters (formal parameters) in the function
  • Defining a formal parameter in a function is equivalent to declaring the corresponding variable inside the function but not assigning a value.

actual parameter

  • When calling a function, you can pass a variable number of real parameters in the function's ()
  • A real parameter is assigned to its corresponding formal parameter.
  • Parameters:
    1. If the number of real and formal parameters is the same, then the corresponding real parameter is assigned to the corresponding formal parameter.
    2. If a real parameter is redundant to a formal parameter, the redundant real parameter will not be used.
    3. If a formal parameter is redundant with a real parameter, the redundant formal parameter is undefined.

Type of parameter

  • The type of the parameter is not checked in JS, you can pass any type of value as a parameter
// Same for function expressions and arrow functions

function sum(x,y){
    (x+y)
}

sum(1,3) // 4


// If the arrow function has only one argument, the () can be omitted
const fn = a => {
  (a) // 6
}

fn(6)

// Define the parameters with default values.
function sum(x,y=100){
  return x+y
}

// The default value, which takes effect if there is no real parameter.
sum(1) // 101

sum(1,2) // 3

Function Return Value

In a function, you can specify the return value of a function with the return keyword

The return value is the result of the function, which will be returned after the function is called.

Any value can be used as a return value (including objects and functions and such)

If return is not followed by any value, it is equivalent to returning undefined

If you don't write return, then the function's return value is still undefined

The function ends as soon as return is executed.

function fn(){
  return "hello world"
}
let result = fn()
(result) // hello worldd


// Arrow function return value shorthand: When the function has only one statement, the return value of the arrow function can be written directly after the arrow, and the return value of the arrow function can be written as a function of the function.

const sum = (a,b) => a + b


// If the return value of an object literal is set directly after the arrow function, the object literal needs to be enclosed in ()
const fn () => ({"name": "li"})

scope (computing)

Scope refers to the visible area of a variable

global scope

  • Global scopes are created when the page is run and consumed when the page is closed.

  • All code written directly into the script tag is in global scope.

  • Variables in global scopes are global variables and can be accessed at any location

local scope

  • block scope (computing)

    • A block scope is a local scope

    • A block scope is created when a block of code is executed, and it is destroyed when the block is finished.

    • Variables declared in block scopes are localized and can only be accessed inside the block, not outside of it

function scope

  • A function scope is also a local scope

  • Function scopes are created at the time of a function call and destroyed at the end of the call.

  • Each call to a function creates a brand new function scope

  • Variables defined in a function are local and can only be accessed inside the function, not outside it

scope chain

When we use a variable, the JS interpreter will prioritize the current scope to find the variable, if found, then directly use it, if not found, then go to the next level of the scope to find, find it then use it if not found, then continue to go to the next level of the search, and so on, if it has been to the global scope are not found, then the variable name is not defined error

Window object

  • In the browser, the browser provides us with a window object that can be directly accessed

  • The window object represents the browser window, through which you can perform various operations on the browser window.

  • In addition to this, the window object is also responsible for storing the built-in JS objects and the browser's host objects.

  • Properties of the window object can be accessed through the window object or directly (not adapted to the window.)

// Functions can be thought of as methods of the window object.

("hello world ") // is equivalent to

 = 100 // Properties added to the window object automatically become global variables.
(max) // 100 is equivalent to ()

/* var is used to declare a variable.
  var is used to declare variables in the same way as let, but var is not block-scoped.
      - Variables declared globally using var are saved as properties of the window object.
      - Functions declared using function are stored as methods of the window.
      - Variables declared using let are not stored in the window object, but are stored in a special place (inaccessible).
      - var does not have block scoping, but it does have function scoping

  */

function test(){
  a = 10 // In local scope, if a variable is not declared using var or let, it automatically becomes a property of the window object, i.e. a global variable.
}

Variable promotion

  • When a variable is declared using var, it is declared before all code is executed, so we can access the variable before it is declared.

  • Function lifting, a function created using a function declaration is created before the rest of the code is executed, so we can call the function before it is declared.

  • Variables declared by let are actually promoted, but the interpreter disables access to the variable until it is assigned a value.

  • Lifting of variables and functions also applies to function scopes

  • Defining a formal parameter is equivalent to declaring the corresponding variable in the function, but without assigning a value.

executable function

In the development should minimize the global scope directly in the code, to try to write the local scope, if the use of let declared variables, you can use the {} to create block scopes

Immediate execution function (IIFE), is an anonymous function, and will only be called once, you can use the IIFE to create a one-time function scope, to avoid the problem of variable conflicts

 (function() {
            ("Execute the anonymous function immediately.")
        }()).

this

When a function is executed, the JS parser passes in an implicit parameter each time, which is called this.

  • This will point to an object
  • The object pointed to by this will vary depending on how the function is called.
  • When called as a function, this points to window
  • When called as a method, this points to the object that calls the method (this is whoever calls this)
  • This allows you to refer to the object that calls the method within the method.
The this of an ordinary function
// When called as a function, this points to the window.
function test(){
            (this === window) // true
        }

// When called as a method, this points to the object on which the method is called.
function get_this(){
         function get_this(){ return this
    }

    const user = Object()
     = get_this

    (()) // user object
    (() === user) // true

  const user  = Object()

     = "li"
    user.set_name = function (name){
         = name
    }


    user.set_name("q")
    () // q
The this of an arrow function

Arrow functions don't have their own this, their this is determined by the outer scope, and the this of an arrow function has nothing to do with how it's called.

  <script>



    function fn(){
        function fn(){ return this
    }

    const fn1 = ()=>{
        return this
    }

    const obj = {
        // The shorthand way of writing fn is equivalent to fn:fn, which is the same as fn:fn.

        fn, // obj, and method calls of the form
        fn1, // window, arrow function defined in global scope

      // The shorthand way, equivalent to say:function (){}, // say(){, fn, fn, obj, and method calls.
        say(){
            (this) // obj

            function t(){
                (this) // Window is called as a function.
            }

            t()


            const t2 = () =>{
                (this) // obj, the this of an arrow function is determined by the outer layer, which is obj
            }
            t2()
         }


    }

    (())
    (obj.fn1())
    ()
    </script>

strict model

There are two modes in which JS runs code:

  • normal mode

    • By default the code runs in normal mode, where syntax checking is not strict.
    • It is based on the principle of not reporting errors where they can be avoided, and this approach results in code that runs with poor performance

  • strict model

    • In strict mode, syntax checking becomes strict

    • Disable some syntax, easier to report errors, improved performance

  • In development, strict mode should be used as much as possible, the

    • This can nip some hidden problems in the bud and also improve the performance of your code
"use strict" // Global strict mode, written in global scope.

  function fn(){
            "use strict" // Strict mode for functions, written inside the function.
        }
<Previous Next>