TypeScript 箭头函数表达式 - TypeScript 参考手册

箭头函数表达式，也可以成为 lambda 表达式，是形如 ()=>{something} 或 ()=>something

TypeScript 中的箭头函数表达式相当于 JavaScript 中的函数,它的好处是可以自动将函数中的 this 附加到上下文中

当我们尝试执行下面的 JavaScript 代码时

var shape = {
    name: "rectangle",
    popup: function() {

        console.log('This inside popup(): ' + this.name);

        setTimeout(function() {
            console.log('This inside setTimeout(): ' + this.name);
            console.log("I'm a " + this.name + "!");
        }, 3000);

    }
};

shape.popup();

会发现 this.name 是一个空值

但如果我们改用 TypeScript 的箭头函数，把 function() 替换为 () =>{}

var shape = {
    name: "rectangle",
    popup: function() {

        console.log('This inside popup(): ' + this.name);

        setTimeout( () => {
            console.log('This inside setTimeout(): ' + this.name);
            console.log("I'm a " + this.name + "!");
        }, 3000);

    }
};

shape.popup();

输出结果如下：

实际上，上面的 TypeScript 编译后，可以看到一行 var _this = this;

_this 在 setTimeout() 的回调函数引用了 name 属性

var shape = {
    name: "rectangle",
    popup: function () {
        var _this = this;
        console.log('This inside popup(): ' + this.name);
        setTimeout(function () {
            console.log('This inside setTimeout(): ' + _this.name);
            console.log("I'm a " + _this.name + "!");
        }, 3000);
    }
};
shape.popup();