JavaScript中创建原子的方法总结
作者:aimingoo 发布时间:2023-06-29 12:22:14
前言
原子操作这是Java多线程编程的老生常谈了。所谓原子操作是指不会被线程调度机制打断的操作;这种操作一旦开始,就一直运行到结束,中间不会有任何 context switch (切换到另一个线程)。
当然JS是单线程的,所以不存在线程打断这么一说,我只是从Java中借引了这么一个概念。如果一段JS代码在执行过程中没有未知操作被引入,那么这段代码就是100%可控和安全的,这就是原子操作。反之非原子操作可能会因为外界操作的引入导致代码变得难以控制而产生隐晦的bug。
JavaScript中可以通过Object.create(null)
来创建原子,这是非常自然而又易于理解的方式。不过也有一些其它的方法来实现相同的效果,虽然在概念上有所不同,但是它们创建的一样是“原子对象”。
创建原子
使用Object.create()
// 方法1
atom = Object.create(null)
使用Object.setPrototypeOf()
// 方法2
atom = Object.setPrototypeOf(new Object, null)
// OR
atom = Object.setPrototypeOf({}, null)
重置构造器的原型属性
// 方法3
function MyObject() {
// ...
}
Object.setPrototypeOf(MyObject.prototype, null);
atom = new MyObject;
重置类的原型
注:“非派生类(没有extends声明的类)”,与将一个普通函数用作构造器时的特性基本一致。
class MyClass {
// ...
}
Object.setPrototypeOf(MyClass.prototype, null);
atom = new MyClass;
使用派生自null值的类
JavaScript在处理extends null时会将MyClass.prototype
的原型置为null,因此这个类构建的实例自然就是atom。但是,派生自null值的类无法直接构建,因此需要声明自己的构造方法(以该方法创建和返回的对象作为this)。
// 方法4
class MyClass extends null {
constructor() {
return Object.create(new.target.prototype);
}
}
atom = new MyClass;
上例在实现构造方法constructor()
时是直接引用new.target.prototype
来作为原型的,这样也就可以在new运算时引用到MyClass子类的原型。例如:
// 方法5
class MyClassEx extends MyClass {
get description() {
return 'class MyClassEx';
}
}
atom = new MyClassEx;
console.log(atom.description); // class MyClassEx
使用一般函数并直接返回原子
下面的代码是兼容构造器、原型继承和函数调用等方式的。
// 方法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其实就是如下的运算值:
// for static class methods
_super = Object.getPrototypeOf(MyClass)
// for instance methods
_super = Object.getPrototypeOf(MyClass.prototype)
既然如此,我们就可以通过如下的代码来声明一个“可以创建原子”的类。例如:
// 方法7
Atom = Object.setPrototypeOf(class extends null {}, Object)
atom = new Atom;
在这个方法中,实际上Atom指向类表达式,并且重置了它的原型:
// (如下等价于方法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
时,实际发生的操作是:
// (如下等价于方法7的第二行代码)
_this = new Object(); // call super()
Object.setPrototypeOf(_this, Atom.prototype); // prototype is null
atom = _this;
所以方法7是一种能够“利用JavaScript原生构造器”来创建原子的技巧。比如最简单的获得一个Arguments()构造器的方法其实是这样:
let Arguments = Object.setPrototypeOf(class extends null {}, Array);
这样得到的对象将与JavaScript内置在函数调用中创建的argument完全一致:
// (JavaScript的arguments对象也是原子)
let arguments = new Arguments(1,2,3); // more paraments
不过在ES6中arguments也实现了迭代器界面,因此需要一行额外的代码来处理之:
// for ES6
Arguments.prototype[Symbol.iterator] = [][Symbol.iterator];
其它
1. 关于映射类
在Metameta( @aimingoo/metameta (本地下载))中,可以使用Meta.from()来得到一个映射类,这与上面的方法7是相同的方式:
// 方法8(in metameta)
MyAtomObject = Meta.from(Object);
atom = new MyAtomObject;
有趣的是,这样得到的“MyAtomObject类”(在Metameta中称为Objext类)将继承所有来自Object.xxx的类方法,例如Object.keys()等。这些方法在元系统中也是可以直接使用的。例如:
// (in metameta)
Objext = Meta.from(Object);
Objext.keys(new Objext);
2. 关于extends new.target
上面在方法4中提到extends null相当于将MyClass.prototype
的原型设为null,——在方法7中也使用了这一技巧——因此事实上在Metameta( @aimingoo/metameta (本地下载))中实现MetaMeta()
时,采用的extends new.target
也就相当于:
// class MyClass extends new.target ...
Object.setPrototypeOf(MyClass.prototype, new.target)
这一技巧用在类的constructor()
方法中,返回一个新的类(类声明的表达式)。
来源:https://blog.csdn.net/aimingoo/article/details/82080105


猜你喜欢
- 指定结果集的列名AS 子句可用来更改结果集列名或为导出列指定名称。当结果集列由对表或视图中的列的引用进行定义时,结果集列的名称与所引用列的名
- 如果你想进一步了解如何用JavaScript来为网页添加交互性的话,你也许已经听过JavaScript的事件代理(event delegat
- 在这种配置下我们要实现关键词不区分大小写搜索并高亮显示要借助ASP的正则处理了,请看下面代码:<% Function&nbs
- iframe的背景颜色在IE下为window的当前窗口颜色(默认白色,可以在显示外观处对其进行设置),这导致在大幅背景上插入iframe时,
- 当服务器必须提供与两个或更多个网络或网络子网的连接时,典型的方案是使用多宿主计算机。此计算机通常位于外围网络(也称为 DMZ、外围安全区域或
- 我刚进入5gsns的时候,我真不知道怎么玩,我是通过白鸦的博客过去的,之前也没有怎么去玩过这类的网站。对于sns网站还算是陌生,不过还好网站
- HTTP_X_FORWARDED_FOR与REMOTE_ADDR的区别.在Request.ServerVariables中并没有HTTP_X
- 想要在准备查询混合数据库系统时将SQL Server转换为 XQuery 和进行反向转换吗?了解如何开发 Web 服务来从SQL Serve
- 一个网站程序,在添加新闻时出现错误以下是错误提示: Microsoft OLE DB Provide
- 1:使用SHOW语句找出在服务器上当前存在什么数据库:mysql> SHOW DATABASES;2:2、创建一个数据库MYSQLDA
- 从去年六一儿童节的LOGO开始,我们就要求以后的每一个节日FLASH LOGO设计时除了具备创意故事外,还必须设计一个小的互动效果,当受众把
- MySQL GUI Tools是一套图形化桌面应用工具套装,可以用来管理MySQL服务器。该套装工具包含三个工具:MySQL Query B
- 此前piscdong已经做过一次评测了,这次的Beta正式推出,我也来参与一下.当回小白鼠吧.新的界面设计非常让人兴奋750){this.r
- 随着网站访问量的加大,每次从数据库读取都是以效率作为代价的,很多用ACCESS作数据库的更会深有体会,静态页加在搜索时,也会被优先考虑。互联
- 在网站或软件的策划和设计过程中,我们经常听到这样的讨论:“这个功能设计得太重了”又或“我们希望能够处理得轻一些”。似乎轻设计是时下炙手可热的
- 对于数字索引数组来说,通过 array_push()函数向数组中添加元素。array_push()函数将数组当成一个栈,将传入的变量压入该数
- 我插入Mysql5的中文一直是乱码。但是直接使用mysqlAdmin,EMS等工具插入DB就不是乱码。而且我还可以使用程序正常地读出来。原因
- asp之家注:一个取图片尺寸的asp类,支持jpg,gif,png格式的图片文件;读取图片的尺寸其实很有用,当我们在设计一个新闻文章添加页面
- SQL Server2005扩展函数已经不是一件什么新鲜的事了,但是我看网上的大部分都是说聚合函数,例子也比较浅,那么这里就讲讲我运用扩展函
- 在IE进行文档链接时,如果遇到OLE支持的文档,IE会自动调用相应程序打开它,有时候这种功能并不是我们所需的,虽然我们可以提醒用户用鼠标右键