Question

我搜索了JavaScript装饰器，但不确定使用装饰器调用函数和正常调用函数之间的区别。

function myFunction(text) {
  console.log(text)
}

myFunction() vs @myFunction vs @myFunction()

我觉得我在这里绝对不对。有人可以解释吗？

Answer 1

装饰器用于按字面意义装饰函数。

假设您要键入自己的装饰器，该装饰器可用于查看函数需要运行多少时间。您可以编写一个装饰器@time()来做到这一点。完成后，可以在要跟踪的每个函数之前使用此装饰器。

装饰器用作高级函数，主要是为了使代码具有功能组成！

一个很好的例子是Angular中的@Component()装饰器。在类上使用此装饰器的同时，Angular知道它必须将其作为一个组件来处理，并且在幕后使用了一些方法。

Answer 2

装饰人员可以启用关注点分离。考虑以下功能：

function add(a, b) {
  return a + b;
}

谁都很好，花花公子。但是，假设您要添加日志记录：

function add(a, b) {
  const sum = a + b;
  console.log(a, b, sum);
}

现在，该函数更长，更复杂，并且将实际上没有任何关系的两件事（求和和记录）融合在一起。更好的方法是：

function logs(f) {
  return function(...args) {
    const result = f(...args);
    console.log(args, result);
    return result;
  };
};

const addAndLog = logs(add);

这就是装饰器。您正在谈论的内容（即JavaScript装饰器提案）只是上述模式的语法捷径。这里的logs是修饰器，它为传入的函数添加了一项功能，即无需将函数与大量无关的代码复杂化即可进行记录的功能。该建议目前仅限于类和方法，但我发现从概念上讲，使用常规功能更容易解释。

Answer 3

有了装饰器，我们就可以不扩展。 mutli继承为类添加了一些方法。

function withLoginStatus( DecoratorClass ) {
    return class extends DecoratorClass {
        constructor(...args ) {
            super(...args);
            this.isLoggedIn = false;
        }

        setLoggedIn() {
            console.log('setLogin!');
            this.isLoggedIn = true;
        }
    }
}


@withLoginStatus
class User {
    constructor(firstname, lastName) {
        this.firstname = firstname;
        this.lastName = lastName;
    }
    getFullName() {
        return `${this.firstname} ${this.lastName}`;
    }
}

JavaScript装饰器有什么意义？

3 个答案: