ES basic knowledge and high frequency test center combing

Knowledge Point Grooming Catalog List

• Variable type
  • Data type classification and judgment of JS
  • Value types and reference types
• Prototypes and prototype chains (inheritance)
  • Definition of prototypes and prototype chains
  • Inheritance notation
• Scopes and closures
  • Execution context
  • This
  • What is a closure?
• Asynchronous
  • Synchronous vs Asynchronous
  • Asynchronous and Single thread
  • Front-end asynchronous scenarios
• The examination of the new standard of ES6/7
  • Arrow functions
  • Module
  • Class
  • Set and map
  • Promise

Variable type

JavaScript is a weakly typed scripting language, which refers to a type that is not required when defining a variable, and is automatically judged when the program is running.

6 primitive types are defined in ECMAScript

• Boolean
• String
• Number
• Undefined
• Null
• Symbol

Title: What methods are used to determine the type? typeof

typeof xxxThe resulting value has the following type:undefined、boolean、number、string、object、function、symbol

• typeof nullAs object a result, this is actually typeof the one bug that is the null original value, the non-reference type
• typeoof [1,2]As a result object , there is no such item in the result, and the reference type function is all but the object
• typeof Symbol()With the typeof get symbol type of worth to be symbol , this is the ES6 new knowledge point

instanceof

Corresponds to the instance and constructor. For example, to determine whether a variable is an array, it typeof cannot be judged, but it can be judged using the [instanceof] array. Because, [1,2] it is an array, its constructor is array: the same

function Foo(name) {    this.name = name}var foo = new Foo('bar')console.log(foo instanceof Foo) // true

Constructorobject.prototype.toString.call () Title: Difference value type vs. reference type for value type and reference type

In addition to the original type, ES also has a reference type, the typeof identified by the above mentioned type, only object and function are reference types, others are value types

Depending on how the variable type is passed in JavaScript, it is divided into 值类型引用类型
Value types include: Boolean、string、number、undefined、null ;
Reference types include: All of the object class, such as date, Array, function, and so on.
On parameter passing, value types are passed by value, and reference types are passed by address

// 值类型var a = 10var b = ab = 20console.log(a)  // 10console.log(b)  // 20

In the code above, a B is a value type, which modifies the assignment individually, without any effect on each other. Then look at the example of the reference type:

// 引用类型var a = {x: 10, y: 20}var b = ab.x = 100b.y = 200console.log(a)  // {x: 100, y: 200}console.log(b)  // {x: 100, y: 200}...

In the preceding code, a B is a reference type. After B = A is executed, the property value of B is modified, and a is changed as well. Because both A and B are reference types, point to the same memory address, that is, they refer to the same value, so B changes the value of a when modifying the property.
Use the topic to further explain.

Title: Say the result of the following code and analyze its cause.

function foo(a){    a = a * 10;}function bar(b){    b.value = 'new';}var a = 1;var b = {value: 'old'};foo(a);bar(b);console.log(a); // 1console.log(b); // value: new...

Through code execution, you will find:

• The value of a does not change
• The value of B has changed.
  This is because the Number type a is passed by value, and the Object type b is passed by address.

* * The reason for this design in JS is: * * by the value of the type, copying a copy into the stack memory, such types generally do not occupy too much memory, and by value delivery guarantees its access speed. The type that is passed by share is the copy of its reference, not the entire copy of its value (the pointer in C), the assurance that an oversized object, and so on, does not cause memory waste because of the constant copying of the content. ...

Reference types are often used in code in the following way, or easily unknowingly causing errors!

var obj = {    a: 1,    b: [1,2,3]}var a = obj.avar b = obj.ba = 2b.push(4)console.log(obj, a, b)

Although obj itself is a variable (object) of reference type, the internal A and B one is a value type one is a reference type, and A's assignment does not change obj.a, but the operation of B is reflected on the Obj object.

Prototypes and prototype chains

JavaScript is a prototype-based language, the prototype is very simple to understand, but it is particularly important, following the topic to understand the concept of JavaScript prototype.

Topic: How to understand the prototype of JavaScript

For this question, the following points can be understood and answered, the following several must be remembered and understood

• 1. Each function data type (function, Class) is born with a prototype property, and the property value of prototype is an object data type;
• 1. The prototype attribute is born with a constructor attribute, and the property value is the class to which the current prototype belongs;
• 3. Each object data type value (object, array, arguments ... ) is born with a __proto__ attribute, which points to the prototype of the class to which the current instance belongs;
• 4. All function data types (normal functions, classes (built-in, custom)) are an instance of a function, which is the base class for all functions;
• 5. All object data types (instances, prototype, objects) are an instance of object, and object is the base class for all object data types;

// 要点一：自由扩展属性var obj = {}; obj.a = 100;var arr = []; arr.a = 100;function fn () {}fn.a = 100;// 要点二：__proto__console.log(obj.__proto__);console.log(arr.__proto__);console.log(fn.__proto__);// 要点三：函数有 prototypeconsole.log(fn.prototype)// 要点四：引用类型的 __proto__ 属性值指向它的构造函数的 prototype 属性值console.log(obj.__proto__ === Object.prototype)...

Prototype

// 构造函数function Foo(name, age) {    this.name = name}Foo.prototype.alertName = function () {    alert(this.name)}// 创建示例var f = new Foo('zhangsan')f.printName = function () {    console.log(this.name)}// 测试f.printName()f.alertName()...

It's good to understand when executing printname, but what happens when you execute Alertname? One more point to remember here. When trying to get a property of an object, if the object itself does not have this property, then it will go to its __proto__ (that is, its constructor prototype) to look for, So F.alertname will find Foo.prototype.alertName. ...

So how do you tell if this property is the property of the object itself? Using hasOwnProperty, the common place is when traversing an object.

var itemfor (item in f) {    // 高级浏览器已经在 for in 中屏蔽了来自原型的属性，但是这里建议大家还是加上这个判断，保证程序的健壮性    if (f.hasOwnProperty(item)) {        console.log(item)    }}...

Topic: How to Understand JS prototype chain prototype chain

Or the above example, what happens if f.tostring () is executed?

// 测试f.printName()f.alertName()f.toString()

Because f it is not toString() in itself, and f.__proto__ (that is Foo.prototype ) not toString . This question still has to come up with that sentence--when trying to get a property of an object, if the object itself does not have this property, it will __proto__ look for it (that is, its constructor prototype ).

If f.__proto__ not found in the toString , then continue to f.__proto__.__proto__ look for, because it f.__proto__ is an ordinary object! ...

• f.__proto__That is Foo.prototype , not found toString , continue to look up
• f.__proto__.__proto__That is Foo.prototype.__proto__ . Foo.prototypeis an ordinary object, so that Foo.prototype.__proto__ 's where Object.prototype you can findtoString...
• So it f.toString finally corresponds to theObject.prototype.toString

So keep looking up, you'll find a chain-like structure, so called "prototype chain". If you have not found the top level, then you fail and return to undefined. What's on the top--Object.prototype.__proto__ === null

This in the prototype

All methods that are obtained and executed from a prototype or a higher-level prototype, where this , when executed, points to the object that is currently executing the triggering event. Therefore this in printname and alertname are f .