Summary of methods for creating atoms in JavaScript

Preface

Atomic operations are a cliché in Java multi-threaded programming. The so-called atomic operation refers to an operation that will not be interrupted by the thread scheduling mechanism; once this operation starts, it runs until it ends, and there will be no context switch in the middle (switch to another thread).

Of course JS is single-threaded, so there is no thread interruption. I just borrowed this concept from Java. If no unknown operations are introduced during execution of a piece of JS code, then this piece of code is 100% controllable and safe, which is atomic operations. On the contrary, non-atomic operations may cause obscure bugs due to the introduction of external operations, which makes the code difficult to control.

It can be passed in JavaScript(null)To create atoms, this is a very natural and easy to understand way. However, there are other ways to achieve the same effect. Although conceptually different, they create "atomic objects".

Create atoms

use()

// Method 1atom = (null)

use()

// Method 2atom = (new Object, null)

// OR
atom = ({}, null)

Reset the prototype properties of the constructor

// Method 3function MyObject() {
 // ...
}
(, null);

atom = new MyObject;

Reset the prototype of the class

Note: "Non-derived classes (classes without extends declarations)" is basically consistent with the characteristics when using a normal function as a constructor.

class MyClass {
 // ...
}
(, null);

atom = new MyClass;

Use a class derived from a null value

JavaScript will transfer the extensions null when processingThe prototype is set to null, so the instance of this class is naturally atom. However, classes derived from null values ​​cannot be built directly, so they need to declare their own constructor (the object created and returned with that method as this).

// Method 4class MyClass extends null {
 constructor() {
 return ();
 }
}
atom = new MyClass;

The above example implements the construction methodconstructor()It is a direct referenceAs a prototype, so that the prototype of the MyClass subclass can be referenced during new operation. For example:

// Method 5class MyClassEx extends MyClass {
 get description() {
 return 'class MyClassEx';
 }
}
atom = new MyClassEx;
(); // class MyClassEx

Use a general function and return atoms directly

The following code is compatible with constructors, prototype inheritance, function calls, etc.

// Method 6// (When called as a function, it is an undefined value)function MyAtom() {
 return ( &&  || null);
}

// Example 1atom = new MyAtom;
// Example 2atom = MyAtom();

A special example of using classes to create an atom

In the above method 4, since extends null is declared, the MyClass class must have its own constructor. But in JavaScript,extends nullThe meaning expressed is:

• Because there is an extends declaration, the defaultconstructor()The parent class super() will always be called to create an instance (that is, "this reference is always created by the ancestor class"); however,
• becauseextends nullmeans that the parent class is null, so "call the parent classsuper()"fail.

This is the default class MyClass cannotconstructor() ——Which is the reason why the constructor must be implemented by user code. However, JavaScript only uses extends null to identify the parent class during static syntax analysis. In fact, during runtime, it dynamically searches for super through the internal slot of the method ([[HomeObject]]). ——Since this internal slot points to the class MyClass (or the prototype property of the class), the so-called super is actually the following calculation value:

// for static class methods
_super = (MyClass)

// for instance methods
_super = ()

In this case, we can declare a class that "can create atoms" through the following code. For example:

// Method 7Atom = (class extends null {}, Object)
atom = new Atom;

In this method, Atom actually points to the class expression and resets its prototype:

// (The following is equivalent to the first line of code in method 7)Atom = class extends null {};
(, null);
(Atom, Object);

inextends nullDecidedThe prototype points to a null value, andsetPrototypeOf(...)Decided whennew Atom()When the object is actuallyObject() ——This super was created. Therefore, whennew AtomWhen the actual operation occurs is:

// (The following is equivalent to the second line of code in method 7)_this = new Object(); // call super()
(_this, ); // prototype is null
atom = _this;

So Method 7 is a technique to create atoms "with JavaScript native constructors". For example, the easiest way to get an Arguments() constructor is actually like this:

let Arguments = (class extends null {}, Array);

The object obtained in this way will be exactly the same as the argument created in the function call built-in JavaScript:

// (JavaScript's arguments object is also an atom)let arguments = new Arguments(1,2,3); // more paraments

However, in ES6 arguments also implement the iterator interface, so an additional line of code is needed to handle it:

// for ES6
[] = [][];

other

1. About Mapping Classes

In Metameta(@aimingoo/metameta  （Local download)) You can use() to get a mapping class, which is the same as method 7 above:

// Method 8 (in metameta)MyAtomObject = (Object);
atom = new MyAtomObject;

Interestingly, the "MyAtomObject class" obtained in this way (called the Object class in Metameta) will inherit all the class methods from, such as (), etc. These methods can also be used directly in the metasystem. For example:

// (in metameta)
Objext = (Object);
(new Objext);

2. About extends

In Method 4 mentioned above, extends null is equivalent toThe prototype is set to null, and this technique is also used in method 7 - so in fact, in Metameta(@aimingoo/metameta  （Local downloadImplemented in ))MetaMeta()When usedextends That is equivalent to:

// class MyClass extends  ...
(, )

This technique is used in the classconstructor()In the method, a new class (the expression declared by the class) is returned.

Summarize

The above is the entire content of this article. I hope that the content of this article has a certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.