3 minutes read (About 423 words)

Iterator

Iterator 遍历器

一种接口，为不同的数据结构提供统一的访问机制，任何数据接口只要部署Interator接口，就可以完成遍历操作

遍历：依次处理该数据结构的所有成员

  • 为各种数据结构，提供一个统一的、简便的访问接口

  • 使得数据结构的成员能够按某种次序排列

  • ES6创造了一种新的遍历命令 for…of循环，Interator接口主要供for…of消费

遍历过程如下：

1、创建一个指针对象，指向当前数据结构的起始位置。遍历器对象本质上就是一个指针对象。

2、第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

3、第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

4、不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。一个包含value和done两个属性的对象。

Iterable Iterator IterationResult

一种数据结构只要部署了Interator接口，就称这种数据结构是“可遍历的( Iterable )”

1
2
3
4
5
6
7
8
9
10
11
12
[Symbol.iterator]:function(){
    return {
        next: functions(){
            return {
                value: 1,
                done: true
            }
        }
    }
}
// iterator接口部署在数据结构的Symbol.iterator属性上
// 属性名 Symbol.iterator是一个表达式（所以要用方括号表示），返回Symbol对象的iterator属性

原生具备 Iterator接口的数据结构：

a few seconds read (About 95 words)

Proxy

Proxy ( 语言层面做出修改 对编程语言进行编程 meta programming )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 重新定义了obj的get、set方法
const obj = new Proxy(
  {},
  {
    get: function(target, key, receiver) {
      console.log(`getting ${key}!`);
      return Reflect.get(target, key, receiver);
    },
    set: function(target, key, value, receiver) {
      console.log(`setting ${key}!`);
      return Reflect.set(target, key, value, receiver);
    }
  }
);

obj.count = 1 // setting count!
++ obj.count // getting count!        setting count!
1
2
ES6原生提供的Proxy构造函数:
var proxy = new Proxy()
2 minutes read (About 310 words)

装饰器

装饰器 1.0.0

foreword:

了解以下概念：

  • Object.defineProperty(obj, prop, descriptor)
1、对象属性描述符 只能是以下两种形式之一
  • 数据描述符
  • 存取描述符

可同时具有的键值：

enumerable writable configurable get set value
数据描述符 YES YES YES NO NO YES
存取描述符 YES NO YES YES YES NO

一、针对属性方法的装饰器

  • 装饰器本意是”装饰”类的实例，但此时实例还未生成，所以只能去修饰原型，这一点去类的修饰不同

  • 装饰器会修改属性的描述对象(descriptor) ，然后被修改的描述对象在用来定义属性。

  • 当一个方法有多个装饰器，先从外到内进入，由内向外执行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function readonly(target, key , descriptor){
    descriptor.writable = false
    return descriptor
}

class Person {
    constructor(){
      this.first = 'Joeng'
      this.last = 'll'
    }
    @readonly
    name(){
        return `${this.first}+${this.last}`
    }
}

二、针对类的装饰器

装饰器对类的行为的改变，发生在代码编译时，而不是运行时

装饰器本身是编译时执行的函数

1
2
3
4
5
6
7
8
9
10
11
12
/*
* @param {object} target 装饰的类  此处为Person 
*/
function testable(target){
   // 若要改变实例属性 通过prototype对象操作 
   target.prototype.isTestbale = true     
}

@testable
class Person{
    
}
Follow

Tag Cloud

Babel CSS ES6 ES7 Functional Programming Html JavaScript Node.js Promise React RxJS Tool TypeScript browser css http node.js react redux webpack 互联网广告 前端工程化 缓存

Categories

Recent

Archives

Tags

Categories

Recent

Archives

Tags

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×