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{
    
}
# ES6
Proxy
webpack+react简单使用

Comments

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

×