三十九、了解JavaScript中的装饰器吗？聊一下JS中的getter与setter的用法

麦齐
308 阅读3分钟

JavaScript中的装饰器

JavaScript中，装饰器是一种用于修饰类(class)、方法、属性的装饰，装饰器目前是第2阶段的提议，这意味着它们应该成为该语言将来更新的一部分。让我们看看什么是装饰器，以及如何使用它们来使您的代码更整洁，更易于理解。

什么是装饰器？

装饰器以其最简单的形式只是将一段代码与另一段代码包装在一起的一种方式-实际上就是“修饰”它。您可能以前已经听说过这个概念，即功能组合或高阶功能。

在标准JavaScript中，对于许多用例，这已经可以实现，只需调用一个函数来包装另一个函数即可：


function fn(name) {

console.log(`Hello, ${name}`))

}

function decorator(fn) {

return function() {

console.log('Starting')

const result = fn.apply(this, arguments)

console.log('Finished')

return result

}

}

const wrapped = decorator(fn)

本示例中, wrapped函数通过decorator函数并返回，它与fn函数执行完全相同的操作。不同之处在于，它将在调用包装函数之前和之后进行一些日志记录：


fn('Jack')

// Hello, Jack

wrapped('Jack')

// Starting

// Hello, Jack

// Finished

如何使用JavaScript装饰器

装饰器在JavaScript中使用一种特殊的语法，在装饰器中将前缀一个@符号并放置在装饰代码的最前面。

注意：装饰器目前处于“Stage 2 Draft ”阶段，这意味着它们大部分已经完成，但仍可能会发生变化。

可以根据需要在同一代码上使用多个装饰器，它们将按照声明它们的顺序应用。

例如：


@log

@immutable

class Example {

@observable price = 0

@observable amount = 1

constructor(price) {

this.price = price

}

@computed get total() {

return this.price * this.amount;

}

}

这定义了一个类，并应用了三个装饰器-两个装饰器本身，三个装饰器属性：

  • @log 记录对类的所有访问日志信息

  • @immutable可以使类不可变-在新的实例中使用Object.freeze使其不可改变

  • @observable 该属性为观察属性

  • @computed 该属性为计算属性

在当前的浏览器或Node.js版本中，尚不支持装饰器，因此我们使用使用Babel插件@babel/plugin-proposal-decorators来将它转换为浏览器或Node.js中可识别的代码。

为什么要使用装饰器

尽管在JavaScript中已经可以进行功能组合，但是将相同的技术应用于其他代码段（例如，类和类属性）要困难得多。

装饰器提案增加了对可用于解决这些问题的类和属性装饰器的支持，在以后的JavaScript版本可能会为其他麻烦的代码区域添加装饰器支持。

装饰器还允许使用更简洁的语法，以便在代码周围应用这些包装，从而减少对您编写代码的影响。

装饰器的应用范围

当前仅支持类和类的成员上的装饰器类型。这包括属性，方法，getter和setter。

实际上，装饰器不过是返回另一个函数的函数。在程序首次运行时，将会使用这些装饰器函数来包装需要装饰后的代码，并将包装后的代码作为返回值。

类装饰器

将类修饰符一次性应用于整个类定义。装饰器函数使用单个参数调用，该参数是要装饰的构造函数。

请注意，这适用于构造函数，而不适用于所创建类的每个实例。

回到我们的日志记录示例，让我们编写一个记录构造函数参数的示例：


function log(Class) {

return (...args) => {

console.log(args)

return new Class(...args)

}

}

在这里，我们接受一个类作为参数，并返回一个将用作构造函数的新函数。这里的装饰器只打印了构造函数中的参数，并返回使用这些参数构造的类的新实例。 然后，我们在类中使用这个log函数


@log

class Animal {

constructor(name, age) {

this.name = name

this.age = age

}

}

const cat = new Animal('Hello kitty', 2)

// ["Hello kitty", 2]

console.log(cat.name)

// Hello kitty

如果想为装饰器@log传入自定义参数，则需要在log中返回一个本身就是装饰器的函数:


function log(name) {

return function decorator(Class) {

return (...args) => {

console.log(`log for ${name}: `, args)

return new Class(...args)

}

}

}

@log('cat')

class Animal {

constructor(name, age) {

this.name = name

this.age = age

}

}

const cat = new Animal('Hello kitty', 2)

// log for cat: ["Hello kitty", 2]

console.log(cat.name)

// Hello kitty

类成员装饰器

类成员装饰器应用于类中的单个成员-无论它们是属性，方法，getter或setter。该装饰器被调用时需要有以下三个参数：

  • target：要修改属性的对象。

  • name：要修改的属性的名称。

  • descriptor：要修改的属性描述符。从本质上讲，这是应该传递给Object.defineProperty的对象。

类属性装饰器

这里使用的经典示例是@readonly。可以简单地实现为：


function readonly(target, name, descriptor) {

descriptor.writable = false

return descriptor

}

这里将对象属性描述符writable标志更改为false。然后将其用于类属性，如下所示：


class Animal {

@readonly age = 2

}

const cat = new Animal()

// {age: 2}

当我们尝试修改age时，我们发现，在控制台中有以下错误输出：main.js:16 Uncaught TypeError: Cannot assign to read only property 'age' of object '#<e>'

类方法装饰器

同样，我们来实现一个在调用类方法之前，打印一些日志信息:


function log(target, name, descriptor) {

const original = descriptor.value

if (typeof original === 'function') {

descriptor.value = function(...args) {

console.log(`log for args: ${args}`)

try {

return original.apply(this, args)

} catch (e) {

console.log(`Error: ${e}`)

throw e

}

}

}

return descriptor

}

然后，我们在类方法中使用它：


class Animal {

constructor(name) {

this.name = name

}

@log

sayHello(name) {

console.log(`Hello ${name}, I'm ${this.name}`)

}

}

const cat = new Animal('Hello kitty')

cat.sayHello('Jack')

// log for args: Jack

// Hello Jack, I'm Hello kitty

同样，我们可以为装饰器@log传入自定义参数，则需要在log中返回一个本身就是装饰器的函数:


function log(name) {

return function decorator(target, name, descriptor) {

const original = descriptor.value

if (typeof original == 'function') {

descriptor.value = function(...args) {

console.log(`log for ${name}: `, args)

// ...

}

}

return descriptor

}

}

但是当我们将装饰器log进行分解时，我们会得到： 一个具有单个参数名为name的函数 该函数返回了一个装饰器函数

实际运用

例如，在react-redux库中，我们使用connect函数将React组件连接到Redux中， 通常，将使用以下方法：


class Page extends React.Component {}

export default connect(mapStateToProps, mapDispatchToProps)(Page)

但是，由于装饰器语法的工作方式，我们可以用以下代码替换它以实现完全相同的功能：


@connect(mapStateToProps, mapDispatchToProps)

export default class Page extends React.Component {}

装饰器为您编写出非常干净和易于理解的代码提供了一种全新的方法，而且它非常简单就可以实现。

使用它的唯一限制是您的想象力！！！

JS中的getter与setter

一、什么是getter和setter

  • getter 是一种获得属性值的方法，setter是一种设置属性值的方法

  • getter负责查询值，它不带任何参数，setter则负责设置键值，值是以参数的形式传递，在他的函数体中，一切的return都是无效的

  • get/set访问器不是对象的属性，而是属性的特性，特性只有内部才用，因此在javaScript中不能直接访问他们，为了表示特性是内部值，用两对中括号括起来表示，如[[Value]]

  • 对象的属性又可分为对象属性和访问器属性（参考资料： www.cnblogs.com/absolute-ch…

二、使用方式

2.1 set/get


var person = {

_name: '',

get name() { return this._name },

set name(n) { this._name = n }

}

// 测试

person.name // 输出 --> ''

person.name = 'Zhangsan'

person.name // 输出 --> Zhangsan

2.2 Object.defineProperty


var person = function() {

var _name = ' ';

var obj = {};

Object.defineProperty(obj, 'name', {

configurable: true,

enumerable: true,

get: function() {

return _name;

},

set: function(n) {

_name = n;

}

})

return obj;

}();

person.name = "Zhangsan";

person.name // 输出 --> Zhangsan
avatar
文章
阅读
粉丝