Front End Summary, Foundation Paper, JS(3) arguments, callee, call, apply, bind and function encapsulation and constructor

Keywords: Javascript github Vue Front-end

Front end summary series

Front End Summary, Foundation Paper and CSS (1) Layout
Front-end Summary, Foundation Chapter, CSS (2) Vision
Front End Summary, Foundation Chapter and CSS (3) Supplement
Front End Summary, Foundation Chapter, JS (1) Prototype, Prototype Chain, Constructor and String
Front End Summary, Foundation Chapter, JS (2) Deep Copy of Arrays, Deduplication and String Inversion and Array
Front End Summary, Foundation Paper, JS(3) arguments, callee, call, apply, bind and function encapsulation and constructor

Catalog

I. Function Use
    1.1 Function Declarations and Function Expressions
    1.2 Function Encapsulation (Self-Calling Functions, Closures)
    1.3 Function Properties (arguments, callee)
    1.4 constructor

2. Functional Skills
    2.1 Change the scope of the function (call/apply/bind)
    Repair of setTimeout problem in 2.2 for loop

I. Function Use

Strings and arrays are used to store data. When we need to do something specific, we encapsulate it with functions.

1.1 Function Declarations and Function Expressions

Declaring a function can be declared by a function or expressed by a function.

Function expressions must be declared before invoked
Variables in a function need to be declared with var, otherwise global variables will be contaminated

function hello( name ) { some code ... }  // Function declaration
var hello = function ( name ) { some code ... }  // Functional expression

// Variable elevation | Variables within the function are not declared by var, which will cause variables to become global variables after execution.

var age = 22

function showAge(){
    age = 23
    console.log(age)
}

showAge()  // 23 | Execution function
console.log(age)  // 23 | Test the value of the global variable age

1.2 Function Encapsulation (Self-Calling Functions, Closures)

Many external JS files will be introduced into the actual project to avoid naming conflicts with each other. Usually each encapsulates its own internal functions. (A better solution now is to use modularity, which will be summarized later.)

Self-calling function

Using self-calling functions, encapsulate the code of the entire JS file.

The advantage of this approach is that it does not pollute global variables and can reduce naming conflicts very well.
Finally, the external access interface is mounted on window s.

(function(){
    // some code ...
    window.myApp = myApp()  // Mount the external access interface on Windows
})()

Closure package

If you use functional expressions internally and don't use var declarations, variables will still leak to the whole world.

// a.js

(function(){
    function myApp() {

        // Define showName method
        function showName(name) {
            console.log(name)
        }

        // Define showAge method
        function showAge(age){
            console.log(age)
        }

        // Return an object
        return {
            showName: showName,
            showAge: showAge
        }
    }
    window.myApp = myApp()
})()

Function extension

Introduce the a.js file above and create b.js to write the main logic of the program.

You can also write in one file and in two files to separate the interface from the controller for easy management.
You can modify the method provided above, or add a new method.

//b.js

// Modify existing methods
myApp.showName = function (name) {
    console.log('Call me '+name)
}

// New Definition Method
myApp.showCity = function (city) {
    console.log(city)
}

myApp.showName('berg')  // Access | berg
myApp.showCity('NanChang')  // Access | NanChang
showName('berg')  // Unaccessible | Uncaught Reference Error: showName is not defined

1.3 Function Properties (arguments, callee)

Arguments are used to store arguments, and the values of arguments can be accessed through subscripts. callee points to the function currently executed and can be used in recursion. For specific recursive scenarios and code, see MDN.

callee cannot implement tail recursion
callee is prohibited in ES5 Strict Mode
caller points to a function that calls the current function (discarded)

function show(name,age) {
    console.log(name)  // berg
    console.log(age)  // 22
    console.log(arguments)  // ["berg", 22]
    console.log(arguments.callee)  // function show(name,age) {}
}
show('berg',22)

1.4 constructor

ES6 can use Class to implement inheritance, which will be mentioned later when summarizing ES6 separately. Recommend a very good ES6 series of tutorials. In-depth and shallow understanding of ES6

// Declare constructor Human

function Human() {
    this.play = function(){
        console.log('I\'m playing.')
    }
}

// Declare constructor Male

function Male() {
    this.sex = 'male'
}

// Declare the constructor Female

function Female() {
    this.sex = 'female'
}

// Let Male and Female inherit Human

Male.prototype = new Human()
Female.prototype = new Human()

// Create xiaoming objects and test inheritance results

var xiaoming = new Male()
console.log(xiaoming.sex)  // male
console.log(xiaoming.play())  // I'm playing.

// Create xiaohong objects and test inheritance results

var xiaohong = new Female()
console.log(xiaohong.sex)  // female
console.log(xiaohong.play())  // I'm playing.

2. Functional Skills

2.1 Change the scope of the function (call/apply/bind)

call/apply/bind can be used when context changes are needed for this. (For more detailed explanations, see ChokCoco To implement inheritance with call, see MDN)

The first parameter of the three methods is the context of this
apply's second parameter is an array, and call and bind are followed by a single parameter.
call and apply are automatically executed by default, and bind needs to be followed by () to execute automatically.
Bid is ES5 grammar and supports IE9+


/* Following are combinations of numbers and examples
 * Before using different methods, make sure that a and b are default values
 */

var a = [1,2,3]  // Default values for testing
var b = [4,5,6]  // Default values for testing

a.push(b)  // Direct use of push (not as expected)
console.log(a)  // [1, 2, 3, Array[3]]

// call method (in this case, it is not convenient to input parameters one by one)

Array.prototype.push.call(a,4,5,6)
console.log(a)  // [1, 2, 3, 4, 5, 6]

// apply method (the second parameter is passed directly into the array, which is very suitable for this scenario)

Array.prototype.push.apply(a,b)
console.log(a)  // [1, 2, 3, 4, 5, 6]

// bind method

Array.prototype.push.bind(a,4,5,6)()  // Note that you need to add an auto-execution function here
console.log(a)  // [1, 2, 3, 4, 5, 6]

Repair of setTimeout problem in 2.2 for loop

setTimeout has its own this. If you put a for loop in the outer layer, it means that it will be executed at one time without delay. The solution is to use closures. Here is the main reference JavaScript Secret Garden

setTimeout is a timed execution function. Accept two parameters, the first is the function to execute, and the second is the time to delay execution. Usually it's used after landing, prompting for a few seconds and then jumping to the home page (which is basically not done now).
setInterval is basically the same as setTimeout. It's just the second time parameter, which represents how long an event is executed.
The second parameter is in milliseconds (1000 is 1 second).

// Before using closures

for(var x = 0; x<10; x++) {
    setTimeout(run,1000)  // 10
}

function run() {
    console.log(x)
}

// After using closures

for(var x = 0; x<10; x++) {
    setTimeout((function (x) {
        return function() {
            console.log(x)  // 0 1 2 3 4 5 6 7 8 9
        }
    })(x),1000)
}

summary

The full text mainly refers to the following websites

Programmer Group