Deep understanding of JavaScript - the beginning

Lifetime accumulation of knowledge, self-study accounts for at least 90%

What JavaScript-related keywords come to our minds based on five years of work

Types, Objects, Functions, Prototypes, Prototype Chains, Inheritance, Lexical Scope, Scope Chains, Execution Context, Execution Context Stack, this, Closures, Garbage Collection, Event Loop...

What is the connection between these knowledge points? the author thinks:

Each knowledge point is related to each other, just like cities, cities have urban agglomerations, a large urban agglomeration is a large knowledge point, and each small knowledge point is also connected

If you compare the front-end knowledge points to the cities and provinces on the map of China, the JavaScript foundation is the "Yangtze River Delta", which is one of the most important places in China and a must-have knowledge point for an advanced front-end.

The author will write a series, from what JavaScript is, to what JavaScript consists of, explain the composition of the language, and lead to data types. JavaScript data types are composed of basic types and reference types. From the difference between the two to how to distinguish between the two, four identification methods are introduced: typeof (operator), instanceof (operator), constructor (construction method), Object.prototype .toString.call(source) (prototype method), summarize their advantages and disadvantages, and finally write a method to judge the data type - isType

There is a saying: in JavaScript, everything is an object. If you understand objects, you understand JavaScript. Therefore, we will use the topic of everything as an object to verify whether this view is correct

After understanding objects, we know that "object" in JavaScript has multiple meanings, including not only built-in objects such as Object, Function, Array, etc., but also host objects and custom objects.

In this case, we will start from the built-in constructor Object, from properties to methods, and then from creating objects to copying objects. Among them, new and Object.create in the method of creating objects are explained in a separate article, and copying objects cannot be explained in one or two sentences, so I will also write an article to introduce

And from the vast majority of "elements" in JavaScript are objects (except null, undefined) as an opportunity, think about why this is. The reason is that JavaScript is a language based on prototypal inheritance, so learn about prototypes and inheritance (although we also mention prototypes in new). In the article Inheritance, when drawing the relationship diagram of the prototype chain, I was puzzled by this behavior Function.__proto__ === Function.prototype , and I was curious about the source of the prototype chain, and who was the source of inheritance, so there is a JavaScript the first emperor

After understanding prototype and inheritance, you will be curious about its application. Taking instanceof as an example, I will write an instanceof - looking for ancestral home.

In this way, we have finished talking about Object, then we will talk about Function, and why functions are first-class citizens. Like Object, we talk about methods from properties, and introduce the use of creating functions and calling functions. With these foundations in place, let's introduce why functions are first-class citizens. As a first-class citizen, it is not only because it is an object (which can be assigned to a variable), but also because it has the unique "talent" of functions, functions can be used as parameters of other functions, and functions have return values. In addition, it also has function scope, this), immediate execution function, arguments and other unique features of functions

In this way, we will explain these features one by one. When it comes to this, we will derive the three prototype methods on the Function prototype based on its usage "who calls me, who I point to": call/apply/bind, how do they To achieve it, and how to write it by hand, we will write a separate article - call, apply, bind three generals

As for why this is dynamic, not based on the location where it is written like the scope, to understand this phenomenon, you need to understand the execution context and call stack, and before talking about the execution context, you need to understand A Concept - Lexical Environment

That is to say, when we know the lexical environment and execution context, we can explain the classic saying of this, and we can even compare the execution context and scope. Having said so much, after knowing many concepts, we can introduce closures, and applications derived from closures, such as anti-shake and throttling, functional programming, and its impact - garbage collection mechanism Another good question, will be listed separately

In this way, we have finished talking about Object and Function, and then talk about Array and String. The rest of the built-in constructors do not need to be described in detail.

In general, the author hopes to be able to link each other, because there are these and other problems, so there is a corresponding solution. Just like if you want to understand the closure, you must know the scope and execution context, and the execution context is derived from this, and to introduce it (execution context), you must first introduce the knowledge points of the lexical environment and the execution code stage

Compared with Function, the knowledge points that can be drawn are the most, followed by Object, and Array and String can have some common methods. You see, the imbalance of knowledge is vividly reflected.

The author always believes that to understand a knowledge point, you should start by wanting to know what it is and what it can do, and then understand its background knowledge, rather than first understanding its background knowledge and then telling you what it can do what. Because we start from the needs, we must do it first, and then understand the principle.

The author's experience

When I was interviewing in the year I just graduated, I was afraid of being asked: prototype, prototype chain, closure, execution context, inheritance... After a year, I began to ask ES6 questions, React/Vue, and later, began to ask handwriting defense Throttle throttling, deep copy, the packaging principle of webpack, etc., now the front end starts to face the algorithm. In short, there are always people who know more than you, and there are always questions that will ask you, and what we need to do is to lay a solid foundation

Next, the author will update every Tuesday and Thursday, and strive to write this series of articles well