Functions of JavaScript Object Types

Table of contents

1. Function

define function

Call functions

default parameters

anonymous function

arrow function

2. Functions are objects

3. Function scope

4. Closure

Five, let, var and scope

---

1. Function

define function

function 函数名(参数) {
    // 函数体
    return 结果;
}

For example:

function add(a, b) {
    return a + b;
}

Call functions

函数名(实参);

For example:

add(1, 2);     // 返回 3

The function call feature in js has no restrictions on the type and number of parameters, for example:

add('a', 'b');  // 返回 ab
add(4, 5, 6);   // 返回 9, 第三个参数没有被用到, 不会报错
add(1);			// 返回 NaN, 这时 b 没有定义是 undefined, undefined 做数学运算结果就是 NaN

default parameters

In java (spring) to achieve the effect of default parameters

@RestController 
public class MyController {
    
    @RequestMapping("/page")
    @ResponseBody
    public void page(
        @RequestParam(defaultValue="1") int page, 
        @RequestParam(defaultValue="10") int size
    ){
        // ...
    }
}

The effect achieved by js

function pagination(page = 1, size = 10) {
    console.log(page, size);
}

anonymous function

grammar:

(function (参数) {
    // 函数体
    return 结果;
})

For example:

(function(a,b){
    return a + b;
})

The first scenario: call immediately after definition

(function(a,b){
    return a + b;
})(1,2)

Second scenario: as a method of other objects, for example:

The page has elements:

<p id="p1">点我啊</p>

This element has an onclick method, which will be executed after the mouse clicks on this element. The onclick method is null at the beginning and needs to be assigned before it can be used

document.getElementById("p1").onclick = (function(){
    console.log("鼠标单击了...");
});

arrow function

(参数) => {
    // 函数体
    return 结果;
}

• If there are no parameters, () should still be reserved

• If there is only one parameter, () can be omitted

• If there is only one line of code in the function body, {} can be omitted

• If this line of code is the result, return can be omitted

For example:

document.getElementById("p1").onclick = () =>  console.log("aa");

2. Functions are objects

1. Can participate in assignment, for example, anonymous functions can also participate in assignment

function abc() {
    console.log("bb");
}

document.getElementById("p1").onclick = abc;

2. There are attributes and methods, execute console.dir(abc), the output is as follows:

ƒ abc()
    arguments: null
    caller: null
    length: 0
    name: "abc"
    ➡prototype: {constructor: ƒ}
    [[FunctionLocation]]: VM1962:1
    ➡[[Prototype]]: ƒ ()
    ➡[[Scopes]]: Scopes[1]

• Among them, the ones marked with f are methods, and the ones without are attributes

• Those with the ➡ symbol can continue to expand, and are omitted due to space limitations

• [[ ]]Those with are built-in properties, which cannot be accessed, but can only be viewed

• It is relatively important that [[Prototype]]and [[Scopes]]will be mentioned later in inheritance and scope

3. Can be used as method parameters

function a() {
    console.log('a')
}

function b(fn) {          // fn 将来可以是一个函数对象
    console.log('b')
    fn();                 // 调用函数对象
}

b(a)

4. Can be used as method return value

function c() {
    console.log("c");
    function d() {
        console.log("d");
    }
    return d;
}

c()()

3. Function scope

Functions can be nested (JS code is very common, but when there are many nested forms, anonymous functions and arrow functions)

function a() {
    function b() {        
    }
}

For example:

function c() {
    var z = 30;
}

var x = 10;
function a() {
    var y = 20;
    function b() {
        // 看这里
        console.log(x, y);
    }
    b();
}
a();

• The scope is defined by the function as the dividing line, and all functions are the global scope

• When looking up variables, look from the inside out

  • If the variable is found in the inner scope, it will stop searching and will not look for the outer layer

  • The variable cannot be found in all scopes, and an error is reported

• The scope is essentially the property of the function object, which can be viewed and debugged through console.dir

4. Closure

var x = 10;
function a() {
    var y = 20;
    function b() {
        console.log(x,y);
    }
    return b;
}
a()();  // 在外面执行了 b

• When a function is defined, its scope has been determined, so no matter where the function goes in the future, those variables at that time can be found from its scope

• Don't be fooled by the concept, closure means that a function can access variables in its own scope

Five, let, var and scope

If the outer layer of the function refers to a let variable, then the universal {} in the outer layer will also act on the boundary, and the outermost let also occupies a script scope

let x = 10; 
if(true) {
    let y = 20;
    function b() {
        console.log(x,y);
    }
    console.dir(b);
}

If the outer layer of the function refers to a var variable, the outer universal {} will not be regarded as a boundary

var x = 10; 
if(true) {
    var y = 20;
    function b() {
        console.log(x,y);
    }
    console.dir(b);
}

If the var variable has the same name, they will be regarded as the same variable in the same scope

var e = 10; 
if(true) {
    var e = 20;
    console.log(e);	// 打印 20
}
console.log(e);		// 因为是同一个变量，还是打印 20

If it is let, it is treated as two variables in two scopes

let e = 10; 
if(true) {
    let e = 20;	
    console.log(e);	// 打印 20
}
console.log(e);		// 打印 10

To distinguish the e inside from the e outside, the easiest way is to change it to let, or use a function to define the scope

var e = 10; 
if(true) {
    function b() {
        var e = 20;
    	console.log(e);
    }
    b();
}
console.log(e);