ES6 新特性梳理系列丨修饰器 Decorator

ES6 新特性梳理系列文章将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

---

JavaScript 与 ECMAScript

JavaScript 诞生于1995年，设计者是就职于 Netscape 公司的工程师 Brendan Eich。它是一门仅用10天就完成设计的编程语言，但至今为止已对业界保持26年的影响，且势头愈发强劲

1996年 Netscape 将 JavaScript 提交给ECMA，希望它可以成为“标准化一个通用的、跨平台的、中立于厂商的脚本语言的语法和语义标准”，1997年 ECMA 确定将 JavaScript 作为浏览器脚本语言的标准，并为之重命名为 ECMAScript，所以通常来讲我们将 ECMAScript 视为 JavaScript 的标准，而 JavaScript 则是 ECMAScript 的实现及扩展

1997年-1999年连续发布了ES1-ES3发布，2000年开始酝酿新版本的升级内容，中间因标准委员会意见未能达成一致，只做了部分功能的小范围升级及支持，于2009年12月发布了过渡版 ECMAScript 5.0，2011年6月发布 ECMAScript 5.1 并成为 ISO 国际标准

2013年3月 ECMAScript 6 草案冻结，2013年12月 ECMAScript 草案发布，2015年6月 ECMAScript 6 正式通过，成为新的国际标准。ES6 泛指自2015年升级为 ECMAScript 6.0 后的所有子版本，如：ES2015-ES2020，等同于ES6.0-ES6.5，这是 JavaScript 走向企业级编程语言的强势升级

不断升级的标准与实现，对于开发效率及产品质量起到强有力的支撑，接下来我们开始梳理ES6的新特性吧！

---

什么是修饰器

修饰器其实就是一个普通的函数，用来修饰类或者类的方法。执行阶段是在编译阶段，相当于你在执行类的时候，中间插了一脚，执行了修饰器的内容，我们可以用他来定义访问权限，输出日志等。

---

修饰类

// 定义一个修饰器
function test(target){
  target.a = 1
}


@test
class TestClass {}


console.log(TestClass.a)  // 1

上方代码里的 @test 就是一个修饰器，为 TestClass 类加上一个静态属性a，值为1。

修饰器函数接收的第一个参数就是所要修饰的目标类，以上是为类添加一个静态属性，我们也可以通过原型链形式，为类添加一个实例属性。

// 定义一个修饰器
function test(target){
  target.prototype.b = 2
}


@test
class TestClass {}
let t = new TestClass
console.log(t.b)  // 2

---

方法的修饰

修饰器可以用来修饰类中的方法，比如：

class Person {
  @readonly
  getName() { 
    return '1234'
  }
}


function readonly(target, name, descriptor){
    descriptor.writable = false;
    return descriptor;
}

此时，修饰器函数一共可以接受三个参数，第一个参数是所要修饰的目标对象，第二个参数是所要修饰的属性名，第三个参数是该属性的属性描述符。

上方代码中，我们修改了 getName 的属性描述符为不可写，也就是 getName 是只读的，用户不可写。

当前修饰器的效果等价于：

Object.defineProperty(Person.prototype, '属性名', {
  value:"<属性值>"，
  writable: false,
});

---

修饰器不可用于函数

修饰器只能用于类和类的方法，不能用于函数，因为存在函数提升。

var count = 0;
var add = function () {
  count++;
};
@add
function foo() {
}

‍

上方代码，如果不发送变量提升的话，最终结果 count 的值会是1，但是因为发生了变量提升，导致最终结果是0。最终真正的执行顺序是这样的：

var count;
var add;
@add
function foo() {
}
count = 0;
add = function () {
  count++;
};
console.log(count)

上方代码在进行 babel 转换时，会报错：Leading decorators must be attached to a class declaration.

有关变量提升的详细介绍，请移步ES6 新特性梳理系列丨Var + Let + Const 的区别与作用域

---

ES6 新特性梳理系列文章将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

叶阳辉

HFun 前端攻城狮

往期精彩：

• ES6 新特性梳理系列丨Var + Let + Const 的区别与作用域

• ES6 新特性梳理系列丨变量的解构赋值

• ES6 新特性梳理系列丨Symbol - 新的数据类型

• ES6 新特性梳理系列丨新的数据结构-Set
  

• ES6 新特性梳理系列丨新的数据结构-Map

• ES6 新特性梳理系列丨Proxy 和 Reflect

• ES6 新特性梳理系列丨Iterator 和 for...of 循环

• ES6 新特性梳理系列丨Generator 函数

• ES6 新特性梳理系列丨Promise 对象

• ES6 新特性梳理系列丨Module

• ES6 新特性梳理系列丨异步操作

• ES6 新特性梳理系列丨Class