1.ECMAScript

Composition of 1.1 JS

ECMAScript: JS core syntax, data types… ; DOM document object model: Specifies how to access and manipulate HTML documents; BOM Browser object model: The in-memory global object that the browser describes the properties and state of the current window

1.2 Data Types

Why change the type of score data? : Different types of data have different characteristics and operation methods. Data type classification:

  • According to ECMASCript, it is divided into simple types and compound types. Simple types: Number, String, Boolean, null, undefined, symbol(ES6); Object(Array, function, element, elements, jSON-like {}…)
  • According to typeof detection,number, String, Boolean, function, undefined, symbol, object

1.3 typeof

Typeof Data: used to detect the data type. Note that the result is not exactly the same as the ECMAScript specified data type. For example, null values are defined as basic data types in ECMAScript and are detected as object in Typeof detection.

1.4 Data type conversion

Conversions of data types are usually to numbers, to booleans, and to strings.

1.4.1 Converting to numbers

  • Convert to an integer:parseInt(data[,radix]);The first parameter is the data to be converted to a number. The second parameter is the base of the data to be converted. Note that 0x is a hexadecimal identifier. If the cardinality is not specified, data starting with 0x is converted in hexadecimal format. The conversion rule is that non-string data is converted to string data, and then bit-by-bit conversion is performed from left to right. If the first digit is a non-radix number, the conversion is stopped. If the first digit is a non-radix number, the result is NaN. The first function of this function converts a non-integer number to a number, and the second function converts a non-integer number to an integer.
  • Conversion to floating point:parseFloat(data);Unlike parseInt, this function only converts decimal data and converts one more decimal point. It should be noted that in JS, the calculation of decimals will have accuracy problems, because the js underlying calculation is converted to binary first, and then the calculation.
  • Convert to numbers:number(val);The value is a string. The value can be converted to a number only when the entire string conforms to the number rule. Otherwise, the value is NaN. The empty string is 0; Boolean type, 1 if true, 0 otherwise; Null to 0; Undefined is NaN; The object type calls the toString method of the object to convert it to a string, and then converts it. An empty array returns 0;

1.4.2 Converting to Boolean

boolean(val); Numbers are true if they are non-zero, and strings are true if they are non-empty; Null is false; NaN is false; Object is true;

1.4.3 Converting to a String

string(val); Numeric returns a numeric string; Undefined Returns undefined; Null Returns a null string; Boolean returns the corresponding string; Function returns a string consisting of the body of the function. Object directly calls the toString method of the object for conversion.

1.4.4 Implicit Data type Conversion

Sometimes, the conversion of data types does not always require the programmer to write the code directly. Sometimes, the JS parser will automatically convert the data type when parsing the code. Such as non-absolute comparison, integer and decimal calculation.

1.4.5 Data Type Cast Rule Table

1.5 NaN

NaN is a special value of the number data type, but it is not a number, and it has the property that it is not equal to itself or anyone else. The isNaN (val); This function determines if it is a NaN, false if it can be legally converted to a number, or true if it is a NaN.

1.6 Value and address transmission

Primitive types (simple types) are also known as pass-value types, in which assignments, arguments, etc., are passed real concrete values. Object types (compound types) are also referred to as addressing types, in which data is not passed a real value, but a reference address to the data in memory, during operations such as assignment and parameter passing.

2. function

2.1 Function Basics

2.1.1 Function declaration and Invocation

// Function declaration
function funcName(The parameter list){/* The function body is the logical code */}
var name = function(The parameter list){/* The function body is the logical code */} // Function expression

// Function non-event callFuncName (argument list); Name (argument list);// Function declarations and self-calls
(function(The parameter list){/* The function body is the logical code */})(argument list);// Function event call
el.event = fn;
Copy the code

2.1.2 Function Parameter Passing

Application scenario: When multiple codes are similar but differ in a few areas, you can distinguish codes by passing parameters.

  • Formal parameters of parameters and arguments are concepts that are used when declaring functions. The formal parameters of JS are slightly different from those of other programming languages. You simply write the parameter name inside the parentheses of the function declaration. You do not need to add the data type before the parameter. However, similar data type specifications have been added to the later JS standard, albeit in slightly different form. Arguments are made when a function is called, and the caller simply needs to place the required data inside the parentheses that execute the function. Note: there are undefined parameters and default parameters in JS, which will be covered later in JS.
  • Arguments can be used directly inside functionsargumentsThis name, it’s essentially an array, and inside the array is the parameter that we passed in. Because JS uses the number of parameters of the function is not certain, that is to say, the number of arguments and the number of parameters do not have to be consistent, at this pointargumentsThis array contains all the arguments actually passed in by the caller. Arguments This array is the same as any other array, use[num]Access internal elements and uselengthGets the number of elements.

2.1.3 Return Return value

Definition: Returns the result of a function execution; Return: Sets the result of the function execution and terminates the function execution. Note: This statement must be used within a function. If it is used outside a function, an error will be reported. After this statement is executed, the function will end execution. Each function returns a value, but undefined is returned by default when not defined.

2.1.4 other

  • An event is an attribute that an element itself has. Generally speaking, adding an event to an element is essentially adding event handlers to the corresponding elements that an element already has.
  • console.dir();Use to print all properties and methods of the object.
  • Gets the evaluated style of the elementgetComputedStyle(el);Gets the highest-priority style, that is, all the styles currently displayed for the element;GetComputedStyle (el) [' attr];Gets the specified element attribute data. Note that Internet Explorer 8 does not support this methodel.currentStyle['attr'];Gets the attribute data for the current element.

2.2 JS pre-parsing mechanism

The JS pre-parsing mechanism, also known as variable promotion, is often thought of as an insight into how JavaScript execution contexts work, especially during creation and execution. These include var enhancement and function enhancement. In a literal sense, “variable promotion” means that variables and functions are moved to the front of the code at the physical level, but this simple understanding is not complete because it is not more than that. In fact, variable and function declarations are not moved in the code, but are moved forward when the code is compiled in memory. In fact, it is not that simple, because there is no such thing as code compilation in the JS world. This is because JS is a markup language. Its code is not compiled but parsed by the JS underlying code parser, which is very detailed, but very different from traditional programming languages. Below I will briefly elaborate on their similarities and differences, just as an understanding, again we simply understand into compilation can be. In traditional compilation languages, to execute a piece of code, even if it is hello world, it needs to go through the three compilation stages of word segmentation/lexical analysis, parsing/parsing, and code generation. However, for JS, most compile time occurs in the first few microseconds before the code is executed. This event is quite transient, a millisecond is only a millionth of a second. Simply put, any JS code is compiled in a very short time before it is executed. The main members involved in compilation are: the JavaScript engine from start to finish, mainly responsible for the compilation and execution process of the program; Compilers that do the dirty work of parsing and code generation; And, of course, the collection and maintenance of a series of queries with all declared identifiers and the scoping of access to these identifiers by currently executing code according to a very strict set of rules. There is no mention of the presentation layer of the pre-parsing mechanism.

  • The pre-parsed objects are variables and functions, and when the code is compiled, the underlying layer pushes all var and function declarations to the top of the scope of the currently declared code. It is important to note that the promotion of var declarations is only limited to declarations, and does not include assignments; Function elevates its entire function body; It is also important to note that the var in the current scope will be pre-parsed first and the function will be parsed later. Therefore, if the name of the function is generated, the latter will override the former.

2.3 Scope and chain of action

Scope is usually a piece of code used in the variables and functions are not available at all times, this is due to JS variables and functions for the availability of the scope is limited, that is, scope. The addition of scope limits improves the locality of the program logic, enhances the reliability of the program, and reduces the problem of naming conflicts. Classification: scopes are divided into global scopes and local scopes. Local scopes are divided into function scopes and ES6 block scopes. A global scope is code declared by var or function outside any function, and this data can be called anywhere globally. It should be pointed out that there is a Window object in JS, which is the top-level object of JS in the browser. Its methods and properties are global, and the properties and methods under Window can be directly called without adding Window as the qualification. Var and function declared data will be automatically mounted to the Window object. In addition, variables that are not declared in strict mode are also global variables and will also be mounted to the Window object. A function scope is data that is declared only inside a function via var or function and can only be used inside the current function. Note: excessive use of global variables is not recommended, as this can cause global pollution. Simply put, naming conflicts in global variables can lead to code conflicts, which can bring unpredictable risks and uncertainties to code. Scope chain: * * * * in the scope chain is JS data lookup rules, using a piece of data in a JS, first in the current role of the data call lookup, second in his father’s scope to find, if still not found, will continue to up a layer of parent scope to look up, until find the global scope, still couldn’t find it would be an error. Scope chain. The essence of closure is to use the presentation layer of scope chain. The child scope calls the data of the parent scope, so the data of the parent scope remains referenced and cannot be collected through THE JS garbage collection mechanism. In this way, the data still has the temporary persistence of data. Function objects can be related to each other through scope chains, and data declared in the body of a function can be stored within the scope of the function, a property known in computer science as closures. That is, the data in the function body is hidden in the scope chain, which looks like the function wraps the data. From the perspective of driven technology, all functions of JS belong to closures, because functions are all objects associated with the scope chain, and the data in the function is stored in the function scope.

// Common closure form
function (){
	var a=0;
	return function(){console.log(a++);}
}

function(){
	var a=0;
	for(var i=0; i<3; i++){ (function(){a++; }) (); }}function(){
	var a=0;
	el.onclick = (function(){return function(){a++}; }) (); }var func = function(){
	var a = 0;
	return function(){a++};
}
Copy the code

2.4 this point

This refers to the environment object of the current code. This refers to the window outside any function; This refers to whoever calls this function inside the function. It should be noted that this of function under Use strict mode reflects a more reasonable, safer and more rigorous development direction of JS. In strict mode, if function is not called as an object attribute, this refers to undefined. By default, it is called as an attribute (method, event, etc.) of an object, pointing to the current object, and otherwise pointing to the window. Specific directions are as follows:

  • The global call function name () points to window;
  • Object calls object. Function name () who calls to whom;
  • Self-executing functions point to the window;
  • Event handlers point to event sources;
  • Timer handlers point to the event source;
  • The function defines an indeterminate point when not called.

The default this reference in JS is not fixed and can be changed by functions. The modifications point to call(), apply(), and bind().

 // call();Fn. call(new to the object, starting with the second argument that is required by the function itself);// apply();Fn. apply(new point to object,[] array to fill in the parameters required by the function itself);Call () and apply() are essentially the same. Call () and apply() are essentially the same. Call () and apply() are essentially the same.

// bind()Fn. bind(new point to object, argument required by function itself);/* Bind () not only changes this, but also returns a new function, assigning the body of the original function to the new function to return. And bind can't change this execution again by changing this to refer to the new function returned; Note that this approach does not execute the original function; Bind (); bind(); bind(); * /
Copy the code

The underlying implementation of bind completes the analysis of why the new function that bind changed this to cannot be changed again:

function bind (fn,_this,... arg){
	return function(. arg2){ fn.call(_this,... arg,.. arg2); }; }Copy the code

3.next

The next section shares information about TIMER, date objects, arrays, and string methods.