A lot of beginner friends often ask me, what do I need to learn about front-end JavaScript? What are the key knowledge of JavaScript?
In fact, do front-end development engineers, all knowledge points are necessary for us to learn things, only a solid technical foundation is the key to a high salary!
However, JavaScript knowledge is more, the content of an article can not be finished. Today, we will come to some knowledge points difficulty dry goods, we will understand a few basic difficult knowledge of JavaScript, to check for you, do not understand the knowledge can go to check, or can also talk about Teacher Li private.
Understand JavaScript object-oriented programming
Object – oriented three characteristics: inheritance, encapsulation, polymorphism
1. Achieve prototype inheritance through prototype in JS
2. JS objects can be impersonated by objects to achieve multiple inheritance
3. The Object class is the base class of all Js classes
4. Encapsulate objects with function
Reloading arguments by using arguments
ES6 syntactic sugar can directly define class extends object
Eight JavaScript data types
1. Basic data types:
Undefined: everything unknown, nothing, unimaginable, code can’t handle.
Note: Typeof (Undefined) returns Undefined. You can assign Undefined to any variable or attribute, but this does not mean that the variable is cleared. Instead, it adds an attribute.
Null: There is a concept, but nothing. There seems to be no, there is no. It’s hard to imagine, but you can handle it in code.
Note: Typeof (Null) returns Object, but Null is not Object, and variables with Null values are not Object.
Boolean: Boolean type, true or false, no doubt. Right is right, wrong is wrong, absolutely clear. Can be handled by the code, but also can control the flow of the code.
Number: things that are linear in size and order. Easy for code batch processing, but also control code iteration and loop.
Note: Both Typeof (NaN) and Typeof (Infinity) return number.
The structure in which NaN participates in any numerical calculation is NaN, and NaN! = NaN. Infinity/Infinity = NaN.
String: Type of String, oriented toward human rational things, not machine signals. Human-machine communication, code to understand human intentions and so on, all depend on it.
2. Reference data types: Object, Array, and Function
Several ways to determine data types
1, the typeof
2, the prototype
3, instanceof
4, the constructor
5, and the Object. The prototype. ToString. Call (a)
Note: typeof NULL === Object
Object
All objects in JavaScript inherit from Object
The constructor property is a constructor that holds the current Object, which in the previous example was the Object method.
The hasOwnProperty method takes a string parameter that represents the property name and is used to determine whether the property is in the current object instance rather than in the object’s stereotype chain.
The isPrototype method receives an object that determines whether the current object is on the prototype chain of the passed parameter object
Some method uses of Array data
Concat() concates two or more arrays
Splice (index,len,[item]) deletes the element and adds a new element to the array.
Slice() returns the selected element from an existing array
Join() puts all the elements of an array into a single string, separated by the specified delimiter
Push () adds elements to the end of the array and returns the new length
Unshift () adds elements to the front of the array
Pop () removes the last element of the array and returns the value of that element
Reverse () reverses the order of elements in an array
Shift () removes and returns the first element in the array
Sort () sorts array elements
ToSource () returns the source code for this object
ToString () converts an array to a string and returns the result
ToLocaleString () converts the array to a local array and returns the result
ValueOf () returns the original valueOf the object
The operation method of these array objects, you can browse the development documentation to become familiar with.
Function
Two ways to customize functions
1.function fnName(){}
2. var fnName=function(){}
The return value of the function:
1. If the function has no definite return value, the function returns undefined.
2. A return value is returned.
The argument list of a function is mutable, the data type is arbitrary, JS has a variable, and argument has access to all the arguments passed into the function.
Js supports the creation of dynamic functions, which must be defined as Function objects.
JavaScript itself does not support function overloading. If two methods have the same name, even if the number of arguments is different, then the method defined later will override the previous definition, and the method defined after the call will always be called.
But javascript overloading can be done in other ways, as in the previous tweet “Duplicate names overwrite? How does javascript overloading work?” Li teacher very detailed explanation of two javascript to achieve overloading methods, you can go to review.
How Ajax requests work
Send an asynchronous request to the server via an XMLHttpRequest object to get data from the server.
JavaScript is then used to manipulate the DOM to update the page.
XMLHttpRequest is the core mechanism of Ajax. It was first introduced in IE5 and is a technology that supports asynchronous requests.
Simply put, JavaScript can make requests to the server and respond to them in a timely manner. Without blocking the user. Achieve no refresh effect.
An event triggers the creation of an XMLHttpRequest object, which sets the HTTP method (POST/GET), the destination URL, and the callback function after the request is returned to the XMLHttpRequest object, and sends the request to the server through XMLHttpRequest. The interface continues to respond to the user after the request is sent, and only when the request is actually returned from the server does callback() be called to process the response data.
Closure
Closures are functions that can read variables inside other functions.
Because in the JavaScript language, local variables can only be read by children inside a function, closures can be understood simply as “functions defined inside a function.” So essentially, closures are a bridge between the inside of a function and the outside of a function.
Closures are used to: 1. Get local variables inside a function. 2. Keep these variables in memory at all times.
Note:
1. Closures will keep variables in the function in memory all the time, so do not abuse closures, which will easily lead to memory leakage and affect the performance of the web page. The solution is to delete all variables that are no longer used before exiting the function.
2. Closures change the values of variables inside the parent function outside the parent function. So, if you use a parent function as an object, a closure as its Public Method, and internal variables as its private values, be careful not to arbitrarily change the values of the parent function’s internal variables.
For more information on closures, the previous tweet “Interviewer asks me: What is a JavaScript closure and what should I say?” Miss Li gave a very visual explanation.
How this works
This always refers to an object that is dynamically bound at runtime based on the execution environment of the function, not the environment in which the function was declared.
Normal function calls refer to the window object;
Object method is invoked to point to the object;
If the object method has a local method, the this in it points to the window object;
In ES5 mode, this refers to the window will be undefined;
When Apply, call, change this dynamically
Prototype chain
To understand the premise of prototype chains, first understand prototypes. The previous tweet “Front-end Developer Syntax Basics: How to Understand JavaScript Prototypes?” Teacher Li has a detailed explanation, I will not do a detailed explanation here.
Every JS object has a Prototype property that points to the prototype that the object inherits.
The stereotype object has a constructor property that points to the constructor.
The instance object has a __proto__ property, which also points to the prototype object, and this property is not a standard property and cannot be used in programming, it is used for internal browser use.
Stereotype chain: A finite chain of instances and stereotypes is used to implement shared properties and inheritance.
Regarding prototype chains, the previous tweet “How to Understand JavaScript prototypes and prototype chains?” Teacher Li has also talked about it in detail
Today’s content is mainly a knowledge summary and the previous knowledge review, learning front-end development, need long-term accumulation and continuous efforts.
If you want to be a front-end developer, if your current learning has hit a bottleneck. Welcome to add Teacher Li’s wechat and teacher communication.
