Collation of knowledge points and reading notes of JavaScript Volume I you don't know

Total cost 2020-11-08 10:35:51
collation knowledge points reading notes

I was recommended by my friends before 《 You don't know JavaScript》 This series of books . The upper, middle and lower three books are not thick , The content is also relatively independent . I was supposed to finish reading the first volume and the second volume in a month , But always because of their own laziness to read a month to read the first volume intermittently . I have to say that just reading the first volume is very rewarding for me , The following is the reading notes of the first volume , It's not a document or a tutorial , Just for your own learning record , You are welcome to point out the wrong understanding and opinions of the big guys passing by .

The first part Scope and closure

The first 1 Chapter What is the scope

1.1 Compiler principle

First , I also study JavaScript In limine , Find the information and say JavaScript It's a door “ interpreted ” Language . But in fact JavaScript It's a compiled language .

In traditional compiler languages , Before a piece of source code is executed, it goes through an operation called compilation , The compilation is as follows 3 A process .

  • participle / Lexical analysis (Tokenizing/Lexing)
    This process breaks down the programming language string into meaningful blocks of code , These blocks of code are called lexical units (token)
var a = 2;
// It will be broken down into var、a、=、2、; These are all lexical units 
// Whether a space belongs to this unit depends on whether it makes sense ,
// there var a = 2; None of the spaces in is meaningful 
  • analysis / Syntax analysis (Parsing)
    A stream of lexical units composed of many lexical units ( Array ) Convert to a tree structure , It's called abstract syntax tree (AbstractSyntaxTree,AST)
var a = 2;
// This sentence is transformed into a tree structure called VariableDeclaration

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-4rnlCF0N-1604651680070)(./ On img/ Abstract syntax tree .png)]

  • Code generation
    Transform the syntax tree into an executable code process .

Other languages are compiled before they are built , and JavaScript This compilation is also performed before execution 3 The part

1.2 Understand the scope

Yes var a = 2; When dealing with , The specific compiler works like this .

//1 encounter var a The compiler will query a collection in the current scope whether there is a This variable ,
// If you have, go ahead with 2 Step compiling action ,
// If not, the current scope will be required to declare a new a Variable 
//2 encounter a = 2 The compiler generates runtime code for this statement , For runtime use .
// At this time, the compiler should express in the generated code a=2 That's what it means , So when generating code ,
// Need one a Variable , First find out whether the set in the current scope contains this variable ,
// If not, go up to the next floor . Until we find it , No, it's a mistake .

Note here that in step 2 in , The compiler will look for the scope set, and there will be 2 Different ways to look up , One is LHS, One is RHS. That is, left query and right query . This and I are learning C++ When it's middle left and right , I feel very familiar with . That is, through the most primitive “=” To understand , On the left is filled , On the right is to fill .
 Insert picture description here

var a = 2;// Here, when the compiler generates code , Will go to the current scope set to find a Variable , Then it's assigned to 2.
// You can think of it as finding this piece called a Space , And fill it in 2 This data ,
// So here's the left query , That is to find the filled a Space 
console.log(a)// Here, when the compiler generates code , Will go to the current scope set to find a Variable , Then print it out .
// You can think of it as finding this called a The value in the variable of , And then use this value ,
// So here's the right query , That is to find and fill ( Or take it out and use it ) Of a The value of space itself !!!

1.3 Scope nesting

In fact, this part of the book is about the scope chain , That is to say var a = 2; When dealing with , In the second step of the specific compiler work, one is needed a Variable , First find out whether the set in the current scope contains this variable , If not, go up to the next floor . Until we find it , Until there is no error at the top . And that's all the way up, down the scope chain .

var b = 3
function foo(a){

// there function The interior is its own functional scope ,function Outside is the global scope .
//function Internal scopes don't have b Variable , Why can we still work specifically ?
// Because of function There is no , So go to the next level , And then there's... In the next level b, You can use 
// This mechanism is scope nesting , Or scope chain .
// I mean , Child scopes can use parent scopes , But the parent scope cannot use the child scope in reverse .
// Of course, the father here 、 The subscope is for individuals to understand , I said , It's not a term .

1.5 abnormal

The first is when the search is successful along the scope chain , But we also said , If you can't find it, you will report an error . Here we look for 2 Medium condition . You can't find it naturally , Error reporting is not the same .
 Insert picture description here

Here is a little verification of the left query in the book .

a = 2// Nothing here var Statement . however a=2 It's a left search , So the left query enthusiastically creates an empty a Variable space .
console.log(a)// The right search result is 2
"use strict"
a = 2// sorry , This left query cannot help generate an empty a Variable space ,
// This statement alone will fail because of the left query , newspaper ReferenceError
console.log(a)// Right search , Definitely fail , This sentence is also a failure report ReferenceError,
// But the first sentence is wrong , It doesn't even work .

The first 2 Chapter Lexical scope

2.1 Lexical stage

First of all, lexical scope is when you write code , The position of a written variable or block scope is a lexical scope . And this lexical analysis ( This is also the previous split statement var a = 2; by var、a、=、2、;), The scope is the same as when you write it . For example, the following code .

var a = 3;// This line is globally scoped 
function foo(a) {

// Inside is foo The block scope formed by a function 
// Write so the following b,bar(), And my own a. It's all in this scope 
// So after the analysis, the relationship is still satisfied 
var b = a * 2;// there a yes foo Inside the function , It's not outside var a = 3; Inside a
function bar(c) {

// Inside is bar The block scope formed by a function 
// So one's own c It belongs here 
bar(b * 3);

Therefore, lexical scope mainly reflects 2 spot :

  • One is to search for variables layer by layer by layer by scope , In this case bar The use of a,b,c From the next level foo.
  • Two is , When a child scope has the same identifier as the parent scope ( It's the variable name 、 Function name ) When , Children will cover ( If you know method rewriting , In this case, the subclass rewrites the parent method ), This is called the shadowing effect . For example, in foo Scope 、 And in the child scope a When , All are foo Function a, instead of foo In the parent scope of the scope var a = 3; Medium a. Of course , When bar There is a When ,bar Use in a When , You'll use yourself a, And coverage foo(a) Of a, And the overall var a = 3 Of a

2.2 Deceptive vocabulary

First of all to remember , Use less deceptive words , Cheating on lexical scopes can lead to performance degradation . Use eval And with Keywords can do this . I'll just write here eval

First eval() To accept a string of strings , And replace the contents of the string to the calling position , A bit abstract , Please look at the code. :

function foo(str,a) {

// Here is foo The lexical scope of formation 
// First pretend eval(str) non-existent 
// There is only a And str It's your own. ,b It's outside 
// So call foo("var b = 3;",1); Should be 1,2 Result 
// Let go of comments eval(str)
// Output is 1,3
// because eval("var b = 3;") It's the same as in this line of business eval Replace the position with 
//var b = 3;
// therefore var b = 3 Medium b Shield the outside b 
var b =2;
foo("var b = 3;",1);//1,3

The first 3 Chapter Function scope and block scope

3.1 Scope in function

  • Function scope : All variables belonging to this function can be used and reused within the scope of the entire function ( In fact, you can also use... In nested scopes ) This design can make full use of JavaScript Variable can change the value type as needed “ dynamic ” characteristic .

3.2 Hidden internal implementation

  • Minimum exposure principle : In software design , It should be minimal exposure to the least content , And hide everything else .
  • stay JavaScript Function scope in can achieve the effect of hidden code
function doSomething(a) {

b = a + doSomethingElse(a * 2);
console.log(b * 3);
function doSomethingElse(a) {

return a - 1;
var b;

Obviously, we can still access this and the time b as well as doSomethingElse() function , But as far as the code is concerned ,b as well as doSomethingElse() Just to give doSomething() Use . Therefore, we should not allow external access to these two identifiers . So it should be hidden

function doSomething(a) {

function doSomethingElse(a) {

return a - 1;
var b;
b = a + doSomethingElse(a * 2);
console.log(b * 3);

3.3 Function scope

Although the previous use of function wrapped code blocks to achieve the hidden meaning , But in some cases, there are still some shortcomings . One is to wrap the hidden function name and pollute the global variables , Then the name of the calling function that must be displayed . But fortunately, we can use the immediate execution function to solve this problem .

(function foo() {

var a = 3;
// Here you can make a function an expression , Instead of a function declaration 
// There's no such thing as foo Let it out and pollute the whole situation , Because he's not a statement 
// And here's the last one (), Means to call immediately , So there's no need to display the use of identifier calls 
// Of course, put the last () The effect of putting it in is the same , It's just that the writing style is different . as follows 
(function foo() {

var a = 3;
  • Then it's a function expression ?

Good question

distinguish : The method in the book is very simple , It's about looking at function Where the keyword appears in the declaration ( It's not just a line of code , It's the position in the whole statement ). If function It's the first word in the statement , So it's a function declaration , Otherwise, it is a function expression .

In the above code (function foo(){…})() It's not function start , This is the expression , and foo The identifier is blocked in foo(){…} in … Part of , So there's no pollution of global variables

  • Anonymity and anonymity
    An anonymous function is a function without a name

console.log("I waited 1 second");

In this part of the code fragment seTimeout in function() There's no name . So it's an anonymous function .

  • Be careful : Only then can function expressions have this kind of anonymous function , Function expression has no function name . Look at the previous code , This is a function expression .

3.4 Block scope

Now we've learned the lexical scope 、 Function scope and some small knowledge points . Now learn the new scope 、 Block scope .

As I said before , Using function scope can hide a piece of code , And hiding means isolation . Isolate a piece of code into a function , Make it untouchable to the outside world . But we can't solve this problem by using outsourcing functions .

// This line of code is just for verification () Medium var i, as well as {} Medium a, Finally, these two identifiers can be accessed externally 
for(var i = 0; i < 10; i++){

console.log("for It calls i",i);
var a = 5;
console.log("for Call out for Inside a",a); //for Call out for Inside a 5 
console.log("for outside for Inside i",i);//for outside for Inside i 10

The following is the use of function wrapping


for(var i = 0; i < 10; i++){

console.log("for It calls i",i);
var a = 5;
console.log("for Call out for Inside a",a);//VM22:7 Uncaught ReferenceError: a is not defined 
console.log("for Call out i",i);//Uncaught ReferenceError: i is not defined

It's done with the blockade , But it's not easy , So the developers are JavaScript Provides block scope . I think it's the same function as function scope , Block the code block in its {} in .

  • let

let Declared variables , Is bound to the current scope .

for(let i = 0; i < 10; i++){

console.log("for It calls i",i);
var a = 5;
console.log("for outside for Inside i",i);//Uncaught ReferenceError: i is not defined

Congratulations ,i It's bound to for Inside the body , Is it more convenient .

Be careful let i, It's not just about putting i Bound to for Cyclic {} in , To be exact, it's bound to every iteration , This is very important . I'll talk about it again later in the closure . meanwhile let Declared identifiers are not promoted , This will be explained in the section on promotion later

  • const
    const Declared variables , Is bound to the current scope , And the value of this variable is fixed , No more changes

  • try/cath
    I didn't think! , Every one of them cath It's all a branch , Unbelievable words , You can give it a try

The first 4 Chapter promote

First come to the conclusion that

  • Only the statement itself will be promoted , And assignment or other running logic will stay in place . If it's to improve the order of execution of the changed code , Can cause serious damage
  • Declaration includes variable declaration and function declaration
  • Each scope is promoted
  • When functions and variables are raised , Functions take precedence . Because functions are first-class citizens
  • let as well as const Declared identifiers are not promoted
var foo;
function foo() {

foo = function () {


The above code will be understood by the engine as follows :

function foo() {

foo = function () {


So functions are promoted first .

The first 5 Chapter Scope and closure

5.1 summary

I love opening , Just sum up .

Closure produces 2 In this case

  • When a function is an argument to another function
  • The function returns... As a return value
function foo() {

var a = 2;
function bar() {

return bar;
var baz = foo();
baz();//2 friend , This is the closure effect 

5.2 Loops and closures

To illustrate closure ,for Loop is a common example

for ( i = 1; i <= 5; i++) {

setTimeout(function timer(){

}, i*1000);

When this code is run again, it will output once per second 5 Time 6.

The callback is called after the end of the loop ( Please check macro task 、 Micro task related knowledge points ), Instead of calling every iteration . So finally called i, however i It's public , And the value is determined by the last loop 6. So the result is 5 Time 6

How to get a real-time version for each iteration i, Even if it is the last iteration of the loop and then call the timing function , But every timing function calls its own version , Instead of calling the last public 6 Well ?

That's every iteration of the loop , We bind one for each iteration i. As shown below , We use let Let every one i All are bound by internal iteration .

for(let i = 1; i <= 5; i++){

setTimeout(function timer(){


5.3 modular

stay js Modules in are also closely related to closures .

modular :

  • There has to be an external closed function , The function must be called once
  • A closed function must return at least one inner function
  • Using immediate execution functions works wonders
var foo = (function(){

var something = "cool";
var another = [1,2,3];
function doSomething() {

function doAnother() {

return {


The second part this And object prototypes

The first 1 Chapter About this

The first 2 Chapter this Comprehensive analysis

The first 3 Chapter object

The first 4 Chapter Mix objects “ class ”

The first 5 Chapter Prototype

The first 6 Chapter Act of commission

To be continued , Finish the second part next Saturday

本文为[Total cost]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple