1. Iterator
1.1 迭代器的理解
迭代器是一种接口、是一种机制。
为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。
//以前的循环本质跟踪索引
let arr =[1,3,4,8,99];
console.log(arr.length);
for(let i=0; i<length; i++){
console.log(arr[i]);
}
迭代器的理解
//迭代器是个方法，执行后创建迭代对象。迭代对象上有next()方法，每次调用next方法，返回一个结果对象。迭代对象中value属性为数据，done属性判断迭代是否继续（false继续，true结束）
let arr = [12,3,45,88,23,66] //查看数组身上有个迭代器函数Symbol(Symbol.iterator): ƒ values()
let obj =arr[Symbol.iterator]() //迭代函数arr[Symbol.iterator]执行后返回迭代对象
obj.next();//调用这个对象上的next()方法,会返回结果对象{value: 12, done: false}。value的值第一个值，done：false表示数组没迭代完需要继续调用next方法arr[Symbol.iterator]().next()
console.log(obj.next()); //返回的结果对象中done为true时，迭代结束
terator 的作用有三个：
- 为各种数据结构，提供一个统一的、简便的访问接口；
- 使得数据结构的成员能够按某种次序排列；
- 主要供for...of消费。
1.2 Iterator的本质
Iterator本质上，就是一个指针对象。
过程是这样的：
（1）创建一个指针对象，指向当前数据结构的起始位置。
（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。
1.3. 普通函数实现Iterator
//单单抽离出来的迭代方法
let obj = {
0: 11,
1: 22,
2: 33,
3: 44,
4: 55,
5: 66,
length:5
}
function diedai() {
let i=0;
return {
next: function () {
//这里使用i，i就不会被销毁，就形成了闭包
let value=obj[i]; //值
let done = i >= obj.length; //判断条件
i++
return {
value,//简写
done,
}
}
}
}
let res= diedai(obj);
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());
// 自定义迭代器的方法
//方法一，借用数组的迭代器
// 希望自定义对象也能使用迭代器。所以对象属性要按类数组定义，有length属性
// let obj ={
// 0:11,
// 1:22,
// 2:33,
// 3:44,
// 4:55,
// 5:66,
// length:6,
// [Symbol.iterator] : Array.prototype[Symbol.iterator]//把数组原型上的迭代函数赋值给自定义对象上的属性[Symbol.iterator]
// }
// console.log(Array.prototype);//数组的迭代就在数组构造函数的原型上。打印数组原型上的属性，就可以看到迭代器Symbol(Symbol.iterator): ƒ values()
// // 有了以上还是不可以迭代，还要添加上length
// for(let val of obj){
// console.log(val);
// }
//方法二自己定义一个迭代器（更好的理解迭代器的原理）
let obj ={
0:11,
1:22,
2:33,
3:44,
4:55,
5:66,
length:6,
[Symbol.iterator] :function(){
let i=0;
let This=this; //这里的this是obj，所以定义一个This=this，内部的next方法才能使用到这个this
return {
next: function(){
//这里使用i，i就不会被销毁，就形成了闭包
let value=This[i]; //值
let done = i >= This.length; //判断条件
i++
return {
value,//简写
done,
}
}
}
}
}
for(let val of obj){ //for of 循环是obj对象会自动调用[Symbol.iterator]方法，所以它是个方法，返回一个对象，对象里有next方法，next方法执行返回{value：值，done:true/false}
console.log(val);
}
let obj = {
0: 11,
1: 22,
2: 33,
3: 44,
4: 55,
5: 66,
length: 5
}
function myIter() {
let i = 0;
return {
next() {
let done = (i >= obj.length);
let value = !done ? obj[i++] : undefined;
return {
value,
done,
}
}
}
}
let res = myIter(obj);
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());
原生具备 Iterator 接口的数据结构如下。
- Array
- Map
- Set
- String
- 函数的 arguments 对象
- NodeList 对象
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// NodeList 对象例子
let aLi = document.getElementsByTagName('li');
console.log(aLi); //打印后可以看到这个数组上也有迭代器方法Symbol(Symbol.iterator): ƒ values()。所以也可以使用for of方法
for (let val of aLi) {
console.log(val);
}
</script>
</body>
//下面的例子是数组的Symbol.iterator属性。
let arr = ['a', 'b', 'c'];
console.log(arr);
let iter = arr[Symbol.iterator]();
console.log(iter);
iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }
//下面是另一个类数组的对象调用数组的Symbol.iterator方法的例子。
let iterable = {
0: 'a',
1: 'b',
2: 'c',
length: 3,
[Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
console.log(item); // 'a', 'b', 'c'
}
//注意，普通对象部署数组的Symbol.iterator方法，并无效果。
let iterable = {
a: 'a',
b: 'b',
c: 'c',
length: 3,
[Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
console.log(item); // undefined, undefined, undefined
}
//字符串的包装类是一个类似数组的对象，也原生具有 Iterator 接口。
var someString = "hi";
console.dir(String);
console.log(typeof someString[Symbol.iterator]);// "function"
var iterator = someString[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
2. Proxy 代理
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程。
讲通俗一点就是扩展(增强)了对象,方法(函数)的一些功能
ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。
Proxy其实是设计模式的一种,代理模式
2.1. 语法使用
new Proxy(target,handle)
- 参数
第一个参数: target 是你要代理的对象
第二个参数,handle是对代理对象做什么操作
{
set(){},
get(){},
deleteProperty(){},
has(){},
apply(),
......
}
返回值，返回一个新的对象
let proxy = new Proxy(target, handle);
//代理的基本使用
let obj = {
name: 'xiaoming',
}
let myname = obj.name; //js内置获取对象属性的行为，通过元对象操作
console.log(myname);
let proxy = new Proxy(obj, { //写上代理哪个对象
//里面写拦截函数
//如果代理对象没有任何拦截行为，那么代理对象上的操作都是用原生的行为
})
console.log(proxy); //Proxy {name: 'xiaoming'}打印后有Proxy表示代理对象
Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。
2.2 如果没有做任何拦截设置
如果handler没有设置任何拦截，那就等同于直接通向原对象。
var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"
上面代码中，handler是一个空对象，没有任何拦截效果，访问proxy就等同于访问target。
let obj = {
name : 'wuwei'
}
console.log(obj.name);
// 我希望你在获取name 属性的时候做一些事情,那么我们就可以用代理模式
let newObj = new Proxy(obj,{
get(target,property){ // target就是代理对象obj,property就是用户访问的属性
// console.log(target,property); // {name: "wuwei"} "aaa"
console.log(`你访问了${property}属性`)
return target[property];
}
})
2.3 添加拦截处理程序
2.3.1 get 获取拦截
get 拦截程序接受三个参数
- target 代理的目标对象
- prop 操作的属性
- receiver 代理对象
//代理的拦截行为(函数方法)对js底层对象获取属性功能进行拦截(操作代理对象获取属性时触发)
//对象的操作 获取 obj.name 修改obj.name='bb' 删除 delete obj.name 判断对象是否有XX属性 XX in obj
let obj = {
name: 'xiaoming',
age: 18
}
let proxy = new Proxy(obj, {
// 获取拦截
get(target, prop, receiver) {
//自己想扩展的功能
console.log(arguments);
// return 111; //方法一 return的值就是操作对象属性的值
// return target[prop] //方法二 通过参数的代理目标对象和属性获取原来的值
// return Reflect.get(...arguments)//方法三 通过Reflect 反射到js默认的对象获取属性的行为上
if (prop in target) {
return Reflect.get(...arguments)
} else {
return `你获取的对象${prop}不存在于当前对象上`
// throw new Error(`你获取的对象${prop}不存在于当前对象上`)//也可以选择抛出一个错误
}
}
})
console.log(proxy);
console.log(proxy.name); //没有拦截之前，获取得到的是默认的值。添加了拦截就会自动走对象的get方法。get获取三个参数：访问的代理目标对象target、操作的属性prop、receiver代理对象
console.log(proxy.age);
console.log(proxy.hobbies); //原来js不存在的js属性会返回undefined
//访问代理对象上不具有的属性就报错
let obj = {
name: 'aabb'
}
let proxy = new Proxy(obj, {
get(target, key, receiver) {
if (!(key in receiver)) {
throw new ReferenceError(`属性${key}不存在`)
}
return target[key]
}
})
console.log(proxy.name); // aabb
console.log(proxy.age); // 报错
get拦截的用处--批量创建HTML标签，属性、内容自动添加
// let oD = document.createElement('div') //以前js创建标签创建div标签
// oD.className = 'aa'//给标签添加class属性
// oD.innerHTML = '这里是内容部分' //标签加内容
let body = document.getElementsByTagName('body')[0] //获取标签
// body.appendChild(oD) //标签放到页面上
//get拦截的用处--批量创建HTML标签，属性、内容自动添加
let pro = new Proxy({}, { //代理空对象重要的是走get方法
get(target, prop, receiver) { //target是空对象 prop是属性div receiver是代理对象
return function (attr = {}, child = []) { //接收两个参数 属性罗列 子项 都有默认值防意外
let oBox = document.createElement(prop)//创建一个标签
for (let key in attr) {
oBox[key] = attr[key] //添加属性
}
for (let item of child) {
if (typeof item === 'string') {//判断是字符串添加节点，不是字符串直接添加
item = document.createTextNode(item)
}
oBox.appendChild(item) //添加节点
}
return oBox
}
}
})
let aa = pro.li()
console.log('aa是没有传参数建立的空标签', aa);
let bb = pro.div( //返回函数，功能
{
className: 'aa',
id: 'bb',
style: 'backgroun-color:#ccc'
}, [
'字符串内容',
document.createTextNode('<p>文本内容</p>')
]
)
console.log('bb是传参数建立的标签', bb);
let ul = pro.ul(
{
id: 'idul',
className: 'aa',
style: 'background-color:#ccc;font-size:30px',
}, [
document.createTextNode('<li>产品说明</li>'),
document.createTextNode('<li>运输方式</li>')
]
)
console.log('创建ul标签', ul);
body.appendChild(ul) //页面中标签
2.3.2 set 设置拦截
set 拦截程序接受4个参数
- target 代理的目标对象
- prop 操作的属性
- value 被写入的属性值
- receiver 代理对象
//设置拦截（给代理对象属性赋值）
let obj = {
name: 'xiaoming',
age: 18
}
let proxy = new Proxy(obj, {
set(target, prop, value, receiver) { //目标对象 操作的属性 赋值的值 代理对象
// target[prop] = value; //方法直接操作代理对象修改
// Reflect.set(...arguments) //方法二 反射
// console.log(arguments);
// return 222;//基本没用
if (prop === 'age' && !(typeof value === 'number')) { //age值不是数字类型就会报错，其他属性不受影响
throw new Error('age属性值必须是一个数字类型')
} else {
Reflect.set(...arguments)
}
}
})
console.log(proxy);
proxy.name = 'mingming';
proxy.age = '123'; //年龄一般是数字，这里赋值字符串会报错
console.log(proxy);
console.log(obj);
var obj = new Proxy({},{
set(target,prop,value){
if(prop == 'age'){
if(!Number.isInteger(value)){
throw new TypeError('年龄必须为整数')
}
if(value > 200){
throw new RangeError('年龄超标了,必须小于200岁')
}
}
target[prop] = value;
}
})
obj.a = '12.5';
obj.name = 'wuwei';
console.log(obj); //Proxy {a: "12.5", name: "wuwei"}
// 以下是报错
obj.age = 12.6; // Uncaught TypeError: 年龄必须为整数
obj.age = 201; // Uncaught RangeError: 年龄超标了,必须小于200岁
2.3.3 has 包含拦截
使用in 操作符检查对象中是否包含某个属性. 触发has拦截
has 拦截程序接受2个参数
- target 代理的目标对象
- prop 需要判断的属性
//判断是否为对象属性的拦截has
let obj = {
name: 'xiaoming',
age: 18
}
console.log('name' in obj); //判断obj对象上是否有属性name时，name要加引号。否则就为false。这是js的默认行为
console.log('age' in obj)
console.log('hobby' in obj) //没有这个属性，所以false
let pro = new Proxy(obj, {
has(target, prop) { //两个参数，目标对象，判断的哪个属性
console.log(arguments)
console.log(`判断属性${prop}是否存在于当前对象中`)
// return prop in target//方法一得到值操作原生的
return Reflect.has(...arguments)//方法二通过反射
}
})
console.log('name' in pro); //判断属性是否属于拦截对象
let obj = {
a: 1,
b: 2
}
let proxy = new Proxy(obj, {
has(target, prop) {
console.log(`判断属性${prop}是否存在于当前对象中`)
return prop in target
}
})
console.log('a' in proxy);
2.3.4 deleteProperty 删除拦截
通过delete 操作符删除属性的时候,就会触发deleteProperty 拦截
deleteProperty 拦截处理程序接受2个参数
- target 代理的目标对象
- prop 删除操作的属性
// 拦截删除行为
let obj = {
name: 'xiaoming',
age: 18
}
// console.log(delete obj.name); //js原生的默认行为
let pro = new Proxy(obj, {
deleteProperty(target, prop) {//两个参数目标对象，操作哪个属性
console.log(arguments)
console.log(`你要删除${prop}属性`);
// return delete target[prop] //方法一 原生的
return Reflect.deleteProperty(...arguments)//通过反射，反射到js底层的 deleteProperty
}
})
console.log(delete pro.name);
2.4 函数拦截
所有的代理拦截中, 只有apply 和 constructor 的代理目标是一个函数. apply 和construct 拦截方法覆写函数内部的[[ Call ]]和 [[ Constructor ]],这些内部方法.
函数的普通的调用实际是调用函数内部的[[ Call ]]方法。通过new来操作一个函数底层是调用的 [[ Constructor ]]
2.4.1 apply 拦截
apply拦截接受三个参数
- target 代理的目标函数
- thisArg 函数被调用时内部this的值
- argumentsList 传递给函数的数组
//代理函数修改tihs
function haha() {
console.log(this);
console.log(arguments);
}
let bb = new Proxy(haha,{ //第一个参数为代理的函数
apply(target,thisArg,Arg){ //apply 拦截
// console.log(arguments);//参数 目标函数、this指向、实参组成的数组
//里面的this始终是window，要从外面改变this,this才会改变
// target.apply(thisArg,Arg) //方法一 通过代理的目标函数来执行的
Reflect.apply(...arguments)//方法二Reflect
}
})
let obj ={name:'obj'}
bb.apply(obj,[10,20,30])
//代理函数修改tihs的分析与理解
function haha() {
console.log(this);
console.log(arguments);
}
let bb = new Proxy(haha,{
apply(target,thisArg,Arg){
Reflect.apply(target,obj,Arg) //代理对象中手动修改this，一般不会这么操作
}
})
let obj ={name:'obj'}
bb(10,20,30)
2.4.2 construct 拦截
construct 拦截 new 操作符调用函数
- target 代理目标函数
- argumentsList 传递给函数的参数数组
function fn(a, b) {
this.a = a,
this.b = b
return 44
}
let proxy = new Proxy(fn, {
apply(target, thisArg, argumentsList) {
return target.apply(this.Arg, argumentsList)
}, //底层apply叫[[ Call ]]
construct(target, argumentsList) {
console.log(arguments) //目标函数 参数 代理对象
// return new target(...argumentsList)
return Reflect.construct(...arguments)//更好的写法
} //底层construct叫 [[ Constructor ]]
})
let res = new proxy(10, 20) //有new走construct 没有走apply
console.log(res) //使用new返回一个对象
console.log(fn(5, 6));
2.5 取消代理 Proxy.revocable()
Proxy.revocable方法返回一个可撤销代理实例, 参数与Proxy构造函数一致。
let target = { name: 'aa', age: 19 };
let handler = {};
let { proxy, revoke } = Proxy.revocable(target, handler); //通常采用解构方式
//Proxy.revocable方法参数和new Proxy一样，返回值不一样，返回一个对象，对象中的proxy属性为代理对象,其实就是new Proxy()创建的对。 revoke是一个方法用来取消代理
// new Proxy() //这种代理返回值是代理对象proxy
proxy.foo = 123;
console.log(proxy.foo)
console.log(proxy);
revoke();
console.log(proxy.foo) //报错，取消代理后无法获取
Proxy.revocable方法返回一个对象，该对象的proxy属性是Proxy实例，revoke属性是一个函数，撤销代理调用的函数。上面代码中.
当执行revoke函数之后，任何与代理对象的交互都会触发错误。
2.6. Proxy支持的拦截操作
- get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。
- set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。
- has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。
- deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。
- ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
let obj = { name: 'aa', age: 19 };
console.log(Object.getOwnPropertyNames(obj)) //原生的js底层的一个方法获取key，组成数组
let pro = new Proxy(obj, { //通过代理的
ownKeys() {
console.log(arguments)
return []
}
})
console.log(Object.getOwnPropertyNames(pro)) //参数为代理对象，就会触发代理对象里的ownKeys的拦截
- getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
- defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
- preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
- getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
- isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
- setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
- apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
- construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。
2.7.reflect 反射
function fn(a,b){
return a+b
}
var newFn = new Proxy(fn,{
apply(target,context,args){
// console.log(target,context,args);
// console.log(arguments);
// console.log(...arguments);
return Reflect.apply(...arguments);
}
})
console.log(newFn(3,2)); // 5
如果要增强方法需要跟Reflect配合
我也可以在反射时干些事情
//反射调用函数
function aa() {
return 10
}
let pro = new Proxy(aa, {//代理aa函数
apply() {
return '函数原生执行返回值为' + Reflect.apply(...arguments) + '。原生执行返回值的三次方为' + Reflect.apply(...arguments) ** 3//函数原生的执行
}
})
console.log(pro());
function fn() {
return 5;
}
var newFn = new Proxy(fn, {
apply(target, context, args) {
// console.log(target, context, args);
// console.log(arguments);
// console.log(...arguments);
return Reflect.apply(...arguments) ** 3; //反射结果的3次方
}
})
console.log(newFn(3, 2)); // 125
2.8 Reflect.apply()
和fn.apply()很相似
Reflect.apply(target,context,args) 有三个参数
target: 需要调用的函数
context: this指向
args : 参数数组
let num =Math.ceil(5.01); //向上取整
console.log(num);
//也可以用反射
let num2 = Reflect.apply(Math.ceil,null,[5.01]) //反射Math.ceil的apply方法，调用Math.ceil原生的方法 ,不需要修改this指向，参数是数组
console.log(num2);
就是调用函数的不同的方式而已，更高级，js底层些的函数调用方法
function show(...args){
console.log(this);
console.log(args);
}
// 正常调用
show(1,2,3,4); // this是window, args是[1,2,3,4]
// call调用函数
show.call('aaa',1,2,3,4); // this是aaa, args是[1,2,3,4]
// apply调用函数
show.apply('aaa',[1,2,3,4]); // this是aaa, args是[1,2,3,4]
// reflect.apply调用函数
Reflect.apply(show,'aaa',[1,2,3,4]); // this是aaa, args是[1,2,3,4]
