打字稿错误引用_this

Question

我试图String.Prototype在TypeScript中定义一些属性:

Object.defineProperty(String.prototype, 'test', {
    value: () => {
        console.log("this is a test over text " + this);
    }
})

在javaScript原型中,this指的是调用该方法的对象(在本例中为字符串值).但编译后的文件输出是:

var _this = this;
Object.defineProperty(String.prototype, 'test', {
    value: function () {
        console.log("this is a test over text " + _this);
    }
});

TypeScript编译器添加变量_this并引用它.

这是一个错误还是我的实施中存在问题？

Answer 1

这是一个错误还是我的实施中存在问题？

不,这就是TypeScript的箭头函数的工作方式:在箭头函数中,它this是从创建函数的上下文继承的,而不是根据它的调用方式设置.(箭头功能也在ES2015中,至少部分受到CoffeeScript的"胖箭"功能的启发;我不知道TypeScript的历史以及它是否也是ES2015箭头功能灵感的一部分,反之亦然.)

以下是上面规范链接的引用:

函数表达式引入了一个新的动态绑定,而箭头函数表达式保留了它的封闭上下文.

箭头函数表达式对于编写回调特别有用,否则通常会出现未定义或意外的回调.

在示例中

class Messenger {  
    message = "Hello World";  
    start() {  
        setTimeout(() => alert(this.message), 3000);  
    }  
};

var messenger = new Messenger();  
messenger.start();

使用箭头函数表达式会使回调与周围的'start'方法具有相同的效果.

如果您想this依赖函数的调用方式,请不要使用箭头函数,请使用function:

Object.defineProperty(String.prototype, 'test', function() {
    console.log("this is a test over text " + this);
})

另请注意,nils指出第三个参数Object.defineProperty应该是属性描述符,而不是函数.你可能意味着:

Object.defineProperty(String.prototype, 'test', {
    value: function() {
        console.log("this is a test over text " + this);
    }
});

TypeScript转换器根本不会改变它 ; 呼叫"testing".test()输出"this is a test of text testing":

Object.defineProperty(String.prototype, 'test', {
    value: function() {
        snippet.log("this is a test over text " + this);
    }
});
"testing".test();

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>