Home > Web Front-end > JS Tutorial > No-nonsense JavaScript tutorial (complete collection)_javascript skills

No-nonsense JavaScript tutorial (complete collection)_javascript skills

PHP中文网
Release: 2016-05-16 19:00:09
Original
1174 people have browsed it

Many readers think that my book "The Essence of JavaScript Language and Programming Practice" is difficult to read, so I have always wanted to write a simple reading book. Simply, let’s write the simplest one this time.

The 2008.09 issue of "Programmer" has an article called "No Nonsense ErLang", which reminded me of many articles such as "No Nonsense C" and "No Nonsense Book Review", and also thought of There is no "non-nonsense" article about JavaScript, so I decided to write this article. Related to this decision is another reason: many readers think that my book "The Essence of JavaScript Language and Programming Practice" is difficult to read, so I have always wanted to write a simple reading book. Simply, let’s write the simplest one this time.

Disclaimer: If you only want to read complicated things, don’t read this article.
1. JavaScript was originally procedural
JavaScript dating back to the 1.0 era is actually procedural. It has only two basic features. One is that it can be placed directly in the HTML
tag of the web page to take over events, for example:

Copy code The code is as follows:




The second item supports a simple Object constructor (function). In fact, the constructor in this era is more suitable as an initialization function. It should be written like this:

Copy code The code is as follows:

function MyObject() {
this.xxx = '...';
this.yyy = '...';
}
obj = new MyObject();


Therefore, early JavaScript was undoubtedly given the title of "object-based procedural scripting language", which is not unfair at all. In addition to
the above two features, JavaScript has some general scripting language properties, such as:
- The entire .js file is loaded into the execution environment (such as a WEB browser) at once, and after a syntax analysis , start line-by-line execution;
- In the above syntax analysis cycle, (named) functions and variables declared with "var" are pre-processed in an identifier table for use by script code;
- From the global Lines of code or function calls start execution, and the code that cannot be executed during the entire process will not be checked for errors (except for the syntax error checking in the first step).
also has the properties of common procedural languages, for example:
- There are if/for/while/switch and other statements;
- Use function to declare a function, use "(..)" to declare it The formal parameter list, as well as representing function calls and parameter transfers;
- similar to the basic syntax of C language, including the use of "{..}" to represent code blocks, and the use of operation symbols such as "!=";
- An object operation operator "." similar to the Java language, and basic concepts such as properties and methods.
Okay, now you see a basic JavaScript language. Its code only has functions and statement lines like C, and supports very simple
object-oriented programming. OK, this is actually almost all of JavaScript...well...all the basic concepts of grammar. If you have ever used a programming language that is even slightly introductory, you will feel that JavaScript is actually quite simple.
Yeah, "write a function and call it", it's that simple. For example:
function hi() {
alert('hello, world.');
}
hi();

2. A little more complicated is the data type JavaScript has six basic data types, divided into two categories. One type is value types, namely undefined, string, number and boolean; the other type
is reference types, namely function and object. To detect the type of data X, you can simply use "typeof X" to return a string.
In other high-level languages, value types and reference types are distinguished by "whether a value or a reference is passed during access." To put it simply, in the following function
:
function foo(X) {
}
X is passed in the value itself, or a reference to the value (you can imagine it as a pointer), Indicates what type X is.
Different from other languages, JavaScript does not add indicators to the call entry to describe the method of passing values, for example:
function foo(var X) {
// In general high-level languages, var indicates the total value. It is a reference to the variable For example:
function foo(X) {
...
}
foo('123'); // <- string '123' value
foo(aObj); // <- aObj is an object reference
The key to being able to handle it this way is that the JavaScript type system is simple enough. The six basic types include three philosophical concepts: executable and non-executable; objects or non-objects; presence (value) or absence (value). Obviously, it is not easy to understand this philosophical idea, because the more complicated and self-contained logic of
is: functions are also objects, values ​​are also objects, and valueless is also a value.
That’s it for the JavaScript type system. If you want to use it simply, then it is enough to remember the following:
- Three simple value types, string, number, and boolean are used to pass to the web page for display;
- object is used to store other object, function or the above simple value types, and use the '.' operation to find them through an attribute name;
- undefined is used to detect whether the data is valid or invalid;
- function is used to execute.
Of course, if you want to become a thinker or a lunatic in linguistics, then go ahead and think about the philosophical proposition above, I won’t stop you.

3. What you can figure out with your nose is direct measurement

Perhaps many people can’t understand the direct quantity declaration in JavaScript, but it is indeed very simple. Now that most of our high-level languages ​​
support constant declarations, even the most primitive assembly language supports immediate values ​​- for example: // in C #define ABYTE 256
// in delphi
const
ABYTE = 256
; in asm
mov ah, 256

Then of course JavaScript... must... be able to support direct measurement without shame - they actually are a concept. For example:
// in javascript
var
aByte = 256
But when understanding it, you must remember: in all the above codes, the so-called direct quantity or immediate value refers to that' 256', rather than the identifier ABYTE/aByte of that
variable or constant. Furthermore, you need to know that JavaScript supports 8 types of direct quantity declarations:
---------------------
Numeric values: supports integers, floating point and 0x equal base prefix, and...etc.;
Boolean value: true/false;
No value: undefined;
Function: function() { ... }, also known as anonymous function;
String: use '..' or "..", supports multiple lines and escape characters;
Regular expression: uses /../.., supports regular configurations such as g, i, m, etc.;
Array: Use [..] to support nested arrays;
Object: Use {...} to support nested object declarations;
---------------- ----
You can use the above character amount as an individual anywhere in the code - I mean expressions or statement lines. The inference that can be made using the nose
is:
//Since it can be written:
aaa = 'hello, ' 'world';
//Then it must be possible to write:
bbb = [1,2,3] [4,5,6];
//The same can be written:
ccc = /abc/ /cdf/
//Similarly:
// ...
As above, you can put all direct quantities in the middle of expressions or statements. Occasionally, due to the necessity of syntax parsing, you may need to use a pair of
brackets to enclose the direct quantity - otherwise there will be grammatical ambiguity, such as the following:
ddd = (function() {}) (function() {})
Okay, direct measurement is that simple. You just need to hope that you still have a non-degraded nose.
4. Prototypal inheritance
Prototypal inheritance may be the simplest thing in the world.
We assume that an object is a table - the great Anders supports my assumption. He said that JavaScript objects are "property bags" -
Such a table stores "name=value" Such a "name/value" pair. When we want to use the following code:
aObj.name
to find the value, just check it in the table (those who use Delphi should remember TStringList). Object, oh, the so-called object - in
my previous understanding - is "a structure (struct/record) with inheritance relationship". So, what is the inheritance relationship?
That’s it, if the above search fails, for prototypal inheritance, you only need to search in the “prototype” of the aObj object, and that’s it.
This prototype is also an object, recorded in the prototype attribute of the constructor function. For example:
function MyObject() {
// ...
}
MyObject.prototype = xxx;
var aObj = new MyObject()
zzz = aObj.name;
When the attribute name cannot be found in aObj, according to the above rules, it will search in the object xxx, that is, trying to find "xxx.name".
Since xxx itself is also an object, there will also be a constructor function (such as xxxObject()), so when xxx.name cannot be found, it will
go to xxxObject.prototype to find it... so ... Digging so deeply until you can't find it anymore... returns undefined.
How simple. The so-called prototypal inheritance is just a simple retrieval rule.
On the other hand, if you need to allow aObj to access a certain member, you only need to modify its (or their - an instance similar to aObj) prototype
. This is very commonly used in JavaScript. For example, if you want all strings to have a certain attribute:
String.protoype.MyName = 'string'
Or if you want all objects to have a certain attribute (or method, or something else) ), then:
Object.prototype.getMyName = function() {
return this.MyName;
}
How wonderful, now String can also getMyName, and functions can also getMyName, everything is gone People with names also have names - of course, the character
in the name is undefined.
No name is still a name. I never thought about whether you would become a philosophical lunatic. I'm sorry.

5. Functional expressions
This is not an invention of JavaScript. Its inventor is dead, and his invention is still bothering us... just like Edison's lamp
The bubbles are still shining on us.
In fact, functional language is very simple. It is a language implementation solution that is as "complete" as imperative language. Since its basic idea is the same as the command
formula - if you don't want to use this difficult-to-understand noun, just change it to C or Delphi - the language is completely different, so in most
cases, It is also incompatible with these traditional, common, commercial languages.
In fact, you use it every day.
The following line of code is full of functional language ideas:
a b
Really? Really, if you think of the " " sign as a function, it's exactly the same. In fact, the so-called function is an execution process, an operation, a function entry... In other words, something in the code is either data or an operation. And if
it is an operation, you can think of it as a "function". In the above line of code - in the expression, a and b are obviously data, and the number is the operation that performs operations on it, so it can naturally be regarded as a "function, process or operation". So... a "function" that operates on the sum of two numbers can be written
like this:
func_add(a, b)
Or like this:
( a b)
All of that, just text The notation is just different. It's like if I say this symbol is "jia", but you insist on saying it is "ande", another
person insists on pronouncing it "a-d-d". Is there any difference? No.
All programmers write statements, expressions, and operation logic every day. Everyone knows that these things can be written in one... um... extremely large
function, or divided into countless small, beautiful-looking functions. When all these functions are run one after another, it
becomes a "functional language". Therefore, LISP, known as the "grandfather of functional languages", is a language that "connects functional operations" like this:

Copy code The code is as follows:


(defun subst (x y z)
(cond ((atom z)
(cond ((eq z y) x)
('t z)))
('t (cons (subst x y (car z))
(subst x y (cdr z))))))


Some people think it is ugly spaghetti, while others think it is the simplest language. Oh, it's up to you, as long as you understand it, it doesn't matter what it looks like.
Since functional language only has continuously executed functions - it has no "statements" and must achieve logical integrity. Simply put, he
needs to implement the three basic logics of "sequence, branching and looping" in the process of continuous execution. The functional solution is to use ternary conditional operation
to replace if/then/else, which is the following code:
if a then b else c
// is equivalent to
a ? b : c
In addition, recursion (function calling function) is used to implement loops. Considering that recursive function calls will lead to stack overflow (Stack overflow at...),
so functional language proposes "tail recursion", that is, when writing code, "ensure" that only the last one in the function Recursive call during operation.
In this way, this recursive call does not need to retain the stack - because there are no subsequent operations, it can be optimized into a single line of
jmp assembly instructions that do not need to return.
The world is really beautiful. The so-called functional formula is just a bunch of operation entries, as well as jmp, jmp, jmp. But, but, isn't it - this CPU?
6. More advanced functional formula (1)
In fact, the world is not beautiful.
If a CPU is just lying there, it will only have instructions such as sequence, branch, and loop in it. But when it is running, there must be a
clock ticking... ticking... If it is multi-core, there will be several such things ticking at the same time.
This is the problem, the world is not originally a single time sequence, nor is it lawful. So there will be concurrency, interruptions, and exceptions. Functional language should
should extend infinitely like spaghetti. So when there are multiple ticks, should there be multiple spaghetti? But, in this case
is it still called spaghetti?
The solutions in functional expressions are called continuations and nodes. Continuation stops the current process and goes to another place and then returns; node ensures that the code at one location is independent and complete and has nothing to do with another node. In functional languages, multiple nodes are like parallel universes. In most cases, they are transparent to each other. If they want to connect, extremely huge energy and... a wormhole are needed.
We don’t need to delve into the issue of multiple nodes. The space-time issues caused by access in multiple spaces are issues studied by astronomers and space-time multi-dimensional theorists
. We only need to know: If you If there is a cross access relationship between multiple nodes, then the world/universe will be destroyed. Such instructions are written in white papers, reference manuals, and astronauts' daily guides for languages ​​like ErLang that natively support multiple universes. If you want to get to the root of the problem and think you have a clear understanding of more than 300 advanced numbers, physics and astronomy terms, here is an entry guide for programmers, you might as well start from Start here:

http://www.php.cn/
Continuation is one of the ways to solve the status problem. Simply put, when there is time, there is state: there is past, present and future. As for the past, we have history, and we will determine what happens now because of what happened in the past. For example, because we drank too much yesterday, we can only eat gruel today; and now is tomorrow's yesterday, so we must prepare for tomorrow. What can we do to record today’s status, for example, we have eaten porridge today; as for tomorrow, of course, there are many things that will happen, and we have to prepare one by one.
Oh, the important thing is to be "prepared". This is called an event in computer systems. Or call it a plan, or call it an emergency. Do you know why our PC can run? En... because there is an instruction pipeline that executes instructions in a sufficiently small time slice. For a computing system, this scheduled instruction access behavior is an interrupt. So one day a friend asked me: If the execution logic is only sequence, branch and loop, then what are the triggers in the process system? I thought about it for a long time and had no solution. Now to answer this question, we have to add the dimension of "time". The so-called burst, concurrency and similar things are the logic under the concept of timing.
Okay, when we "get ready" to prepare for triggering something in the future - simply put, just think of it as a clock handler (it's called OnTimer in Windows, and in browsers It is called setTimeout/setInterval). In order for us to make a spaghetti meal in functional language at this time, we explain: "We are already prepared" and "How prepared we are." According to the basic principles of functional style, a function has nothing to do with the state, and it has nothing to do with the timing of "the future". This has become a contradiction.
In fact, we have already had a head-on conflict with this contradiction once. This is the "cycle". Because the loop needs a state quantity to indicate the progress of the loop,
이 "진행"은 타이밍과 관련이 있습니다. 함수형 스타일은 이를 해결하기 위해 "재귀"를 사용합니다. 즉, 재귀 함수의 매개변수를 통해 진행 상황을 전달합니다. "재귀 매개변수" 인터페이스의 양쪽에서 함수 표현식은 시간 독립적입니다. 결과적인 문제는 스택 오버플로이고 해결책은 꼬리 재귀입니다. 결과적인 문제는 프로그래밍 복잡성이며, 꼬리 재귀가 모든 재귀를 대체할 수 있는지 여부는... Weinberg는 말했습니다. 그렇습니다. 문제에 대한 모든 해결책은 다음과 같습니다. 새로운 것. 아... 또 와인버그네요. 이제 시스템이 하나 이상의 시계열, 즉 CPU에서 실행되므로 "더 많은 상태"가 분명히 필요합니다. 노드가 있고 "웜홀 없음"을 보장하더라도 여전히 CPU의 과거, 현재, 미래의 문제를 해결해야 합니다.
기능 전문가들은 끈기라는 두 단어를 말했습니다. 간단합니다. 과거, 현재 상태, 미래에 대한 준비를 함수의 매개변수로 전달하면 됩니다. '지금'은 과거와 현재의 상태와 변화뿐만 아니라 미래의 활동까지 포함해야 하기 때문에 폭발할 것 같습니다. 따라서 새로운 해결책은 다음과 같습니다. 지금 폭발하지 않으려면 "연속" 인터페이스에서 계산을 수행하지 마십시오.
'과거' 데이터를 기반으로 의사결정을 내리는 '미래'를 기반으로 하는 작업이 바로 연속성입니다. 이를 지원하는 기능적 특징은 지연 평가입니다. 간단히 말해서,
function f(x, c) {
...
c(x)
}
f(data, f)
전송 인터페이스로 인해; f()에서는 c 자체가 평가되지 않으므로 향후 c(x)가 작동될 때 폭발이 발생할 수도 있고 발생하지 않을 수도 있습니다.
우주의 엔트로피에 한계가 있다면, 이 한계는 미지의 미래에도 있을 것입니다. 게다가 알 수 없는 미래에는 왜곡이 현재로 되돌아오는 것도 가능하다.
지속의 두 가지 원칙은 다음과 같습니다.
---------
성공적인 지속 후에는 새로운 지속(또는 process )
실패하면 이전 선택지점으로 계속 돌아갑니다
---------
바로 그 이유는 persistence 상태, 그리고 이것이 상태와 지속성 자체가 함수 매개변수를 통해 전달되기 때문에 '선택지점으로 복귀'는 미래의 자신을 위한 결정
일 뿐이며 현재 상태와는 아무런 관련이 없습니다.
7. 고급 함수식(2)
어쨌든 프로그래밍 패러다임에서는 일종의 자기순수성을 유지하기 위해 다양한 함수식의 복잡성이 존재합니다. 예를 들어 생성기(generator)
의 문제는 일괄 데이터 생성(증분 등) 사이에 관계가 있고 생성 프로세스가 타이밍과 관련되어 있기 때문입니다(항상 한 번의 호출로 얻어지는 것은 아닙니다
). 모든 데이터)이므로 함수형 언어는 "생성기"와 같은 함수 개념을 정의합니다.
이 수익은 "미래"에서 "현재"로의 웜홀입니다. 이 웜홀을 통해 시계열 관련 데이터를 얻을 수 있습니다. 다음
은 이에 대한 예입니다(Mozilla의 피보나치 수열 예):

Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template