旅游网站建设有哪些不足,知名企业名字,太原建站推广,兖州网站建设哪家好目录
Proxy
Reflect
静态方法
部分实例
Iterator
实际开发迭代器的使用实例
迭代器#xff08;Iterator#xff09;应用
Generator
Proxy
Proxy 是 ES6 中新增的对象 Proxy 是JavaScript中的内置对象#xff0c;它提供了一种机制#xff0c;可以拦截并自定义各种…目录
Proxy
Reflect
静态方法
部分实例
Iterator
实际开发迭代器的使用实例
迭代器Iterator应用
Generator
Proxy
Proxy 是 ES6 中新增的对象 Proxy 是JavaScript中的内置对象它提供了一种机制可以拦截并自定义各种操作如属性访问、函数调用、构造函数调用等。Proxy 的构造函数接受两个参数目标对象被代理的对象和一个处理器对象用于定义拦截器。 // 写法:target是目标对象handler是处理器对象
const proxy new Proxy(target, handler); 详解请看ES6之---Proxy简介
Reflect
Proxy 是 ES6 中新增的对象【注不可使用new操作符生成实例】 特点 将 Object 对象的一些明显属于语言内部的方法如 Object.defineProperty放到 Reflect 对象上现阶段某些方法同时在 Object 和 Reflect 对象上部署未来新的方法只在 Reflect 对象上部署。也就是说从 Reflect 对象上可以获得语言内部的方法。修改某些Object的内部方法返回结果使其变的合理。(以Object.defineProperty为例 现在如果没有办法定义时则会报错放在Reflect上面则会返回false)让 Object 操作都编程函数行为某些 Object 操作是命令式比如 name in obj 和 delete obj [name]而 Reflect.has(obj, name) 和 Reflect.deleteProperty(obj, name) 让它们变成了函数行为。Reflect 对象的方法与 Proxy 对象的方法一一对应只要是 Proxy 对象的方法就能在 Reflect 对象上找到对应的方法这就是 Proxy 对象可以方便的调用对应的 Reflect 方法来完成默认行为作为修改行为的基础。也就是说无论 Proxy 怎么修改默认行为我们总可以在 Reflect 上获取到默认行为。 静态方法
Reflect.applyReflect.constructReflect.definePropertyReflect.deletePropertyReflect.getReflect.getOwnPropertyDescriptorReflect.getPrototypeOfReflect.hasReflect.isExtensibleReflect.ownKeysReflect.preventExtensionsReflect.setReflect.setPrototypeOf
部分实例 Reflect.construct(target, args) Reflect.construct 方法等同于 new target(…args)这提供了一种不使用 new 来调用构造函数的方法。如果 Reflect.construct () 方法的第一个参数不是对象会报错。 // 说明1的例子如下
function Greeting(name) {this.name name;
}
// new 的写法
const instance new Greeting(张三);
// Reflect.construct 的写法
const instance1 Reflect.construct(Greeting, [张三]); // {name: 张三}
// 说明2的例子如下
console.log(Reflect.construct(1, baz)) // TypeError: Reflect.construct called on non-object Reflect.deleteProperty(target, name) Reflect.deleteProperty方法等同于delete obj[name]用于删除对象的属性。注意**如果删除成功或者被删除的属性不存在返回 true 删除失败被删除的属性依然存在返回 false **如果 Reflect.deleteProperty() 方法的第一个参数不是对象会报错。 // 说明12的例子如下
var myObject {foo: 1,
}
console.log(Reflect.deleteProperty(myObject, foo)) // true
console.log(Reflect.deleteProperty(myObject, zzz)) // true
// 此时的myObject 就是{} Reflect.get(target, name, receiver) Reflect.get方法查找并返回 target 对象的 name 属性值如果没有该属性则返回 undefined 。如果 name 属性部署了读取函数getter则读取函数的 this 绑定 receiver 。如果第一个参数不是对象 Reflect.get 方法会报错。 // 说明1的例子如下
var myObject {foo: 1,bar: 2,get baz() {return this.foo this.bar;},
}
console.log(Reflect.get(myObject, foo)) // 1
console.log(Reflect.get(myObject, bar)) // 2
console.log(Reflect.get(myObject, baz)) // 3 没有传receiver则this取原对象
console.log(Reflect.get(myObject, zzz)) // undefined
// 说明2的例子如下
const otherObject {foo: 3,bar: 4
}
console.log(Reflect.get(myObject, baz, otherObject)) // 7
// 说明3的例子如下
console.log(Reflect.get(1, baz)) // TypeError: Reflect.get called on non-object Reflect.has(target, name) Reflect.has方法对应name in obj里面的in运算符。如果 Reflect.has() 方法的第一个参数不是对象会报错。 // 说明1的例子如下
var myObject {foo: 1,
}
console.log(Reflect.has(myObject, foo)) // true
console.log(Reflect.has(myObject, zzz)) // false
// 说明2的例子如下
console.log(Reflect.has(1, baz)) // TypeError: Reflect.has called on non-object
观察者模式实例
// 这里就是简单观察者的核心逻辑主要实现两个功能一个就是observe另一个就是observable
// 先定义了一个Set 集合所有观察者函数都放进这个集合。
// observable 函数返回一个原始对象的 Proxy 代理拦截赋值操作触发充当观察者的各个函数
// 拦截函数 set 之中会自动执行所有观察者
const queuedObservers new Set();
const observe fn queuedObservers.add(fn);
const observable obj new Proxy(obj, {set});
function set(target, key, value, receiver) {const result Reflect.set(target, key, value, receiver);queuedObservers.forEach(observer observer());return result;
}
// 使用如下
const person observable({name: 张三,age: 20
});
function print() {console.log( ${person.name}, ${person.age} )
}
observe(print);
person.name 李四;Iterator
Iterator即迭代器它是一种接口为各种不同的数据结构提供了统一的访问机制换句话说只要有任何数据结构部署了迭代接口就可以使用统一的方式的来遍历它。
ES6为数组和普通对象以及新增的Map和Set提供了统一的遍历机制迭代器Iterator并新增了for … of语法来使用迭代器。
实现可迭代接口的数据结构一般都自身实现或继承了以Symbol.iterator属性的就属于可迭代对象。Symbol.iterator属性本身是一个函数就是当前数据结构默认的遍历器生成函数。 一个包含next()方法的对象才可以称为一个迭代对象。next()对象的会有返回一个对象对象中包含两个值如下所示 value迭代器返回的任何JavaScript值。done为true时可省略。done一个布尔值为false时表示迭代未停止为true时立即停止迭代器且可以省略value的值。 实际开发迭代器的使用实例
实际开发中为每一个对象单独定义一个迭代器属性实在不是一件聪明事。我们可以仿照js引擎部署迭代器的做法将迭代器署在对象原型上这样由某个构造函数或类指es6的class所生成的每个对象都可以方便地进行遍历了。
构造函数写法
function Student(name, age){this.name name;this.age age;
}
Student.prototype[Symbol.iterator] function(){let index 0;let keys [...Object.keys(this)];let _this this;keys.sort((key1, key2) { //按字母顺序对属性排序return key1 key2 ? -1 : 1;})return {next(){return index keys.length ?{value: _this[keys[index]], done: false} :{value: undefined, done: true}}}
}let s new Student(小明, 24);
for(let val of s){console.log(val);
} //输出24 小明类写法
class Student{constructor(name, age){this.name name;this.age age;}[Symbol.iterator](){let index 0;let keys [...Object.keys(this)];keys.sort((key1, key2) { //按字母顺序对属性排序return key1 key2 ? -1 : 1;})let _this this;return {next(){return index keys.length ?{value: _this[keys[index]], done: false} :{value: undefined, done: true}}}}
}
迭代器Iterator应用
【1】 解构赋值
Array和Set的解构赋值就是借助迭代器来实现的
js引擎依次在左右两侧结构上调用next方法进行逐个赋值这样左侧数组的每个变量会对应被赋为右侧的值。
const [a, b] [1, 2]; //a: 1, b: 2const [c, d] new Set([3, 4]); //c: 3, d: 4【2】扩展运算符
ES6的扩展运算符可以将数组展开为一列这也是借助Iterator接口实现的
let args [name, age];
f(...args); //等价于f(name, age)【3】return和throw
迭代器对象除了必要的next方法外还可以部署return和throw方法用于在for … of语句中终止遍历和抛出异常。
let s {name: 小明,age: 24,[Symbol.iterator]: function (){let index 0;let keys [name, age];let _this this;return {next(){return index keys.length ?{value: _this[keys[index]], done: false} :{value: undefined, done: true}},return(){... //结束循环前可以在这里执行某些操作如关闭文件系统等return {done: true}},throw(){... //抛出异常时可以在这里执行某些操作return {done: true}}}}
}for(let val of s){console.log(val);break; //该语句会触发迭代器对象的return方法
}for(let val of s){console.log(val);throw new Error(); //该语句会触发迭代器对象的throw方法
}【4】Iterator与Generator函数
Generator函数调用之后返回的就是一个迭代器对象这个对象原生就具备next接口
let s {name: 小明,age: 24,[Symbol.iterator]: function* (){yield this.name;yield this.age;}
}
Generator
Generator【生成器】是ES6中提供的一种异步编程解决方案定义Generator函数在function关键字和函数名中间使用*星号函数内部使用yield关键字定义不同的状态。
注需要注意的是生成器函数定义时需要在函数关键字 function 后面加上星号*以标识该函数为生成器函数。另外yield 关键字只能在生成器函数内部使用。
function* testGenerator(){// yield定义一个状态yield1 css6之generatoryield es新特性return generator // 终结Generator后面即使有yield关键字也无效
}
const gtestGenerator() // 返回 Generator 对象通过next()方法移动状态g.next() //{value:-碗周done:false }
g.next() //{value:es新特性done:false }
g.next() //{ value:generator,done:true }
Generator详解
此文借鉴了一下博主的优秀文章
https://blog.csdn.net/Rookie_lei/article/details/140790532
https://blog.csdn.net/qq_41694291/article/details/103432571
上一章js版本之ES6特性简述【let和const、数组、函数、集合、Symbol】(四)
