Why lambda cannot be used to determine prototype function

Question

Can someone explain why defining a prototype function with a lambda expression does not work? I thought I needed to ask, but could not find.

function Book(title, year) { this.title = title; this.year = year; // define a function within the object, which works fine this.printYear = () => console.log("instance function of an object: " + this.year); } 

this does not work

 Book.prototype.printTitle2 = () => { console.log(this.title); } 

and this is normal, of course:

 Book.prototype.printTitle = function() { console.log(this); console.log(this.title); } 

Answer 1

One of the main features of arrow functions is that they close above this from the context in which they are created; they do not get it based on what they are called, like other functions. So that...

 // ...whatever `this` is *here* Book.prototype.printTitle2 = () => { // ...is what `this` will be *here* console.log(this.title); }; 

But your function depends on this , changing depending on what it's called.

It is simply not used for arrow functions. Use the regular function:

 Book.prototype.printTitle2 = function() { console.log(this.title); }; 

Or better yet, use the new class syntax:

 class Book { constructor(title, year) { this.title = title; this.year = year; } printTitle2() { console.log(this.title); } } 

Answer 2

Arrow function allow the context this belongs to the area in which the function was defined. I believe that you have defined this function in the window scope. This way, this will point to window in your function.

Here you can use the usual anonymous function . And we must be careful when using arrow functions.

Answer 3

In addition to the @ tj-crowder answer , I wanted to leave a test case (mocha assert) that you can use for rendering that doesn't work.

You can also learn more about the scale of arrow functions: You do not know JS Kyle Simpson, who explains this in detail.

Basically, the this arrow function points to the surrounding context of the current context, which is useful if you have functions. What he does is basically do var self = this; thing.

Or, as Kyle says:

[...] The lexical this in the callback of the arrow function in the previous fragment now points to the same value as in the attached makeRequest(..) function. In other words, => is the syntax version for var self = this .

In cases where var self = this (or, alternatively, calling the .bind(this) function .bind(this) will usually be useful, => arrow functions are a more pleasant alternative that works on the same principle. [...]

You can check it out yourself: https://gist.github.com/jay-bricksoft/96738dd8a48ceb9f517e914b834cc1ee

In my test case, this was the result:

 Lambda function(){} √ should equal function´s type 1) should have equal context as function 2) should be able to be used as constructor 1 passing (39ms) 2 failing 1) Lambda function(){} should have equal context as function: AssertionError: 'undefined' == 'string' + expected - actual -undefined +string at Context.<anonymous> (test\index.js:29:14) 2) Lambda function(){} should be able to be used as constructor: TypeError: construct_l is not a constructor at Context.<anonymous> (test\index.js:34:20) 

EDIT: Added example / link to Kyle Simpson "You Do not Know ES6" https://github.com/getify/You-Dont-Know-JS/tree/master/es6%20%26%20beyond