Typescript invalid link to _this

Question

I tried to define some property for String.Prototype in TypeScript:

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

in javaScript prototypes, this refers to the object that called the method (in this case, a string value). But compiled file output:

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

The TypeScript compiler adds the _this variable and references it.

Is this a bug or is there a problem in my implementation?

Answer 1

Is this a bug or is there a problem in my implementation?

No, it's like TypeScript arrow functions : in arrow functions, this inherited from the context in which the function is created, and not determined by what it is called. (The arrow functions are also found in ES2015, inspired, at least in part, by CoffeeScript's bold arrow functions, I don’t know the TypeScript story and whether it was also part of the inspiration for ES2015 arrow functions or vice versa.)

Here is a quote from the specification link above:

A function expression introduces a new dynamically related one, while an arrow function expression stores it from its encompassing context.

Arrow function expressions are especially useful for writing callbacks that otherwise often have undefined or unexpectedly this.

In the example

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

Using an arrow function expression forces the callback to have the same effect as the surrounding start method.

If you want this depend on how the function is called, do not use the arrow function, use function :

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

Also note that as nils points out , the third argument to Object.defineProperty should be a property descriptor, not a function. Did you mean:

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

The TypeScript transpiler does not change at all ; by calling "testing".test() outputs of "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.imtqy.com/simple-snippets-console/snippet.js"></script>