JS Easy to understand Function and Constructor

1. Overview

Function is a constructor that can be used to create a function. The created function is a Function object. In fact, no matter what method is used to create it, it is a Function object. In essence, the function name is just a variable name, which points to a reference to a Function object.

The verification code is as follows:

var f = function () {
  console.log('this is f function');
}
// A function is also an object console.log(f instanceof Object); // true
// Function is an object of type Functionconsole.log(f instanceof Function); // true

1.1 Creating a function using the Function constructor

Function **** The constructor creates a new Function object. Calling this constructor directly can create functions dynamically.

The grammatical structure is as follows:

var functionName = new Function ([arg1[, arg2[, ...argN]],] functionBody)

Where functionName represents the function name, [arg1[, arg2[, ...argN]],] represents the optional parameter list, and functionBody represents the function

The sample code is as follows:

// Function without parameters var fun = new Function('console.log("This is a function")')
fun() // This is a function // A function with one parameter var fun = new Function('a', 'console.log("This function takes one parameter: " + a)')
fun(100) // This function takes one parameter: 100
// Function with two parameters var fun = new Function(
  'a, b',
  'console.log("This is a function with two parameters, " + a + " and " + b);',
)
fun(100, 200) // This is a function with two parameters, 100 and 200

In actual development, we generally do not use this method to create functions because it is not readable at all.

1.2Function and Object

• Object type and Function are one of the reference types in JavaScript
• Constructor is also a kind of function
• A function is actually an object of type Function
• All objects in JavaScript are of type Object.

The verification code is as follows:

console.log(Function instanceof Function) //true
console.log(Function instanceof Object) //true
console.log(Object instanceof Object) //true
console.log(Object instanceof Function) //true

2. Constructor

2.1 Custom otherwise function

A constructor, also known as a constructor or object template, is a method in an object that is called when it is instantiated. In JavaScript , functions can be used as constructors, so there is no need to define a constructor method specifically.

The syntax for creating a constructor is as follows:

function Person(){
  this.property name = property value;
  this.method name = function() {
      Method Body}
var person = new Person();

Here, Person is the name of the constructor. To instantiate Person, you need to use the new keyword. Another thing worth mentioning is that the first letter of the constructor is generally capitalized.

The following code shows how to create a constructor and how to instantiate a class through the constructor:

// Custom constructor -> Function: Create object function Person(name, age, sex) {
  this.name = name
  this.age = age
  this.sex = sex
  this.print = function () {
    console.log(name + 'this year' + age + 'age and gender' + sex)
  }
}
// Create a bowl of sweets var t = new Person('a bowl of sweets', 18, 'female')
hong.print() // Yiwantian is 18 years old and female // Create Yiwanzhou var z = new Person('Yiwanzhou', 20, 'male')
dong.print() //A bowl of porridge, 20 years old, male

2.2 Constructor property of an object

constructor property provided by Object object returns a reference to the constructor that creates the instance object Object .

All objects inherit a constructor property from their prototype:

It is important to note that the value of this property is a reference to the function itself, not a string containing the function name.

The sample code is as follows:

// Create Yiwan Zhou var z = new Person('Yiwan Zhou', 18, 'Male')
// Check if it is the object of Person constructor console.log(z.constructor === Person)

2.3 Constructors and functions

Let's look at a piece of code first

function Hero() {
  // Use as a function var v = 100 // Local variable // Use as a constructor this.set = function (value) {
    v = value
  }
  this.get = function () {
    return v
  }
}

In this code, first we define a function, which is also a constructor, and of course it is still an object.

Since it has three meanings, there are three operations, as shown below

• Directly call it as a function
• Creating objects through constructors
• Treat it as an object and add properties or methods to it

The sample code is as follows:

// Call Hero() directly
// Create an object through the constructor var hero = new Hero()
// Treat it as an object and add properties and methods Hero.n = 'A bowl of Zhou'
console.log(Hero.n) // A bowl of Zhou

3. Properties and methods of Function objects

The global Function object does not have its own properties and methods, but because it is also a function, it will also inherit some properties and methods from its own prototype chain Function.prototype through the prototype chain.

3.1length attribute

The length attribute indicates the number of formal parameters of the function. The sample code is as follows:

// Define two empty functions function fun(a, b, c, d) {}

function fn() {}

// Test the length property console.log(fun.length) // 4
console.log(fn.length) // 0

apply() method:

The apply() method calls a function with a given this value and arguments provided as an array (or array-like object).

The syntax format is as follows:

func.apply(thisArg, [argsArray])

The parameters are explained as follows:

• thisArg : Required. The this value to use when the func function is run. Note that this may not be the actual value seen by the method: if the function is in non-strict mode, any assignment of null or undefined will be automatically replaced by a reference to the global object, with the primitive value wrapped.
• argsArray : Optional. An array or array-like object, the array elements of which will be passed as separate parameters to the func function. If the value of this parameter is null or undefined, it means that no parameter is required. Array-like objects are available since ECMAScript 5.

The return value is the result of calling the function with the specified this value and arguments.

The following code shows the usage of the apply() method:

// define a function function fn(a) {
  console.log('this is ' + a)
}
fn.apply(null, ['function']) // this is function // The above call is equivalent to the following method fn('function') // this is function

3.2call() method

The syntax and function of this method are similar to the apply() method, with one difference: the call() method accepts a parameter list, while apply() method accepts an array containing multiple parameters.

The following code shows the usage of the call() method:

function fn(a) {
  console.log('this is ' + a)
}
fn.call(null, 'function') // this is function // The above call is equivalent to the following method fn('function') // this is function

bind() method:
The ind() method creates a new function. When bind() is called, the this of the new function is specified as the first parameter of bind(), and the remaining parameters will be used as parameters of the new function for use when calling.

The parameters are explained as follows:

function.bind(thisArg[, arg1[, arg2[, ...]]])

parameter:

thisArg : The value passed to the target function as the this argument when the bound function is called.

arg1 , arg2 , ...: Arguments that are prepended to the bound function's argument list when the target function is called.

The return value is a copy of the original function with the specified **this** value and initial parameters.

The following code shows the bind() method:

// Define a function var fun = function (a, b) {
  console.log('The value of the first parameter is:' + a + 'The value of the second parameter is:' + b)
}
// Call fun()
fun(10, 20) // The value of the first parameter is: 10 The value of the second parameter is: 20
// Create a bound function var fn = fun.bind(null, 100, 200) // Function with default parameter values ​​// Call the newly created function without writing actual parameters fn() // The value of the first parameter is: 100 The value of the second parameter is: 200

4. Arguments Object

arguments object is a local variable available in all (non-arrow) functions. You can reference function arguments from within a function using the arguments object. This object contains each argument passed to the function, with the first argument at index 0. For example, if a function is passed three parameters, you can reference them as follows:

arguments[0]
arguments[1]
arguments[2]

Its parameters can also be redefined. The object also provides two properties:

• arguments.length : Returns the number of arguments passed to the function
• arguments.callee : Returns a pointer to the currently executing function to which the arguments belong. If this property is followed by a () , it means calling this function, because arguments.callee === fun evaluates to true.

The following code shows the usage of this object. The code is as follows:

/*
 * The arguments object is a special object that lives in the function body.
 * The arguments object is an array-like object * The arguments object corresponds to the actual parameters passed to the function */
// Define a function var fun = function () {
  console.log(arguments)
  // arguments.callee points to the currently executing function to which the arguments belong.
  //If you add a bracket to this property, it means calling. Because arguments.callee === fun evaluates to true
  console.log(arguments.callee)
  // arguments.length The number of arguments passed to the function.
  console.log(arguments.length)
}
fun(1, 2, 3, 4, 5) 

The code execution results are as follows:

[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
[Function: fun]
5

We can use the arguments.length property to determine the number of passed parameters to complete the function overloading. The sample code is as follows:

// Overload of simulation function function add() {
  // Record the number of parameters var len = arguments.length
  // Use the switch case statement to determine the number of parameters passed in to simulate the overloaded function switch (len) {
    case 2:
      return arguments[0] + arguments[1]
      break
    case 3:
      return arguments[0] + arguments[1] + arguments[2]
      break
    case 4:
      return arguments[0] + arguments[1] + arguments[2] + arguments[3]
      break

    default:
      break
  }
}
console.log(add(1, 2)) // 3
console.log(add(1, 2, 3)) // 6
console.log(add(1, 2, 3, 4)) // 10

5. Summary

This article introduces how to create a constructor, how to instantiate an object through a constructor, and what methods and properties the Function object provides. How to use it, and finally introduce an Arguments object.

This is the end of this article about JS Function and Constructor. For more relevant JS function and constructor content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!