import{_ as i,o as a,c as n,a4 as h}from"./chunks/framework.D5QV2ua-.js";const g=JSON.parse('{"title":"优秀装饰器源码学习（二）","description":"","frontmatter":{"title":"优秀装饰器源码学习（二）","date":"2021-06-27T00:00:00.000Z","tags":["技术笔记","源码学习"],"categories":["技术笔记"],"head":[["script",{},"!function(p){\\"use strict\\";!function(t){var s=window,e=document,i=p,c=\\"\\".concat(\\"https:\\"===e.location.protocol?\\"https://\\":\\"http://\\",\\"sdk.51.la/js-sdk-pro.min.js\\"),n=e.createElement(\\"script\\"),r=e.getElementsByTagName(\\"script\\")[0];n.type=\\"text/javascript\\",n.setAttribute(\\"charset\\",\\"UTF-8\\"),n.async=!0,n.src=c,n.id=\\"LA_COLLECT\\",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({\\"id\\":\\"Jgmg5avjAUvoyePS\\",\\"ck\\":\\"Jgmg5avjAUvoyePS\\",\\"hashMode\\":true});"]]},"headers":[],"relativePath":"technology/source/core-decorators-2.md","filePath":"technology/source/core-decorators-2.md","lastUpdated":1670770660000}'),l={name:"technology/source/core-decorators-2.md"};function k(t,s,p,e,E,r){return a(),n("div",{"data-pagefind-body":!0},s[0]||(s[0]=[h(`

优秀装饰器源码学习（二） ​

前言 ​

上一篇文章:优秀装饰器源码学习（一）：time

本篇先学习一些初级较简单的 @deprecate, @readonly, @enumerable, @nonconfigurable

deprecate ​

用于提示XX API/方法已经被弃用

使用示例 ​

使用如下,通过一个简单的 @deprecate 即可在函数执行的时候抛出 API已被弃用的警告

其中 deprecate与deprecated效果一致，只是不同的别名

ts
export { default as deprecate, default as deprecated } from './core/deprecate'
ts
import { deprecate, deprecated } from '../index'
class Test {
    @deprecate()
    sayHello1() {
        console.log('hello 1');
    }
    @deprecated('API弃用警告')
    sayHello2() {
        console.log('hello 2');
    }
    @deprecate('API弃用警告',{url:'https://www.baidu.com'})
    sayHello3() {
        console.log('hello 3');
    }
}

const t = new Test()
t.sayHello1()
t.sayHello2()
t.sayHello3()

执行效果 ​

图片

函数结构 ​

传入参数:

ts
const DEFAULT_MSG = 'This function will be removed in future versions.';

interface Options{
    url?:string
}

export default function deprecate(msg = DEFAULT_MSG, options:Options = {}) {
    return function (target, key, descriptor) {

    }
}

最终实现 ​

ts
const DEFAULT_MSG = 'This function will be removed in future versions.';

interface Options{
    url?:string
}

export default function deprecate(msg = DEFAULT_MSG, options:Options = {}) {
    return function (target, key, descriptor) {
        // 如果被装饰对象不是函数，直接抛出错误
        if (typeof descriptor.value !== 'function') {
            throw new SyntaxError('Only functions can be marked as deprecated');
        }

        // 生成方法的签名（反应来自与xx类xx方法）
        const methodSignature = \`\${target.constructor.name}#\${key}\`;

        // 如果有线上地址的文档描述原因，则展示一下这个地址
        if (options.url) {
            msg += \`\\n\\n    See \${options.url} for more details.\\n\\n\`;
        }

        return {
            ...descriptor,
            value: function deprecationWrapper() {
                // 打印警告信息
                console.warn(\`DEPRECATION \${methodSignature}: \${msg}\`);
                // 执行函数
                return descriptor.value.apply(this, arguments);
            }
        };
    }
}

readonly ​

将指定属性变为只读，即不可在实例化后更改属性的内容

使用示例 ​

使用如下,通过一个简单的 @readonly 即可将目标属性变为只读

ts
import { readonly } from '../index';
class Test {
    hello1(){
        console.log('hello1');
    }

    @readonly
    hello2(){
        console.log('hello2');
    }
}

const t = new Test();
t.hello1 = function(){
    console.log('1');
}

t.hello1()

t.hello2 = function(){
    console.log('2');
}

t.hello2()

执行效果 ​

图片

函数实现 ​

无需额外传参，直接通过修改装饰对象的descriptor上的writable属性为false实现

ts
export default function readonly(target, key, descriptor) {
    descriptor.writable = false
    return descriptor
}

enumerable、nonenumerable、enumable ​

更改装饰对象的enumerable属性值

使用示例 ​

ts
import enumable from "../core/enumable";
import enumerable from "../core/enumerable";
import nonenumerable from "../core/nonenumerable";

class Test {
    @nonenumerable
    a(){
        
    }
    @enumerable
    b(){

    }
    @enumable(false)
    c(){

    }
}

console.log(Object.getOwnPropertyDescriptor(Test.prototype,'a')?.enumerable === false); // true
console.log(Object.getOwnPropertyDescriptor(Test.prototype,'b')?.enumerable === true);  // true
console.log(Object.getOwnPropertyDescriptor(Test.prototype,'c')?.enumerable === false); // true

console.log(Object.keys(Test.prototype)); // ['b']

实现 ​

这个比较简单就是修改一下装饰对象的enumerable值

enumerable ​

ts
export default function enumerable(target, key, descriptor) {
    descriptor.enumerable = true
    return descriptor
}

nonenumerable ​

ts
export default function nonenumerable(target, key, descriptor) {
    descriptor.enumerable = false
    return descriptor
}

enumable ​

ts
export default function enumable(v = true) {
    return function (target, key, descriptor) {
        descriptor.enumerable = v
        return descriptor
    }
}

nonconfigurable ​

设置装饰对象的configurable属性为false

当且仅当 configurable 为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。

使用示例 ​

ts
import { nonconfigurable } from "../index";

class Test {
    @nonconfigurable
    a(){
        
    }
    b(){

    }
}

let prototype:any = Test.prototype
delete prototype.b
console.log(Object.keys(Test.prototype)); // ['a']
delete prototype.a // 抛出错误： Cannot delete property 'a' of #<Test>
console.log(Object.keys(Test.prototype));

实现 ​

这个依旧比较简单就是修改一下装饰对象的configurable值

ts
export default function nonconfigurable(target, key, descriptor) {
    descriptor.configurable = false
    return descriptor
}

未完待续 ​

下一篇将学习:

`,52)]))}const y=i(l,[["render",k]]);export{g as __pageData,y as default};