[JavaScript] Functions in JavaScript (1)

Learn about functions in javascript:
MDN
Nanyi Teacher's Tutorial

About the definition of a function:

Nanyi Teacher: A function is a block of code that can be called repeatedly. The function can also accept input parameters, and different parameters will return different values.

The Mdn:function constructor creates a new function object. In JavaScript, each function is actually a functional object.

How functions are declared and name

There are currently 5 ways to declare a function, and each function has one of his name attributes (including anonymous functions) to be aware of.

• Named function

function fn(x,y) {    console.log(x + y)}fn.name //"fn"

• anonymous functions

var fnf = function(x,y){    console.log(x + y)}f.name //"f"

• Named function Assignment value

var fnfn = function f(x,y) {    console.log(x + y)}fn.name //"f"f.name  //f is not defined

• Window. Function

var f = new Function(‘x‘,‘y‘,‘return x+y‘)f.name // "anonymous"

• Arrow functions

var fn = (x,y) => {return x + y}f.name  //"fn"

The most common is now the named function and the arrow function.

function invocation and call ()

After declaring a function, we can call this function.

But what happens when we call a function, figuring out the mechanics of it, can help us get to know the function more deeply.

Now comb my thoughts about function calls:

First, we declare a function:

var fn = function(x,y){    retrun x + y}

Because function also belongs to an object, so this variable has an address a, which points to the heap in the memory of object B, object b is stored in our function parameters and function body.

：

The __proto__ in this object B points to Function.prototype, which has a special call () attribute in Function.prototype, which is critical to the action of calling the function.

Each time a function is called, the call () property is used to execute the contents of the function body.

Because of the legacy of the JavaScript language, Fn.call () is the real calling method of the function.

Attention

fn (Fn.call) equivalent to (undefined,1,2)

FN is the equivalent of a syntactic sugar, but the call () method gives learners a better understanding of this and arguments concepts in functions, so it is recommended that function calls be used in the learning process until this is mastered.

This and arguments in the function

What does this in the function mean exactly?

First of all: This refers to the first parameter in call (), and the first parameter is arguments.

My understanding of this is that he is referring to a domain, a range (which can be properly understood as the scope of a function), which is clear when combined with call ().

And look, we've declared a function:

var fn = function(x,y){    console.log(‘x:‘+x,‘y:‘+y)    console.log(this)}fn(1,2)fn.call(undefined,1,2)

The results of both operations are:

Both of this is a window global object, let's change it:

var a = 3var obj = {    a: 4}var fn = function(x,y){    console.log(‘x:‘+x,‘y:‘+y)    console.log(this.a)}fn(1,2)fn.call(obj,1,2)

The results of the operation are as follows:

As we can see, because we declare a global object A with an assignment of 3 in front of the code, the this in the first FN call does not change, it is still the window global object, so THIS.A in the function fn is looking for a in the global scope, that is, printing out 3.

We also declare an object in front of the code, which contains a key a , the value of the key is 4 , the second FN call, we put the object obj as a parameter to the FN, this object obj becomes the FN this!! So when the code runs, THIS.A in the function fn is looking for a in object obj.

Because the normal function call FN () simplifies the step of passing in this, and Fn.call () needs to pass this as a parameter, it is beneficial to use call () to learn this.

Attention

Normal mode and strict mode

This will behave differently in normal mode and strict mode:

// 严格模式var fn = function(x,y){    ‘use strict‘    console.log(‘x:‘+x,‘y:‘+y)    console.log(this)}fn.call(undefined,1,2)fn.call(1,1,2)

// 普通模式var fn = function(x,y){    console.log(‘x:‘+x,‘y:‘+y)    console.log(this)}fn.call(undefined,1,2)fn.call(1,1,2)

In normal mode, if this is undefined, the browser will automatically turn this into window, and if it is a different value, an object (say 1, a number 1 object will be typed);

In strict mode, if this is undefined, he is undefined, and if it is another value, the value itself will be typed.

Arguments

Arguments refers to the parameters of the function.

Using arguments a pseudo-array can be typed, a pseudo-array is like an array, but there are no Array.prototype objects in __proto__.

// 普通模式var fn = function(x,y){    console.log(‘x:‘+x,‘y:‘+y)    console.log(arguments)}fn.call(undefined,1,2)

The next blog post will then summarize the scopes and closures in the function.

[JavaScript] Functions in JavaScript (1)