I am three diamonds, one of you in “Technology Galaxy” to come together for a lifetime of drifting learning.

Praise is power, attention is recognition, comment is love! See you next time 👋!

This note is based on the summary of teacher Winter’s “Relearning front end”.

In this relearning series, we assume that you have some familiarity with JavaScript, CSS, and HTML. The process of relearning is actually to help us establish a new order in the past knowledge, that is, the process of establishing knowledge system. In the process of re-learning JavaScript, we will take the syntax of JavaScript as a clue, from fine to coarse with you to learn a complete language knowledge of JavaScript.

Languages are classified by grammar

First of all, let’s talk about the taxonomy of commonly used languages. When we talk, we speak Chinese. When we go to study or travel abroad, we need to speak English. I don’t know if you have such experience. When we were abroad, because our English was not very good, we would put the key words together and say so, and then the grammar was wrong, but foreigners also understood. For example, “Long time no see”, we would say “long time no see”, and then foreigners think it’s good, so they add it to the language.

One of the characteristics of this kind of language is that its grammar is not strictly defined, so we call it “non-formal language”, the typical representative is what we usually say.

In computers, most languages are “formal languages” — formal languages have the property of having a formal definition, which is very strict.

And then within formal languages there are also categories, one of which I’ll show you here is the Chomsky genealogy.

Chomsky pedigree: A classified pedigree in computer science that depicts the grammatical expressibility of forms. It was proposed by Noam Chomsky in 1956. It consists of four levels.

  • Unformal language
    • Chinese, English
  • Formal language (Chomsky pedigree)
    • Type 0- : unrestricted grammar —As long as you define what language looks like, right
    • Type 1- : context-dependent grammar —A combination of the same word and sentence, its above, below and content related
    • Type 2- : context-free grammar —The same expression means the same thing no matter where you put it, right
    • Type 3- : regular grammar —A grammar that can be described by regular expressions

In the Chomsky lineage 0123 is an inclusion relation, which means that a context-dependent grammar must also be of type 0-, but not the other way around.

What is a production? (BNF)

  • Generative: a series of grammatical rules (backus-naur Form (BNF) statements obtained by the Tiger compiler after Lexical Analysis and Syntax Analysis of the source program on the computer
  • Backus Normal Form (abbreviated BNF) is a language used to represent context-free grammars, which describe a class of formal languages. It is a set of symbols first introduced by John Backus and Peter Naur to describe the syntax of computer languages.
  • Terminator: eventually appear in the code of the character (https://zh.wikipedia.org/wiki/ terminator and non-terminal)
  • Angle brackets (<.>) to represent syntactic structure names
  • Syntactic structures are divided into infrastructure structures and composite structures that need to be defined with other syntactic structures
    • The infrastructure is called the terminator
    • Compound structures are called nonterminals
  • The quotation mark and the character in between represent the terminator
  • You can have parentheses
  • *Repeated many times
  • |“Or”
  • +Means at least once

Case study:

Let’s use BNF to describe the four familiar operations.

  • Four are far: 1 + 2 * 3
  • Here is the summary:
    • Number
    • +,-,*,/
  • non-terminal
    • MultiplicativeExpression
    • AdditiveExpression

The four operations we learn as kids are addition, subtraction, multiplication and division, which actually have a priority relationship. We can think of it as a 1 plus 2×3 continuous addition, which we can split into a 1 plus 2×3. So 2×3 is its substructure, and then 2 and 3, that’s the Number in this structure, and then the star operator in the middle.

So when we use BNF to describe this far operation, we will first define an addition expression of the form:

  • A list of multiplication expressions 或
  • Additive expression + Multiplication expression 或
  • Additive expression – Multiplication expression

Because BNF is recursive, it can use its own expressions when defining expressions.

Multiplication is similar, except that the expression for multiplication is changed to Number:

  • Number 或
  • Multiplication expression * Number 或
  • Multiplication expression / Number

Finally, let’s see how it works in code:

<MultiplicativeExpression>::=<Number> |
	<MultiplicativeExpression> "*" <Number> |
	<MultiplicativeExpression> "/" <Number> |

<AddtiveExpression>::=<MultiplicativeExpression> |
	<AddtiveExpression> "+" <MultiplicativeExpression> |
	<AddtiveExpression> "-" <MultiplicativeExpression> |
Copy the code

Get into the production formula

So let’s try to understand the Chomsky lineage that we talked about earlier by using the production formula.

Terminator: the character that eventually appears in the code zh.wikipedia.org/wiki/ terminator and not…

  • Type 0- : unrestricted grammar
    • Production:?: : =?
    • In unrestricted grammar it is possible to produce multiple non-terminals
    • So in unrestricted grammar you can write whatever you want
  • Type 1- : context-dependent grammar
    • Production:?<A>?: : =?<B>?
    • Certain restrictions are placed on the writing that can be produced
    • It could be left or right?Write multiple non-terminal characters in
    • But changeable can only be front and back, and is related
    • There must be a fixed, unchanging part in the middle
    • so<A>In front of?It’s above, it’s after?Is the following
  • Type 2- : context-free grammar
    • Production formula: <A>::=?
    • On the left side of the<A>Must be a non-terminal
    • The right of the?It could be anything, it could be a bunch of terminals or it could be a mixture of terminals and non-terminals
  • Type 3- : regular grammar
    • <A>::=<A>?✅, < A > : : =? < A > ❌
    • Regular French has requirements
    • If regular text is recursively defined, then it does not allow you to have the definition A on the tail
    • If the left symbol , then the right must appear at the beginning of the production
    • According to this rule, all regular grammars can be represented by regular expressions

Is JavaScript a context-free grammar, context-free grammar, or regular-free grammar?

JavaScript as a whole is context-free, and the expression part of it is mostly regular, but there are two exceptions:

  1. There’s a new one in the JavaScript expression支那The operator,支那Said chengfang
    • The power operator is actually right associative, so 2 ** 1 ** 2 is 2
    • This is because 1 times 2 is calculated first, 1 to the 2nd power is 1, and then 2 to the 1st power is 2, so it’s going to be 2 instead of 4
    • So because it is right-associative, it is not a regular grammar
    • If these if judgments are added, it is even less regular grammar
  2. For instanceget
    • If we were to write it asget a {return 1}So get is like a keyword
    • But if we were ingetBack to join:So get itself is the property name

So if we follow the Chomsky lineage strictly, JavaScript is context-dependent grammar. In the implementation of JavaScript engine, we can understand the structure of multi-body programming, which is aimed at context-free grammar. Once we encounter context-related places like GET, we will do some special cases with the code alone. So JavaScript is generally not treated as a context-dependent grammar.

Other production formula

In addition to the Chomsky pedigree being defined by BNF, there are many different types of production. For example, EBNF and ABNF are syntactic expansions based on BNF. So in general, each language standard, there will be a custom production writing.

In JavaScript, for example:

AdditiveExpression:
    MultiplicativeExpression
    AdditiveExpression +
MultiplicativeExpression
    AdditiveExpression -
MultiplicativeExpression
Copy the code

It starts with an indent, which is equivalent to the non-terminal character on the left of the production, followed by a colon and then two Spaces of indentation. However, in the JavaScript standard, its non-terminal, plus and minus signs are represented in bold black. So there are so many kinds of expressions on the Internet that you can’t read them all with just one BNF. Although all of them have different standards and ways of writing, their meanings are generally the same. So we need to understand the idea and the principle behind the production, so we can ignore the difference in the expression.

Classification of modern languages

A special case of modern languages

  • In C++, * may represent either a multiplication sign or a pointer, depending on whether the identifier before the asterisk is declared as a type

  • In VB, < may be a less than sign or the beginning of an XML direct quantity, depending on whether the current location accepts an XML direct quantity;

  • In Python, tabs and Spaces at the beginning of a line are treated as indent or dedent, depending on the space at the beginning of the previous line.

  • In JavaScript, / may be a division sign, or the beginning of a regular expression, similar to VB, string template also requires special}, and automatic semicolon insertion rule;

    Classification of languages

Formal language — usage

  • Data description Language – sometimes we need to store pure data and there is no way to program it
    • JSON, HTML, XAML, SQL, CSS
  • A programming language
    • C, C++, Java, C#, Python, Ruby, Perl, PHP, Go, Perl, Lisp, T-SQL, Clojure, Haskell, JavaScript, CoffeeScriptx

Formal language — means of expression

  • Declarative language
    • JSON, HTML, XAML, SQL, CSS, Lisp, Clojure, Haskell
  • Command language
    • C, C++, Java, C#, Python, Ruby, Perl, JavaScript

The nature of a programming language

Turing completeness

  • Imperative – Turing machine
    • goto
    • If and while
  • Declarative — lambda
    • recursive
  • Turing completeness: In computability theory, if a set of rules for manipulating data (such as instruction sets, programming languages, cellular automata) can be used to simulate a single-band Turing machine, it is Turing complete. The term comes from mathematician Alan Turing, who introduced the concept of the Turing machine. Although Turing machines are physically limited in their storage capacity, Turing completeness usually refers to “a universal physical machine or programming language with unlimited storage capacity.”
  • Turing Machine (Turing Machine) : The definitive Turing machine, proposed by Alan Turing in 1936, is a mathematical logic machine that abstracts the computational behavior of human beings. It can be regarded as the ultimate powerful logical machine equivalent to any finite logical mathematical process.

Dynamic and static

  • Dynamic:
    • Run on the user’s device/online server
    • Timing: when the product is actually used
    • Terminology: Runtime
  • Static:
    • Run on the programmer’s device
    • Timing: Product development
    • Term: Compiletime

JavaScript is a language that interprets execution without Compiletime. We will now use Webpack to build our code, but there is no Compiletime. So, today the Runtime and Compiletime are not exactly Compiletime, but you’ll still want to use the custom of Compiletime because JavaScript is also a time for Compiletime, So you’ll also use the word Compiletime to talk about JavaScript features.

The type system

  • Dynamic type system— when the type can be found on the user’s machine
    • JavaScript is a dynamic type system
  • Static type systemA type that can only be found when the programmer writes the code
    • When C++ finally compiles code to the target machine, all type information is lost
  • Semi-dynamic and semi-static type systemsLanguages such as Java provide reflection mechanisms
    • The main type checking and type manipulation at compile time are taken care of at compile time
    • But if you want to get type information at runtime, you can still get it by reflection
  • Strong and weak typesDescribe how type conversions occur in a programming language
    • Strong typing: No implicit conversion (conversion does not happen by default)
    • Weak type: There are implicit conversions (JavaScript is a typical weakly typed language. By default, it converts Number to String and then adds it up to give you a String, String and Boolean double operators, Boolean is converted to Number and then compared to String.
  • The compound type
    • The structure of the body
    • Function signature (including parameter type and return value type)
  • Subtypes – a typical language is C++ (there are some default behaviors when doing type conversions)
  • paradigm
    • Covariance and inverter: https://jkchao.github.io/typescript-book-chinese/tips/covarianceAndContravariance.html
    • Covariant examples: generally can use a generic arrayArray <Parent>Can be used anywhereArray <Child>
    • Contravariant example: anything can be usedFunction <Child>It can be used anywhereFunction <Parent>

The design of general imperative programming languages

In general our imperative language may have slight structural inconsistencies, but it generally falls into five levels.

  • Atom – the smallest component of a language
    • Keywords (Identifier)
    • Literal quantities of characters/numbers
    • Variable name (Variables)
  • Expression – Atomic structures are formed by linking operators and auxiliary symbols
    • Atomic unit
    • Operators — addition, subtraction, multiplication, division, concatenators, and so on
    • Syntax (Punctuator)
  • Statement — Expressions add specific identifiers, keywords, and symbols to form a structure
    • Expression
    • Keyword
    • Syntax (Punctuator)
  • Structure — helps us organize, block, and divide into different reusable structures
    • Functions
    • Class (Class)
    • Process — PASCAL has the concept of Process
    • Namespace – the concept of Namespace is already in C++ / PHP
  • Program – Manages language modules and installations
    • Programs – code that is actually executed
    • Modules – Modules that are ready for reuse
    • Package (Package)
    • Library (Library)

There’s a fairly fixed structure to the way we talk about each level. At each level we use syntax as a clue, but in fact in addition to syntax, the emphasis is on semantics and timing.

“Semantics” is what it looks like in practice when the user uses it. What front-end engineers care about most is what syntax we write and what it looks like on the user’s computer. That’s our transformation process.

The intermediate join syntax runtime is the semantics of the language. We express certain semantics through certain syntax, and finally change the state of the runtime.

You can follow the wechat public account “Technology Galaxy” to learn for life