《JS原理、方法与实践》- ES6新增对象(下篇)

简介: 《JS原理、方法与实践》- ES6新增对象(下篇)

#### 异步处理(Promise)

ES2015中新增的Promise对象专门用于处理异步。Promise对象使用then和catch方法操作的,then方法用于执行下一步,catch方法用于执行失败后的处理。Promise实例对象的创建需要一个executor参数,executor是一个函数,在executor内部可以使用resolve和reject方法来设置业务处理完成和拒绝(失败),resolve和reject是作为executor的参数自动传入的。

代码示例:

```

var executor = function (resolve, reject) {

 //...

resolve();// 处理完成

reject(); // 拒绝

}

var promise = new Promise(executor(resolve, reject));

```

实例代码示例:

```

// 通用的流程审批方法, approver表示审批人

// 处理方法使用等待1s来模拟

// 具体审批逻辑为:如果当时的毫秒数为基数则同意,否则退回,退回原因随机

function approve (approver, resolve, reject) {

window.setTimeout(

 function() {

  if(new Date().getMilliseconds() % 2 === 1) {

   resolve(`${approver}: 同意`);

  } else {

   var r = ['内容不准确', '材料不符合', '其他原因'];

   reject(`${approver}: 流程退回, 原因:${r[Math.trunc(Math.random() * r.length)]}`);

  }

 }

);

}

console.log('准备提交流程');

// 新建promise, 启动流程并提交处长审批

new Promise(function(resolve, reject) {

console.log('开始流程');

approve('处长', resolve, reject);

})

// 处理处长审批结果

.then(function (opinion) {

console.log(opinion);

})

// 提交部长审批

.then(function () {

return new Promise(function(resolve, reject) {

 approve('部长', resolve, reject);

})

})

// 处理部长审批结果

.then(function(opinion) {

console.log(opinion);

console.log('执行流程相应操作');

})

// 流程退回处理

.catch(function (error) {

console.log(error);

console.log('重新修改资料');

});

console.log('提交完流程后做其他事情......');

```

测试结果:

![处长拒绝](https://upload-images.jianshu.io/upload_images/2789632-7e50ce6730cf3474.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![部长拒绝](https://upload-images.jianshu.io/upload_images/2789632-fecc077217c3787c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![都同意](https://upload-images.jianshu.io/upload_images/2789632-78b6a10db7e6d025.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#### GeneratorFunction 和 Generator

GeneratorFunction 和Generator的关系就像function和object的关系一样,Generator是使用GeneratorFunction创建出来的对象,而GeneratorFunction的创建类似于function的创建,只是在function关键字后面多了个*号:

```

function* GF(){}

var GF1 = function* () {}

var g = GF();

```

这里的GF和GF1都是GeneratorFunction, g是一个Generator。Generator的作用是可以分段来执行一个GeneratorFunction函数,在GeneratorFunciton中使用yield关键字来分段,Generator调用next方法来执行。

代码示例:

```

function* Schedule() {

console.log('开始');

var msg = '起床';

yield console.log(msg);

 

var msg = '洗漱';

yield console.log(msg);

 

var msg = '做饭';

yield console.log(msg);

}

var schedule = Schedule();

schedule.next(); // 开始 起床

schedule.next(); // 洗漱

schedule.next(); // 做饭

```

#### 反射

Reflect是反射对象,使用它可以不调用对象自身的方法来操作对象。Reflect不可以使用new关键字创建实例对象,只可以使用Reflect对象自身的方法来执行。Reflect对象自身共有14个方法。

###### 1.apply

apply方法的作用类似于function中的apply方法,不同之处在于这里的function是通过参数传入的,其调用语法如下:

```

Reflect.apply(target, thisArgument, argumentList);

```

参数中的target是要执行的方法,thisArgument为this对象,argumentList是方法的参数数组, 代码示例:

```

function printInfo(name, age) {

console.log(`${name} is ${age}`);

}

Reflect.apply(printInfo, this, ['zzh', 18]); // zzh is 18

```

###### 2.construct

construct方法的作用是使用指定的function对象创建object对象,相当于使用new关键字创建,调用语法如下:

```

Reflect.construct(target, argumentsList)

```

参数中的tartget为function类型的对象,argumentList为创建对象时的参数, 代码示例:

```

function Person(name, age) {

this.name = name;

this.age = age;

}

var p = Reflect.construct(Person, ['zzh', 18]);

console.log(`name is ${p.name}, age is ${p.age}`); // name is zzh, age is 18

```

###### 3.ownKeys

ownKeys方法的作用时获取对象所有自身属性的属性名, 调用语法如下:

```

Reflect.ownKeys(target);

```

###### 4.defineProperty

defineProperty方法的作用时给指定对象定义一个属性,调用语法如下:

```

Reflect.defineProperty(target, propertyKey, attributes);

```

###### 5.deleteProperty

deleteProperty方法的作用是删除指定对象的某个属性,调用语法如下:

```

Reflect.deleteProperty(target, propertyKey);

```

###### 6. getOwnPropertyDescriptor

getOwnPropertyDescriptor方法的作用是获取指定只当对象某个属性的描述, 调用方法如下:

```

Reflect.getOwnPropertyDescriptor(target, propertyKey);

```

###### 7.getPropertyOf

getPropertyOf方法的作用是获取指定对象的[[prototype]],调用语法如下:

```

Reflect.getPropertyOf(target);

```

###### 8. setPropertyOf

setPropertyOf方法的作用是给某个对象设置[[prototype]], 调用语法如下:

```

Reflect.setPropertyOf(target, proto)

```

###### 9. enumerate

enumerate方法的作用是返回指定对象用于for-in的Iterator,用法如下:

```

Reflect.enumerate(target);

```

###### 10. has方法

has方法的作用是检查指定对象是否包含某个属性,语法如下:

```

Reflect.has(target, propertyKey);

```

######11.get方法

get方法的作用是获取指定对象的某个属性,调用语法如下:

```

Reflect.get(target, propertyKey [, receiver]);

```

如果target对象中指定了getter,receiver则为getter调用时的this值。

代码示例:

```

let p = {

name: 'zzh',

age: 18,

get info () {

 return `name: ${this.name}, age: ${this.age}`;

}

}

console.log(Reflect.get(p, 'name')); // zzh

let info = {};

info.name = 'zh';

info.age = 19;

console.log(Reflect.get(p, 'info', info)); // name: zh, age: 19

```

###### 12.set

set方法的作用是给指定的对象某个属性赋值,调用语法如下:

```

Reflect.set(target, propertyKey, value [, reveiver]);

```

######13.preventExtensions

preventExtensions方法的作用是将指定对象设置为不可扩展,调用语法如下:

```

Reflect.preventExtensions(target);

```

######14.isExtensible

isExtensible方法的作用是检查指定对象是否可扩展,调用语法如下:

```

Reflect.isExtensible(target);

```

#### Proxy

Proxy是代理对象,代理的意思就是自己不直接执行,而让另外一个对象代替自己去做,有点像生活中的中介。使用代理时,代理对象在执行处理的过程中可能还会额外做一些事情,甚至有可能只做其他事情而不执行原来的业务。

Proxy只可以作为构造器使用new关键字来创建代理对象,而不可以作为方法来执行,创建Proxy语法如下:

```

new Proxy(target, handler);

```

处理器handler时对象的类型,代理实际执行的逻辑都是通过设置handler的属性方法中完成的,handler可以有14个属性,分别对应14种操作,这14个属性跟Reflect的14个属性完全相同,不过在使用代理的时候我们并不需要将14个属性全部定义出来,根据需要定义。

代码示例:

```

let p = {

name: 'zzh',

age: 18,

}

let handler = {set: function(obj, key, val) {

   obj[key] = val;

}};

var proxy = new Proxy(p, handler);

proxy.name = 'xiao ming';

console.log(proxy.name); // xiao ming

console.log(p.name); // xiao ming

```

目录
相关文章
|
7月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
384 69
|
7月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
6月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
561 0
|
6月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
681 80
|
6月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
285 19
|
8月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
259 23
|
8月前
|
前端开发 JavaScript Java
【Java进阶】JavaScript电灯开关实例:从理论到实践
这个例子展示了JavaScript的基本功能,包括操作HTML元素,监听事件,以及改变元素的样式。通过学习和理解这个例子,你可以了解到JavaScript在网页中的应用,以及如何使用JavaScript来创建交互式的网页。
181 13
|
7月前
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。
|
8月前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
JS回收机制方法讲解
|
9月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一