Shulou(Shulou.com)06/03 Report--

This article shows you what concepts you need to master when you go deep into JavaScript. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

You may often hear people complain that JS is strange and sometimes worthless. The reason for this idea is that they don't know much about how JS works. I also think that JS is handled differently from other languages in some cases, but I can't blame it, it just shows it to you in its own way.

If you love a programming language, you should want to learn more about it and master its concepts one by one.

1. Call stack execution

We all know about stack overflows, but do you know what causes stack overflows? Stack overflows are associated with some operational errors in the call stack.

Once you understand the call stack, you will clearly understand how programming languages like JS are executed.

two。 Original data type

Const foo = "bar"; foo.length; / / 3 foo = "bar"; / / true

Here, when we assign the value bar to the constant foo, it belongs to the primitive type string. Everyone knows that. But have you ever thought about a question: string is a basic data type, how can you call a method?

Is that weird? No, no.

This feature is called autoboxing. Whenever a primitive type is read, the JS background creates a corresponding primitive wrapper type object, which allows us to call some methods to manipulate the data.

Let's start with the above example:

Const foo = "bar"; foo.length; / / 3 foo = "bar"; / / true

The variable foo is a primitive type value, it is not an object, and it should not have methods. But JS has done a series of processing (that is, boxing) for us to enable it to call methods, and the implementation mechanism is as follows:

Create an instance of the String type

Call the specified method in the instance

Destroy this instance

Const foo = new String ("bar"); foo.length foo = = 'bar' foo = null

Through an in-depth understanding of the original data types, we should know how these "weird" situations occur and the logical reasons behind them.

3. Value type and reference type

Recently, I was confused about how reference passing works in JS. Although I know that there are concepts of "pass by reference" and "pass by value" in languages such as C and Java, I'm not sure how it works in JS.

Do you know the reference to this value by a variable assigned to a non-original value in JS? The reference points to the memory location where the value is stored.

Var arr1 = [1JEI 2jue 3]; var arr2 = arr1; arr2.push (10); console.log (arr2); / / [1Med 2MIT 3,10] console.log (arr1); / / [1Met 2Med 3,10]

As you can see in the above example, any changes made to arr2 will also be reflected in arr1. This is because they only hold a reference to the memory address corresponding to the value, not the value itself.

By understanding the concepts of value types and reference types, you will better understand how to assign values and memory references to variables.

4. Forced type conversion

This concept mainly explains the difference between implicit and explicit type enforcement. This is one of the few areas where JS is confused in front-end development. This is especially true for the concept of implicit casting because it represents different data types in different ways.

This is the most common test in JS interviews.

Number ('789') / / explicit + '789' / / implicit 789! = '456' / / implicit 9 >'5' / / implicit 10/null / / implicit true | 0 / / implicit

Once you have mastered the explicit-implicit conversion of types, congratulations on your further understanding of JS.

5. Compare operational symbols and typeof operators

Double-equal and third-class, they look the same on the surface and give the same results in most cases, but they can sometimes lead to unexpected errors.

To understand the difference between the two siblings, we can use typeof to see the type of value being compared.

Typeof 3 / / "number" typeof "abc" / / "string" typeof {} / / "object" typeof true / / "boolean" typeof undefined / / "undefined" typeof function () {} / / "function" typeof [] / / "object" typeof null / / "object"

6. JavaScript scope

Scope is an important embarrassment in JS, and JS is constantly improving its scope. According to Wissam, the simple definition of scope is that the compiler looks for variables and functions when needed.

Understanding the scope helps us to use JavaScript effectively. We also need to understand the global scope as well as the block and function scope, also known as lexical scope. JS scope can be confusing at first, but once you understand how things work behind the scenes, it can be very exciting to use it.

7. Statements and declarations

A JavaScript program is a collection of executable statements. The so-called statement is an executable unit, through the execution of the statement, so as to achieve a certain function. Usually a statement takes up one line and ends with a semicolon. By default, the JavaScript interpreter executes in turn according to the statement writing process. If you want to change this default execution order, you need to use process control statements such as judgment, loop, and so on.

We should know the difference between statements and declarations, which is very helpful for us to fully understand JS.

8. Function expressions and modules that are called immediately

IIFE: Immediately Invoked Function Expression, which means that the function expression is called immediately, that is, the function is called immediately when the function is declared. It is mainly used to avoid polluting the global scope. Later, the ES6 module was introduced, which provides a standard way to avoid global scope contamination, although some people think that it is not a direct substitute for IIFE.

By understanding IIFE and modules, you can build applications with fewer errors due to improper handling of global space. Of course, there are many things we can do with modules.

9. Message queuing and event loops

As stated in the MDN documentation, JavaScript has a concurrency model based on event loops, which are responsible for executing code, collecting and processing events, and executing subtasks in the queue. This model is quite different from models in other languages, such as C and Java.

In the concurrency model, message queues are used to process the earliest messages. Whenever an event occurs, it is added to the message queue. By understanding these concepts, you can better understand how JS works at the bottom and know if your code is running.

10. Time interval

For functions that want to be called in JS, you can use the following two functions:

SetTimeout allows us to run the function once after a specific time interval.

SetInterval allows us to run a function repeatedly, starting at a specific interval and then repeating it continuously at that interval.

These are somewhat related to the previous concepts of message queuing and event handlers. Therefore, by understanding the time interval methods, we can understand how they work and use them effectively in our use cases.

11.JS engine

A JavaScript engine is a computer program or interpreter that executes JS code. The JS engine can be written in multiple languages. For example, the V8 engine that drives Chrome browsers is written in C++, while the SpiderMonkey engine that drives Firefox browsers is written in C and C++.

To write efficient code, you must understand the JS engine you are using. Mobile developers using webview should pay special attention to this.

twelve。 Bitwise operation

Bitwise operations treat values as bits (0 and 1) rather than decimal, hexadecimal, or octal numbers. Bitwise operators perform their operations on such binary representations, but they return standard JavaScript values.

In general, these operations are rarely used in code, but they do have some use cases. For example, you can use them to find even and odd values, color conversion, color extraction, and so on.

With a comprehensive understanding of these bitwise operations, you can make good use of technologies such as WebGL, because it involves many pixel operations.

13. DOM and layout tree

Most of us have heard of the document object Model (DOM), but only a few have a deep understanding of it. Did you know that what you see in the browser is not DOM? It's a render tree, which is actually a combination of DOM and CSSOM.

By understanding how DOM works, how it is structured, and how pages are rendered, we can manipulate web pages dynamically with the help of JS. This is particularly necessary to ensure that our applications have high standards of performance.

14. Classes and factories

JavaScript is not an object-oriented language. However, to mimic the OOP property, a constructor is used. According to Tania, "classes in JavaScript actually provide no other functionality, but provide syntax sugar on prototypes and inheritance because they provide simpler, more elegant syntax. Because other programming languages use classes, class syntax in JS makes it easier for developers to move between languages."

The factory function is a function that returns the class or constructor of the object. According to Eric Elliot, an JS expert, "in JavaScript, any function can return a new object. If it is not a constructor or class, it is called a factory function."

When starting to develop larger applications, it is necessary to understand these two concepts.

15.this keywords and apply,call and bind methods

Personally, I think it's important for a JS developer to understand the this keyword. If you don't understand it correctly, your future projects will often encounter this-related problems.

If you have a clear understanding of the this keyword, you can take a look at the apply,call and bind methods, which can solve the problems caused by this pointing.

16. Constructor and "instanceOf" operator

Constructors are like regular functions. But there are many differences. The function name begins with an uppercase letter and can only be executed by the new operator. Programmers with OOP development experience will be familiar with the new keyword.

To correctly identify the type of object, we use the instanceOf operator. Simply put, it checks whether one object is an instance of another.

This helps you understand how objects inherit from each other, which is achieved through prototypes.

17. Prototype

This is one of the most confusing concepts in JS, even for people with ten years of experience.

Prototypes in JavaScript are mechanisms for sharing common functionality between objects. Almost all objects in JavaScript are instances of Object. Object inherits all properties and methods from Object.prototype.

Simply put, a prototype is the object from which the JS object inherits methods and properties.

By understanding the prototype, you can build efficient and fast applications.

18. Create objects using new,Object.create and Object.assign

There are many ways to create objects. However, most will choose the Object.create method instead of the new keyword. This is for a reason, because when you use the Object.create method, you can use an existing object as a prototype for a newly created object. This allows you to reuse the properties and functionality of existing objects, a bit like the concept of inheritance in OOP.

When you use the Object.assign method, you can copy enumerable properties from one or more source objects to the target object. In this case, the prototype of the target object does not contain the properties of the source object. This is the main difference between the two methods.

By understanding the three ways in which objects are created, you can use them appropriately according to the actual situation to create more efficient programs.

19. Mapfield filter, reduce method

These three methods are very useful when it comes to array operations. They can be found in the Array prototype.

If you have an array and want to do something for each element, you can use the map method.

If you have an array and want to filter some values by certain conditions, you can use the filter method.

The reduce () method executes a reducer function (in ascending order) provided by you on each element in the array, summarizing the results into a single return value.

A typical example is the sum of all the elements of an array:

Let numbers = [1 accumulator 2 currentValue 4 5 5 6] const reduced = numbers.reduce ((accumulator, currentValue) = > accumulator + currentValue) console.log (reduced) / / 21

Note that the above three methods do not change the value of the original array.

20. Pure functions, side effects and state changes

These three concepts are very important for JS developers, and state changes are especially important for developers using React.

A pure function means that the return result of a function depends only on its parameters and has no side effects during execution.

The side effect of a function is that when a function is called, it not only returns the value of the function, but also has an additional effect on the main calling function. The function with side effects not only returns a value, but also does other things, such as:

Modified a variable

Modify the data structure directly

Set the members of an object

Throw an exception or terminate with an error

Print to terminal or read user input

Read or write to a file

Draw a picture on the screen

A state change is where you change the value of the quantity. If you make changes to the variable, it may affect other functions, depending on the value of the variable before it was changed. In the React environment, it is recommended that I do not change the state.

21. Closure

Closures are hard to understand. But once you understand it, you will think that JS is actually quite good. There are enough resources online. You spend enough time learning closures, and it's not difficult to master and understand it.

Closures allow you to access the scope of an external scope in the inner scope. Each time a function is created, a JavaScript closure is created when the function is created.

twenty-two。 Higher order function

Higher-order functions are functions that take other functions as parameters or return results. You can create smaller functions that are responsible for only one task, and then construct complex functions with the help of these smaller functions. This also commits the reusability of the code.

23. Recursion

Recursion is a common concept in all programming languages. To put it simply, recursion is a way to decompose a big problem into a small problem, and then solve the small problem.

Although recursion may be a confusing concept that gives you a headache, with a lot of practice, you can better understand it starting with a few small problems.

24. Set and generator

Collections and generators are newly introduced in ES6. The newly introduced collections are Map,Set,WeakSet and WeakMap. These collections provide us with some very convenient operations. The way you understand them is critical, especially for modern JavaScript.

Generators are sometimes difficult to understand, especially for beginners. Generators allow us to write code functions so that we can pause and restart functions without blocking the execution of other code, which is very unusual in JavaScript.

25. Promise

Jecelyn explained to Promises as follows: "imagine you are a child. Your mother assures you that she will buy you a new mobile phone next week."

You won't know if you can get that phone until next week. Your mother either really bought you a brand new mobile phone, or she didn't buy it for you because she was unhappy.

That's a promise. A Promise has three states, which are:

Pending: you don't know if you'll get that number.

Fulfilled: mom is happy and bought you a new mobile phone.

Rejected: mom is unhappy. I just don't buy it. I can buy whatever I like.

twenty-six。 Asynchronous programming

To understand what asynchronous programming is, we must first accumulate what synchronous programming is. Synchronous programming is thread blocking, and because JS is single-threaded, the code will be executed line by line.

But with asynchronous code, you can perform some time-consuming tasks. This feature is especially useful when you have to perform multiple tasks that take a long time to complete. But in some cases, even code that needs to be executed for a long time may need to be synchronized, and async/await can be used.

twenty-seven。 ES6 arrowhead function

The arrow function is a new feature of ES6 and a grammatical replacement for regular functions. The difference is that the arrow function is not bound to the this,arguments,super or new.target keywords. This makes the arrow function a good choice in some cases and a very bad choice in others.

Therefore, do not use the arrow function in the first place. You need to use them according to your actual situation.

twenty-eight。 Data structure

No matter which programming language you use, data structure is one of the basic knowledge that developers should have.

Bad programmers worry about code, and good programmers worry about data structures and their relationships.

In terms of data structure, you should understand linked lists, queues, stacks, trees, graphs, and hash tables.

twenty-nine。 Time complexity

Regardless of the programming language, time complexity analysis is another basis for computer programming. In order to build better applications, you should write better solutions. To do this, you need to understand the concept of time complexity. Sometimes called BigO.

thirty。 Arithmetic

This is also one of the first things to be taught in the basic computer course. In short, an algorithm is a process of achieving a goal step by step. Programmers should be able to look at anything from an algorithmic point of view.

Although there are a large number of algorithms for thousands of use cases, the following two are common:

Find

Sort

These two use cases are very common to programmers and should at least be aware of the known algorithms that implement them. There is no fixed rule that you should use one of these algorithms, but these algorithms are well known in terms of performance and are well documented.

You can even create your own algorithm and introduce it to the world. If it is better than the currently known algorithm, you may become the next programming star

thirty-one。 Inheritance, Polymorphism and Code reuse

Inheritance in JS can be implemented in prototypes. This is because JS is a non-OOP language. But JS provides some of the functionality of OOP by providing prototype inheritance.

Polymorphism is a concept that objects, variables, or functions can take many forms. In JS, it is a bit difficult to see the effect of polymorphism, because in statically typed systems, the classical type of polymorphism is more obvious.

Both of these concepts can help us achieve better code reuse in JS.

thirty-two。 Design pattern

Design patterns (Design pattern) represent best practices and are often adopted by experienced object-oriented software developers. Design pattern is the solution to the general problems faced by software developers in the process of software development. These solutions are summed up by many software developers after a long period of trial and error.

thirty-three。 Functional programming

Functional programming is a programming paradigm and a style of constructing computer program structures and elements. it regards calculation as the evaluation of mathematical functions and avoids the change of state and the change of data.

You need to master several concepts of functional programming:

Pure function

Immutable

Reference transparency

Higher order function

thirty-four。 The principle of concise code

No matter which programming language you use, this is a basic skill that every developer should master. Each programming language has a separate set of good practices. Although these "good" practices are subjective and vary from workplace to workplace, some practices are considered "good".

By following these code principles, you can ensure that everyone can read and maintain your code. This will also help you and your team work smoothly in the application development process.

thirty-five。 Deconstruction assignment

It is very useful to introduce the deconstruction assignment operator in ES6. For the same use cases, they are simpler and more efficient than previous implementations.

thirty-six。 New features of ES2020

One of the advantages of programming is that if you don't keep learning, you will never become an expert in the field. Programming languages evolve over time as other new features are introduced in each major release.

It also means that your expertise in a concept is likely to expire in the next 10 years, as better alternative versions will be released along with the update. This is a very common situation for any programming language.

ES202 0 has released several new features, including optional links, null merging, dynamic import, and so on. You have to learn these new concepts to keep up with the fast-changing It world.

The above content is to go deep into the concepts that JavaScript needs to master. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.