JavaScript中创建原子的方法总结

前言

原子操作这是Java多线程编程的老生常谈了。所谓原子操作是指不会被线程调度机制打断的操作;这种操作一旦开始,就一直运行到结束,中间不会有任何 context switch (切换到另一个线程)。

当然JS是单线程的,所以不存在线程打断这么一说,我只是从Java中借引了这么一个概念。如果一段JS代码在执行过程中没有未知操作被引入,那么这段代码就是100%可控和安全的,这就是原子操作。反之非原子操作可能会因为外界操作的引入导致代码变得难以控制而产生隐晦的bug。

JavaScript中可以通过Object.create(null)来创建原子,这是非常自然而又易于理解的方式。不过也有一些其它的方法来实现相同的效果,虽然在概念上有所不同,但是它们创建的一样是“原子对象”。

创建原子

使用Object.create()

rush:js;"> // 方法1 atom = Object.create(null)

使用Object.setPrototypeOf()

rush:js;"> // 方法2 atom = Object.setPrototypeOf(new Object,null)

// OR
atom = Object.setPrototypeOf({},null)

重置构造器的原型属性

rush:js;"> // 方法3 function MyObject() { // ... } Object.setPrototypeOf(MyObject.prototype,null);

atom = new MyObject;

重置类的原型

注:“非派生类(没有extends声明的类)”,与将一个普通函数用作构造器时的特性基本一致。

rush:js;"> class MyClass { // ... } Object.setPrototypeOf(MyClass.prototype,null);

atom = new MyClass;

使用派生自null值的类

JavaScript在处理extends null时会将MyClass.prototype的原型置为null,因此这个类构建的实例自然就是atom。但是,派生自null值的类无法直接构建,因此需要声明自己的构造方法(以该方法创建和返回的对象作为this)。

rush:js;"> // 方法4 class MyClass extends null { constructor() { return Object.create(new.target.prototype); } } atom = new MyClass;

上例在实现构造方法constructor()时是直接引用new.target.prototype来作为原型的,这样也就可以在new运算时引用到MyClass子类的原型。例如:

rush:js;"> // 方法5 class MyClassEx extends MyClass { get description() { return 'class MyClassEx'; } } atom = new MyClassEx; console.log(atom.description); // class MyClassEx

使用一般函数并直接返回原子

下面的代码是兼容构造器、原型继承和函数调用等方式的。

rush:js;"> // 方法6 // (当作为函数调用时,new.target为undefined值) function MyAtom() { return Object.create(new.target && new.target.prototype || null); }

// 示例1
atom = new MyAtom;
// 示例2
atom = MyAtom();

使用类来创建原子的一个特例

在上述方法4中,由于声明了extends null,因此类MyClass必须拥有一个自己的构造方法。但事实上在JavaScript中,extends null所表达的含义是:

  • 因为有extends声明,所以认的constructor()将总是调用父类super()来创建实例(亦即是所谓“this引用总是由祖先类创建的”);但是,
  • 由于extends null意味着父类为null,因此“调用父类super() ”失败。

这是类MyClass不能使用认的constructor() ——而“通常”必须由用户代码来实现构造方法的原因。然而JavaScript只是在静态语法分析时才通过extends null来识别父类,真正在运行期时,它是通过方法的内部槽([[HomeObject]])来动态查找super的。——由于该内部槽指向类MyClass(或类的原型属性MyClass.prototype),因此所谓的super其实就是如下的运算值:

rush:js;"> // for static class methods _super = Object.getPrototypeOf(MyClass)

// for instance methods
_super = Object.getPrototypeOf(MyClass.prototype)

既然如此,我们就可以通过如下的代码来声明一个“可以创建原子”的类。例如:

rush:js;"> // 方法7 Atom = Object.setPrototypeOf(class extends null {},Object) atom = new Atom;

在这方法中,实际上Atom指向类表达式,并且重置了它的原型:

rush:js;"> // (如下等价于方法7的第一行代码) Atom = class extends null {}; Object.setPrototypeOf(Atom.prototype,null); Object.setPrototypeOf(Atom,Object);

其中extends null决定了Atom.prototype的原型指向一个null值,而setPrototypeOf(...)决定了当new Atom()时,对象实际上是由Object() ——这个super来创建的。因此,当new Atom时,实际发生的操作是:

rush:js;"> // (如下等价于方法7的第二行代码) _this = new Object(); // call super() Object.setPrototypeOf(_this,Atom.prototype); // prototype is null atom = _this;

所以方法7是一种能够“利用JavaScript原生构造器”来创建原子的技巧。比如最简单的获得一个Arguments()构造器的方法其实是这样:

rush:js;"> let Arguments = Object.setPrototypeOf(class extends null {},Array);

这样得到的对象将与JavaScript内置在函数调用中创建的argument完全一致:

rush:js;"> // (JavaScript的arguments对象也是原子) let arguments = new Arguments(1,2,3); // more paraments

不过在ES6中arguments也实现了迭代器界面,因此需要一行额外的代码来处理之:

rush:js;"> // for ES6 Arguments.prototype[Symbol.iterator] = [][Symbol.iterator];

其它

1. 关于映射类

MetaMeta( ))中,可以使用Meta.from()来得到一个映射类,这与上面的方法7是相同的方式:

rush:js;"> // 方法8(in MetaMeta) MyAtomObject = Meta.from(Object); atom = new MyAtomObject;

有趣的是,这样得到的“MyAtomObject类”(在MetaMeta中称为Objext类)将继承所有来自Object.xxx的类方法,例如Object.keys()等。这些方法在元系统中也是可以直接使用的。例如:

rush:js;"> // (in MetaMeta) Objext = Meta.from(Object); Objext.keys(new Objext);

2. 关于extends new.target

上面在方法4中提到extends null相当于将MyClass.prototype的原型设为null,——在方法7中也使用了这一技巧——因此事实上在MetaMeta( ))中实现MetaMeta()时,采用的extends new.target也就相当于:

rush:js;"> // class MyClass extends new.target ... Object.setPrototypeOf(MyClass.prototype,new.target)

这一技巧用在类的constructor()方法中,返回一个新的类(类声明的表达式)。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...