I. Function description
-
Function object In JavaScript, every Function is really a Function object, because they can have properties and methods just like any other object. They differ from other objects in that functions can be called.
-
Return Statement If a function does not use a return statement, it returns undefined by default. To return a specific value, the function must use a return statement to specify a value to return. (Except for calling a constructor using the new keyword). Return is similar to break.
-
When a function is called with an argument, the value passed to the function is called the argument (value pass), and the corresponding function argument is called the parameter.
function func(parameter1The parameter2){
// The function executes the code} func (argument1That argument2);// Pass the parameter when calling
Copy the code- This points to theAt function execution time, the this keyword does not refer to the running function itself, but rather
Points to the object on which the function was called. So, if you want to get a reference to the function itself inside a function, use either the function name or the arguments.callee property (not available in strict mode), or the latter if the function is an anonymous function.
2. Function definition
2.1 Function declaration and function expression
Function declarations are read and added to the execution context before any code is executed, a process called function declaration promotion.
function functionName(){
// The code to execute
}
Copy the codeThe function expression must wait until the code executes to this line before generating the function definition in the execution context. Function expressions are not promoted and therefore cannot be called before definition.
var myFunction = function name(a, b) {
return a + b;
};
console.log(myFunction("CAI"."徐坤"));
Copy the code2.2 Anonymous Function
Anonymous functions are functions that have no name and are defined to be used.
function() {
console.log("hello world");
}
Copy the code- Application scenarios of anonymous functions
1 as an argument to other functions
function test(fn) {
fn();
}
test(function () {
console.log("hello world");
});
Copy the code2 as the return value of other functions
function test() {
return function () {
console.log("hello world");
};
}
let fn = test();
fn();
Copy the code3 as an immediate function
(function () {
console.log("hello world"); }) ()Copy the code2.3 Arrow Functions (IN ES6)
letFunction name =(The parameter list) = >{code that needs to be wrapped; }Copy the codeAbout ellipsis
/*4.1 If the arrow function has only one parameter, then () can be omitted */
let say = name= > {
console.log("hello " + name);
}
If {} contains only one line of code, {} can also omit */
let say = name= > console.log("hello " + name);
say("world");
{return console.log("hello "+ name)}
let say = name= > {console.log("hello "+ name); } say("world");
// This sentence does not return a value
Copy the code
- Arrow function features:
1. Arrow functions do not have this, so you need to find the value of this by searching the scope chain. This means that if an arrow function is contained by a non-arrow function, this is bound to the nearest non-arrow function’s this. 2. Arrow functions don’t have their own arguments object, which isn’t necessarily a bad thing, since arrow functions can access arguments object 3 for peripheral functions. It cannot be called by the new keyword and has no new. Target value. 4. There is no need to build a prototype because you can’t call the arrow function with new, so there is no prototype property for the arrow function. 5. Without super, arrow functions have no prototype, so they cannot access the attributes of the prototype through super, so arrow functions also have no super. As with this, arguments, and new.target, these values are determined by the nearest layer of non-arrow functions.
> arrow function is not used:
Callbacks with dynamic context should not be used on methods defining objects. Arrow functions should not be used on constructors. Avoid using prototype
2.4 Callback functions and recursive functions
A callback function is a function passed as an argument to another JavaScript function. The callback function is executed inside the function passed.
Why a callback?
- Client-side JavaScript runs in the browser, and the browser’s main process is a single-threaded event loop. If we try to run a long-running operation in a single-threaded event loop, the process is blocked. This is technically bad because the process stops processing other events while waiting for the operation to complete.
- For example, the alert statement is considered one of the blocking codes in javascript in the browser. If you run Alert, you won’t be able to interact in your browser until you close the Alert dialog window. To prevent blocking long-running operations, we use a callback.
Recursive function
A recursive function is a function that calls itself, so we’ll call it a recursive function and a recursive function is kind of looping around and every time you call a recursive function it opens up a new piece of storage, so it doesn’t perform very well
function login() {
// 1. Receive the password entered by the user
let pwd = prompt("Please enter your password");
// 2. Check whether the password is correct
if(pwd ! = ="123456"){
login();
}
// 3
alert("Welcome back.");
}
login();
Copy the codeThree. Inside the function
3.1 Arguments objects and arguments for a function
3.1.1 Function arguments object
Arguments, representing the collection of all arguments. Get each bit of the argument by subscript; Get the number of arguments by length; Collections are arrays of classes that can use subscripts, but do not have the various methods found in arrays.
//arguments represents a collection of arguments (array of classes). You can get each argument by subscript and the collection length by length
function args() {
console.log(arguments);
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
args(23.45.999.10.9."CAI Xukun"."There's more to come.");
Copy the code3.1.2 Parameters of the Function (ES6)
- In addition to common parameters, Es6 adds two new parameters: default parameters and residual parameters.
The default parameters
1. Before the ES6 logical operators to give parameter to specify the default format: condition A | | B if condition A set up, then return A if condition A, whether conditions B, B will return conditions
function getSum(a, b) {
a = a || "Hello";
b = b || "JavaScript";
console.log(a, b);
}
getSum(); Hello / / JavaScript
getSum("hello"."world");//hello world
Copy the code2. Starting with ES6, you can specify a default value directly after the parameter with =
function getSum(a = "Hello", b = "Front end") {
console.log(a, b);
}
getSum(); // Hello front end
getSum("hello"."world"); //hello world
Copy the codeNote: Default values starting with ES6 can also be obtained from other functions
function getSum(a = "Music genius", b = getDefault()) {
console.log(a, b);
}
getSum();// Music genius CAI Xukun
function getDefault() {
return "CAI Xukun";
}
Copy the codeThe remaining parameters
The residual argument syntax allows an indefinite number of arguments to be represented as arrays.
function name(a, b, c, ... arr) {
console.log(a, b, c, arr); //1 2 3 [4, 5,6,7,78]
}
name(1.2.3.4.5.6.7.78);
Copy the code3.2 This of the function (see the summary this points to below)
thisThe value is a normal function that is determined at function execution://windowCall method fn. Call ({name:1}) ://{name:1}Normal function of the bind method fn. Bind ({name:1}) ://{name:1}
const fn2= fn1.bind({name:1})
fn2()// Bind returns a new function executionObject method execution,thisPoint to the object obj.say()setTimeout(function(){console.log(this)},2000)functionThe inside of thethisPoint to thewindow
setTimeout(() = > {},2000) points to the object outsideclassRefers to the instance itselfCopy the code