JavaScript中创建原子的方法总结


Posted in Javascript onAugust 26, 2018

前言

原子操作这是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()方法中,返回一个新的类(类声明的表达式)。

总结

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

Javascript 相关文章推荐
caller和callee的区别介绍及演示结果
Mar 10 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 #Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 #Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 #Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 #Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 #Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 #Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 #Javascript
You might like
YB217、YB235、YB400浅听
2021/03/02 无线电
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
python为什么会环境变量设置不成功
2020/06/23 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
怎样声明一个匿名的内部类
2016/06/01 面试题
电子信息科学专业自荐信
2014/01/30 职场文书
六年级数学教学反思
2014/02/03 职场文书
优秀大学生自荐信
2014/06/09 职场文书
商场促销活动总结
2014/07/10 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
小学感恩主题班会
2015/08/12 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
MySQL分区表实现按月份归类
2021/11/01 MySQL