es6装饰器

问题描述

问 题

请问这一段是什么意思？下面这个为啥会先于add这个函数执行？

解决方案

修饰器 (decorator) 是 ES7 的特性，很遗憾它没能在 ES6 中实现。由于 ES7 还处于起草的阶段，所以最终会怎么用，现在还不明确。

不过就你的问题，抛开修饰器不说，由于 function 和 var 会自动提升（指将定义提升到其它语句的前面），所以代码看起来是像这样的

var counter;
var add;

function foo() {
}

counster = 0;

add = function() {
    counter++;
};

注意 function 语句会提升，但 function 表达式不会，作为某个运算符操作数的一定是表达式。

add = function() {...}，这里的 function 是赋值运算符的操作数，所以可以识别它是一个表达式，不会提升。

function foo() {...} 很独立，是个语句，所以它提升了，提升到所有除定义变量或函数的其它语句之前，也就是上图那个位置。

最后按相对位置加上修饰符 @add，就成了图上的样子。

---

看看这段代码

var test = function() {
    console.log("function expression");
};

test();

function test() {
    console.log("function statement");
}

test();

你以为它会输出

function expression
function statement

结果它输出的是

如果想输出 function statement，必须在 test = function() {...} 之前调用一次 test()，自己试试就知道了。原因就是解释器会提升申明/定义。

提升之后的代码大概是这样

var test;
function test() {
    console.log("function statement");
}

// test();  // 如果在顶上加了 test()，会出现在这里

test = function() {
    console.log("function expression");
};

test();
test();

这篇关于es6装饰器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！