Js Review (5)

The arrangement of scattered knowledge in JS

Variable ascension

As we know, one of the differences between LET and VAR is variable promotion.

Var raises the variable to the start of the global. If you call a variable declared by var before var, undefined will appear.

For let, there is a temporary dead zone, that is, an error is reported if a variable declared by let is called before let.

However, in addition to var, there is also a “function boost” for function.

F () var f=function(){console.log("123")Copy the code

Var boosts f up, but it’s undefined

F () function f(){console.log("123")Copy the code

The function is going to go up and up and up again, var or function, which comes first? :

var a = 1; Function a() {console.log(1)} console.log(a) // outputs 1Copy the code

The function will be upgraded before var.

var a = 1; Console.log (a) function a() {console.log(1)} // Output 1Copy the code

But!

console.log(a) var a = 1; Function a() {console.log(1)}Copy the code

If the function is upgraded to var, the output should not be undefined. Var a is ignored when a exists!

The Proxy agent

Proxy is a new feature proposed in ES6.

We can see that in Vue3.0, proxy is used to replace Object. DefineProperty to realize data responsive operation.

Object.defineProperty

let obj={}
let newVal=''
Object.defineProperty(obj,'name'.{
    get(){
        return newVal
    }
    set(val){
        newVal=val
    }
})
Copy the code

Note that when using the set method, do not operate on the property directly, but set a “third party” newVal to set it, otherwise it will loop indefinitely

Basic usage of proxy

Let p=new Proxy(target,handler) Target represents the object to which the Proxy is to be added. Handler is used to intercept operations from the defined object.

Once set, all we need to do is add the desired properties to p to apply to target.

Let obj={name:'xiaoming'} let p=new Proxy(obj,{}) console.log(p.name) Console. log(p.name)// Displays hh console.log(obj.name)// displays hhCopy the code

Here, we use hasOwnProperty to determine if it’s our property, and we’ll still get true

Moreover, the prototype of proxy is indearticles.therefore, neither OBJ itself nor the proxy will instanceof proxy.

---

During the setting process, we can set interception operation in the second parameter of Proxy. The usual interception methods are: GET to get, set.

Get (target,prop){} set(target,prop,val){return a Boolean value} // Object, property, valueCopy the code

In addition, from the ownKeys, delateProperty, apply, the construct of interceptor operations

Note that when using the set method, do not operate directly on the property. Instead, set a third party.

Reflect

Reflect moves some of the properties and methods on Object to Reflect to make Object more functional. Reflect’s methods correspond to Proxy

Deconstruction assignment

This is often used in real development, where = is assigned to the same pattern on both sides.

Let [a, b, c] = [1, 2, 3]. The console log (a, b, c) / / 1, 2, 3 let [a, b, c] = [1, 2, [3, 4]] the console, log (a, b, c) / / 1, 2, let [3, 4] [a, b, [c]] = [1, 2, [3, 4]]. The console log (a, b, c) / / 1, 2, 3) (4 no assignment let [a, b, c, d = 5] = [1, 2, 3]. The console log (a, b, c, d) / / 1,2,3,5 (default) there is no corresponding,Copy the code

Destruct assignment can be used not only for arrays, but also for objects and strings. As with arrays, you can use default values.

Let user={name:'huha', age:14} let {name,age}=userCopy the code

Template string

Between two strings, variables can be inserted as ${}. Omitted the previous string with + concatenation way, so that the code is more readable.

The map and set

The set collection

Set is an unordered and unique data structure, specified in ES6 as the reference data type set, which represents a collection.

One of the great things about collections is that there is no duplication, so we can usually de-duplicate arrays by converting an array to a set and then to an array. arr2=[…new Set(arr1)]; Set attributes and methods: size length

1. Add: add ()
2. Delete: delete() clear() Clear
3. Check whether: has() contains

We can also use set.has to determine whether a piece of data exists in a set.

The map of a dictionary

Storing data in key-value pairs, like collections, is deduplicated and unique.

1. Add: Margaret spellings et (key, val)
2. Delete: m. elete (key) m.c Lear ()
3. Change: Margaret spellings et (key, newval)
4. Check: m.g et (key)

WeakSet and WeakMap

WeakSet and WeakMap cannot be traversed.

Because the data in WeakSet and WeakMap are “weak references”. Because it is a weak reference, it is collected by the garbage collection mechanism.

The garbage collection

New generation algorithm

The new generation algorithm is Scavenge. He divided the new generation into two equal half-spaces: from space and to space.

First, the garbage collector in the V8 engine detects that the “from Space” space is about to reach its limit, at which point it performs a garbage collection. Then, it starts from the root, marks all traversed objects, and copies unmarked objects into the “to” space

Finally, all data in from space is cleared and “from space” is set to idle, which becomes “to space” and “to space” becomes “from space”, which is flipped.

This space for time pair algorithm is fine for general objects, but if there are objects resident in memory, it will cause a lot of waste.

Therefore, we need to use the old generation algorithm, and the object after a FROM reversal will enter the old generation

Old generation algorithm

Mark elimination was mainly used in old age.

First, mark all non-root objects in white, then use depth-first traversal, which is depth-first

The depth-first search is traversed along the way, and the visited objects are directly pushed onto the stack. Meanwhile, marking results are placed in marking bitmap (gray)

An object is marked black in the marking bitmap until the stack is empty

After the garbage collector completes the tag, it will wait for the garbage collector to clean up. After the garbage collector completes the tag, it will leave a lot of discontinuous space in the original memory area.

It can only trigger the GC, but the discontinuous space that was cleared can add up to the big one. Unfortunately, the performance of starting a GC is also whizzing down. V8 allowed this to happen? It certainly doesn’t exist!

So clear, new generation of object, again assigned to the old belt and insufficient memory, trigger priority tag (mark – compact), at the end of the tag, he would to object (black), moved to the other side of the memory of the other memory space is not occupied, direct release, next time another object such as a promotion, Relax.

Reprinted from: juejin.cn/post/690923…

globalThis

Methods proposed in ES2020 to get global objects in any environment.

Node is distinguished from the browser’s global objects, global and Window

Parameters of a function

arguments

The argument used to read the function is an array

function a(a, b, c) { c = 10; console.log(arguments); return a + b + c; } console.log(a(1, 1, 1)); [Arguments] {'0': 1, '1': 1, '2': 10} 12Copy the code

Please pay attention! Arguments [2] here has a value of 10 instead of the passed argument 1. Let’s change that

function a(a, b, c = 3) { c = 10; console.log(arguments); return a + b + c; } console.log(a(1, 1, 1)); [Arguments] {'0': 1, '1': 1, '2': 1} 12Copy the code

Here, c, which has a default value, appears as 1 in Arguments

MDN documentation: developer.mozilla.org/zh-CN/docs/…

In strict mode, the presence of residual arguments, default arguments, and destructively assigned arguments does not change the behavior of the Arguments object, but in non-strict mode it does.

When a function in non-strict mode contains no residual arguments, default arguments, and destructed assignments, the values in the Arguments object track the values of the arguments (and vice versa)

a.length

What does the length of the function a above mean? The length of the function? So let’s try it out

console.log(a.length); For a that has a default value for the first C, it prints: 2 for a that has no default value for the second C, it prints: 3Copy the code

The number of arguments to a function that do not have a default value.

---

---

And then when you see it, you’ll continue to add