兽装定制网站,合肥制作网站哪家好,佛山网站建设哪里有,如何用cms做网站目录 1. 类的修饰
2. 方法的修饰
3. 为什么修饰器不能用于函数#xff1f;
4. core-decorators.js
4.1autobind
4.2readonly
4.3override
4.4deprecate (别名deprecated)
4.5suppressWarnings
5. 使用修饰器实现自动发布事件
6. Mixin
7. Trait
8. Babel 转码器的…目录 1. 类的修饰
2. 方法的修饰
3. 为什么修饰器不能用于函数
4. core-decorators.js
4.1autobind
4.2readonly
4.3override
4.4deprecate (别名deprecated)
4.5suppressWarnings
5. 使用修饰器实现自动发布事件
6. Mixin
7. Trait
8. Babel 转码器的支持
总结
“睡服“面试官系列之各系列目录汇总建议学习收藏 1. 类的修饰
许多面向对象的语言都有修饰器Decorator函数用来修改类的行为。目前有一个提案将这项功能引入了 ECMAScript。
testable
class MyTestableClass {
// ...
}
function testable(target) {
target.isTestable true;
}
MyTestableClass.isTestable // true 上面代码中 testable 就是一个修饰器。它修改了 MyTestableClass 这个类的行为为它加上了静态属性 isTestable 。 testable 函数的参数 target 是 MyTestableClass 类本身。 基本上修饰器的行为就是下面这样。
decorator
class A {}
// 等同于
class A {}
A decorator(A) || A
也就是说修饰器是一个对类进行处理的函数。修饰器函数的第一个参数就是所要修饰的目标类。
function testable(target) {
// ...
}
上面代码中 testable 函数的参数 target 就是会被修饰的类。 如果觉得一个参数不够用可以在修饰器外面再封装一层函数
function testable(isTestable) {
return function(target) {
target.isTestable isTestable;
}
}
testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true
testable(false)
class MyClass {}
MyClass.isTestable // false
上面代码中修饰器 testable 可以接受参数这就等于可以修改修饰器的行为。 注意修饰器对类的行为的改变是代码编译时发生的而不是在运行时。这意味着修饰器能在编译阶段运行代码。也就是说修饰器本质就是编译时 执行的函数。 前面的例子是为类添加一个静态属性如果想添加实例属性可以通过目标类的 prototype 对象操作
function testable(target) {
target.prototype.isTestable true;
}
testable
class MyTestableClass {}
let obj new MyTestableClass();
obj.isTestable // true
上面代码中修饰器函数 testable 是在目标类的 prototype 对象上添加属性因此就可以在实例上调用。 下面是另外一个例子。
// mixins.js
export function mixins(...list) {
return function (target) {
Object.assign(target.prototype, ...list)
}
}
// main.js
import { mixins } from ./mixins
const Foo {
foo() { console.log(foo) }
};
mixins(Foo)
class MyClass {}
let obj new MyClass();
obj.foo() // foo
上面代码通过修饰器 mixins 把 Foo 类的方法添加到了 MyClass 的实例上面。可以用 Object.assign() 模拟这个功能
const Foo {
foo() { console.log(foo) }
};
class MyClass {}
Object.assign(MyClass.prototype, Foo);
let obj new MyClass();
obj.foo() // foo
实际开发中React 与 Redux 库结合使用时常常需要写成下面这样
class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
有了装饰器就可以改写上面的代码。
connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}
相对来说后一种写法看上去更容易理解
2. 方法的修饰
修饰器不仅可以修饰类还可以修饰类的属性。
class Person {
readonly
name() { return ${this.first} ${this.last} }
}
上面代码中修饰器 readonly 用来修饰“类”的 name 方法。 此时修饰器函数一共可以接受三个参数第一个参数是所要修饰的目标对象即类的实例这不同于类的修饰那种情况时 target 参数指的是类本 身第二个参数是所要修饰的属性名第三个参数是该属性的描述对象。
function readonly(target, name, descriptor){
// descriptor对象原来的值如下
// {
// value: specifiedFunction,
// enumerable: false,
// configurable: true,
// writable: true
// };
descriptor.writable false;
return descriptor;
}
readonly(Person.prototype, name, descriptor);
// 类似于
Object.defineProperty(Person.prototype, name, descriptor);
上面代码说明修饰器readonly会修改属性的描述对象descriptor然后被修改的描述对象再用来定义属性。 下面是另一个例子修改属性描述对象的 enumerable 属性使得该属性不可遍历。
class Person {
nonenumerable
get kidCount() { return this.children.length; }
}
function nonenumerable(target, name, descriptor) {
descriptor.enumerable false;
return descriptor;
}
下面的 log 修饰器可以起到输出日志的作用
class Math {
log
add(a, b) {
return a b;
}
}
function log(target, name, descriptor) {
var oldValue descriptor.value;
descriptor.value function() {
console.log(Calling ${name} with, arguments);
return oldValue.apply(null, arguments);
};
return descriptor;
}
const math new Math();
// passed parameters should get logged now
math.add(2, 4);
上面代码中 log 修饰器的作用就是在执行原始的操作之前执行一次 console.log 从而达到输出日志的目的。 修饰器有注释的作用。
testable
class Person {
readonly
nonenumerable
name() { return ${this.first} ${this.last} }
}
从上面代码中我们一眼就能看出 Person 类是可测试的而 name 方法是只读和不可枚举的。 下面是使用 Decorator 写法的组件看上去一目了然。
Component({
tag: my-component,
styleUrl: my-component.scss
})
export class MyComponent {
Prop() first: string;
Prop() last: string;
State() isVisible: boolean true;
render() {
return (
pHello, my name is {this.first} {this.last}/p
);
}
}
如果同一个方法有多个修饰器会像剥洋葱一样先从外到内进入然后由内向外执行。
function dec(id){
console.log(evaluated, id);
return (target, property, descriptor) console.log(executed, id);
}
class Example {
dec(1)
dec(2)
method(){}
}
// evaluated 1
// evaluated 2
// executed 2
// executed 1
上面代码中外层修饰器 dec(1) 先进入但是内层修饰器 dec(2) 先执行。 除了注释修饰器还能用来类型检查。所以对于类来说这项功能相当有用。从长期来看它将是 JavaScript 代码静态分析的重要工具。
3. 为什么修饰器不能用于函数
修饰器只能用于类和类的方法不能用于函数因为存在函数提升。
var counter 0;
var add function () {
counter;
};
add
function foo() {
}
上面的代码意图是执行后 counter 等于 1但是实际上结果是 counter 等于 0。因为函数提升使得实际执行的代码是下面这样。
add
function foo() {
}
var counter;
var add;
counter 0;
add function () {
counter;
};
下面是另一个例子。
var readOnly require(some-decorator);
readOnly
function foo() {
}
上面代码也有问题因为实际执行是下面这样。
var readOnly;
readOnly
function foo() {
}
readOnly require(some-decorator);
总之由于存在函数提升使得修饰器不能用于函数。类是不会提升的所以就没有这方面的问题。 另一方面如果一定要修饰函数可以采用高阶函数的形式直接执行。
function doSomething(name) {
console.log(Hello, name);
}
function loggingDecorator(wrapped) {
return function() {
console.log(Starting);
const result wrapped.apply(this, arguments);
console.log(Finished);
return result;
}
}
const wrapped loggingDecorator(doSomething);
4. core-decorators.js
core-decorators.js是一个第三方模块提供了几个常见的修饰器通过它可以更好地理解修饰器
4.1autobind
autobind 修饰器使得方法中的 this 对象绑定原始对象。
import { autobind } from core-decorators;
class Person {
autobind
getPerson() {
return this;
}
}
let person new Person();
let getPerson person.getPerson;
getPerson() person;
// true
4.2readonly
readonly 修饰器使得属性或方法不可写。
import { readonly } from core-decorators;
class Meal {
readonly
entree steak;
}
var dinner new Meal();
dinner.entree salmon;
// Cannot assign to read only property entree of [object Object]
4.3override
override 修饰器检查子类的方法是否正确覆盖了父类的同名方法如果不正确会报错。
import { override } from core-decorators;
class Parent {
speak(first, second) {}
}
class Child extends Parent {
override
speak() {}
// SyntaxError: Child#speak() does not properly override Parent#speak(first, second)
}
// or
class Child extends Parent {
override
speaks() {}
// SyntaxError: No descriptor matching Child#speaks() was found on the prototype chain.
//
// Did you mean speak?
}
4.4deprecate (别名deprecated)
deprecate 或 deprecated 修饰器在控制台显示一条警告表示该方法将废除。
import { deprecate } from core-decorators;
class Person {
deprecate
facepalm() {}
deprecate(We stopped facepalming)
facepalmHard() {}
deprecate(We stopped facepalming, { url: http://knowyourmeme.com/memes/facepalm })
facepalmHarder() {}
}
let person new Person();
person.facepalm();
// DEPRECATION Person#facepalm: This function will be removed in future versions.
person.facepalmHard();
// DEPRECATION Person#facepalmHard: We stopped facepalming
person.facepalmHarder();
// DEPRECATION Person#facepalmHarder: We stopped facepalming
//
// See http://knowyourmeme.com/memes/facepalm for more details.
//
4.5suppressWarnings
suppressWarnings 修饰器抑制 deprecated 修饰器导致的 console.warn() 调用。但是异步代码发出的调用除外。
import { suppressWarnings } from core-decorators;
class Person {
deprecated
facepalm() {}
suppressWarnings
facepalmWithoutWarning() {
this.facepalm();
}
}
let person new Person();
person.facepalmWithoutWarning();
// no warning is logged
5. 使用修饰器实现自动发布事件
我们可以使用修饰器使得对象的方法被调用时自动发出一个事件
import postal from postal/lib/postal.lodash;
export default function publish(topic, channel) {
return function(target, name, descriptor) {
const fn descriptor.value;
descriptor.value function() {
let value fn.apply(this, arguments);
postal.channel(channel || target.channel || /).publish(topic, value);
};
};
}
上面代码定义了一个名为 publish 的修饰器它通过改写 descriptor.value 使得原方法被调用时会自动发出一个事件。它使用的事件“发布/订阅”库 是Postal.js。 它的用法如下
import publish from path/to/decorators/publish;
class FooComponent {
publish(foo.some.message, component)
someMethod() {
return {
my: data
};
}
publish(foo.some.other)
anotherMethod() {
// ...
}
}
以后只要调用 someMethod 或者 anotherMethod 就会自动发出一个事件
let foo new FooComponent();
foo.someMethod() // 在component频道发布foo.some.message事件附带的数据是{ my: data }
foo.anotherMethod() // 在/频道发布foo.some.other事件不附带数据
6. Mixin
在修饰器的基础上可以实现 Mixin 模式。所谓 Mixin 模式就是对象继承的一种替代方案中文译为“混入”mix in意为在一个对象之中混入另外 一个对象的方法。 请看下面的例子
const Foo {
foo() { console.log(foo) }
};
class MyClass {}
Object.assign(MyClass.prototype, Foo);
let obj new MyClass();
obj.foo() // foo
上面代码之中对象 Foo 有一个 foo 方法通过 Object.assign 方法可以将 foo 方法“混入” MyClass 类导致 MyClass 的实例 obj 对象都具有 foo 方 法。这就是“混入”模式的一个简单实现。 下面我们部署一个通用脚本 mixins.js 将 Mixin 写成一个修饰器。
export function mixins(...list) {
return function (target) {
Object.assign(target.prototype, ...list);
};
}
然后就可以使用上面这个修饰器为类“混入”各种方法。
import { mixins } from ./mixins;
const Foo {
foo() { console.log(foo) }
};
mixins(Foo)
class MyClass {}
let obj new MyClass();
obj.foo() // foo
通过 mixins 这个修饰器实现了在 MyClass 类上面“混入” Foo 对象的 foo 方法。 不过上面的方法会改写 MyClass 类的 prototype 对象如果不喜欢这一点也可以通过类的继承实现 Mixin
class MyClass extends MyBaseClass {
/* ... */
}
上面代码中 MyClass 继承了 MyBaseClass 。如果我们想在 MyClass 里面“混入”一个 foo 方法一个办法是在 MyClass 和 MyBaseClass 之间插入一个混入 类这个类具有 foo 方法并且继承了 MyBaseClass 的所有方法然后 MyClass 再继承这个类。
let MyMixin (superclass) class extends superclass {
foo() {
console.log(foo from MyMixin);
}
};
上面代码中 MyMixin 是一个混入类生成器接受 superclass 作为参数然后返回一个继承 superclass 的子类该子类包含一个 foo 方法。 接着目标类再去继承这个混入类就达到了“混入” foo 方法的目的。
class MyClass extends MyMixin(MyBaseClass) {
/* ... */
}
let c new MyClass();
c.foo(); // foo from MyMixin
如果需要“混入”多个方法就生成多个混入类
class MyClass extends Mixin1(Mixin2(MyBaseClass)) {
/* ... */
}
这种写法的一个好处是可以调用 super 因此可以避免在“混入”过程中覆盖父类的同名方法。
let Mixin1 (superclass) class extends superclass {
foo() {
console.log(foo from Mixin1);
if (super.foo) super.foo();
}
};
let Mixin2 (superclass) class extends superclass {
foo() {
console.log(foo from Mixin2);
if (super.foo) super.foo();
}
};
class S {
foo() {
console.log(foo from S);
}
}
class C extends Mixin1(Mixin2(S)) {
foo() {
console.log(foo from C);
super.foo();
}
}
上面代码中每一次 混入 发生时都调用了父类的 super.foo 方法导致父类的同名方法没有被覆盖行为被保留了下来。
new C().foo()
// foo from C
// foo from Mixin1
// foo from Mixin2
// foo from S
7. Trait
Trait 也是一种修饰器效果与 Mixin 类似但是提供更多功能比如防止同名方法的冲突、排除混入某些方法、为混入的方法起别名等等。 下面采用traits-decorator这个第三方模块作为例子。这个模块提供的 traits 修饰器不仅可以接受对象还可以接受 ES6 类作为参数。
import { traits } from traits-decorator;
class TFoo {
foo() { console.log(foo) }
}
const TBar {
bar() { console.log(bar) }
};
traits(TFoo, TBar)
class MyClass { }
let obj new MyClass();
obj.foo() // foo
obj.bar() // bar
上面代码中通过 traits 修饰器在 MyClass 类上面“混入”了 TFoo 类的 foo 方法和 TBar 对象的 bar 方法。 Trait 不允许“混入”同名方法。
import { traits } from traits-decorator;
class TFoo {
foo() { console.log(foo) }
}
const TBar {
bar() { console.log(bar) },
foo() { console.log(foo) }
};
traits(TFoo, TBar)
class MyClass { }
// 报错
// throw new Error(Method named: methodName is defined twice.);
// ^
// Error: Method named: foo is defined twice
上面代码中 TFoo 和 TBar 都有 foo 方法结果 traits 修饰器报错。 一种解决方法是排除 TBar 的 foo 方法。
import { traits, excludes } from traits-decorator;
class TFoo {
foo() { console.log(foo) }
}
const TBar {
bar() { console.log(bar) },
foo() { console.log(foo) }
};
traits(TFoo, TBar::excludes(foo))
class MyClass { }
let obj new MyClass();
obj.foo() // foo
obj.bar() // bar
上面代码使用绑定运算符::在 TBar 上排除 foo 方法混入时就不会报错了。 另一种方法是为 TBar 的 foo 方法起一个别名。
import { traits, alias } from traits-decorator;
class TFoo {
foo() { console.log(foo) }
}
const TBar {
bar() { console.log(bar) },
foo() { console.log(foo) }
};
traits(TFoo, TBar::alias({foo: aliasFoo}))
class MyClass { }
let obj new MyClass();
obj.foo() // foo
obj.aliasFoo() // foo
obj.bar() // bar
上面代码为 TBar 的 foo 方法起了别名 aliasFoo 于是 MyClass 也可以混入 TBar 的 foo 方法了。 alias 和 excludes 方法可以结合起来使用
traits(TExample::excludes(foo,bar)::alias({baz:exampleBaz}))
class MyClass {}
上面代码排除 了TExample 的 foo 方法和 bar 方法为 baz 方法起了别名 exampleBaz 。 as 方法则为上面的代码提供了另一种写法。
traits(TExample::as({excludes:[foo, bar], alias: {baz: exampleBaz}}))
class MyClass {}
8. Babel 转码器的支持
目前Babel 转码器已经支持 Decorator。 首先安装 babel-core 和 babel-plugin-transform-decorators 。由于后者包括在 babel-preset-stage-0 之中所以改为安装 babel-preset-stage-0 亦可
$ npm install babel-core babel-plugin-transform-decorators
然后设置配置文件 .babelrc 。
{
plugins: [transform-decorators]
}
这时Babel 就可以对 Decorator 转码了。 脚本中打开的命令如下
babel.transform(code, {plugins: [transform-decorators]})
Babel 的官方网站提供一个在线转码器只要勾选 Experimental就能支持 Decorator 的在线转码。
总结
本博客源于本人阅读相关书籍和视频总结创作不易谢谢点赞支持。学到就是赚到。我是歌谣励志成为一名优秀的技术革新人员。
欢迎私信交流一起学习一起成长。
推荐链接 其他文件目录参照
“睡服“面试官系列之各系列目录汇总建议学习收藏
