10.怎么理解ES6中 Decorator 的?使用场景?

图片

一、介绍

Decorator,即装饰器,从名字上很容易让我们联想到装饰者模式

简单来讲,装饰者模式就是一种在不改变原类和使用继承的情况下,动态地扩展对象功能的设计理论。

ES6Decorator功能亦如此,其本质也不是什么高大上的结构,就是一个普通的函数,用于扩展类属性和类方法

这里定义一个士兵,这时候他什么装备都没有

class soldier{ 
}

定义一个得到 AK 装备的函数,即装饰器

function strong(target){
    target.AK = true
}

使用该装饰器对士兵进行增强

@strong
class soldier{
}

这时候士兵就有武器了

soldier.AK // true

上述代码虽然简单,但也能够清晰看到了使用Decorator两大优点:

  • 代码可读性变强了,装饰器命名相当于一个注释

  • 在不改变原有代码情况下,对原来功能进行扩展

二、用法

Docorator修饰对象为下面两种:

  • 类的装饰

  • 类属性的装饰

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ES6 的模块系统提供了导出和导入功能,可以将一个模块的变量、函数或类导出给其他模块使用,也可以从其他模块导入需要的变量、函数或类。 单个导出: ```javascript // 导出一个变量 export const name = 'John'; // 导出一个函数 export function sayHello() { console.log('Hello'); } // 导出一个类 export class Person { constructor(name, age) { this.name = name; this.age = age; } } ``` 单个导入: ```javascript // 导入一个变量 import { name } from './module'; // 导入一个函数 import { sayHello } from './module'; // 导入一个类 import { Person } from './module'; ``` 多个导出: ```javascript // 导出多个变量 export const name = 'John'; export const age = 30; // 导出多个函数 export function sayHello() { console.log('Hello'); } export function sayBye() { console.log('Bye'); } // 导出多个类 export class Person { constructor(name, age) { this.name = name; this.age = age; } } export class Animal { constructor(type) { this.type = type; } } ``` 多个导入: ```javascript // 导入多个变量 import { name, age } from './module'; // 导入多个函数 import { sayHello, sayBye } from './module'; // 导入多个类 import { Person, Animal } from './module'; ``` 也可以使用 `*` 导入所有变量、函数或类: ```javascript // 导出多个变量 export const name = 'John'; export const age = 30; // 导出多个函数 export function sayHello() { console.log('Hello'); } export function sayBye() { console.log('Bye'); } // 导出多个类 export class Person { constructor(name, age) { this.name = name; this.age = age; } } export class Animal { constructor(type) { this.type = type; } } // 导入所有变量、函数或类 import * as module from './module'; console.log(module.name); console.log(module.sayHello()); console.log(new module.Person('John', 30)); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值