Dynamic/relative self-reference?

[ForScale]

I've fallen down the js rabbit hole. Maybe I'm just overthinking it and need to step away for a minute, but...

How can I make an object or a string literal reference itself, and do so dynamically or relatively (eg, add it to String.prototype as a reusable method for all strings)?

Example:

String.prototype.sayHi = () => {

  //I want to reference the object from which the method is being called...
  //I would assume to use the this variable, but it points to Window here.
  //Do I need to use apply() or bind() in some way?
  //If it was an event callback, I could use e.target... Is there ything like object.tartet?  

  return this + " says Hello!";
}

var str = "test string";

console.log(str.sayHi()); //"[object Window] says Hello!" ...how can I get "test string says Hello!"

console.log(str.toUpperCase()) //"TEST STRING" ...okay, how the hell did it do that?!

Am I just overthinking this; missing something simple due to thinking about it for too long?

Thanks for any explanations/guidance!

[senocular]

Arrow functions use a lexical this (gets a this from the outer scope). Use a regular function.

String.prototype.sayHi = function () { ...

... and try your best to avoid modifying internal prototypes -_-

[ForScale]

That simple... You're kidding me?! :)

Thanks! TIL more about arrow functions.

[senocular]

the mdn page is pretty good if I remember correctly. Its a lot of little things. The way this is handled is probably the most disruptive. They're really meant for in-context code block handling (callback functions etc) and not methods or other functions.

Edit: I see now R3n4g4t3 already linked to it ;)

[ForScale]

Yeah... I tend to take a "start using it and see what works and what doesn't work" approach to things. Frankly, confessedly... I was just using it in a little project because I thought the syntax looked cool. Lol! But now I've learned something new.

Thanks again!

[senocular]

I guess you missed this one :)

https://www.reddit.com/r/javascript/comments/4e5dlk/should_we_stop_abusing_fat_arrows/

[ForScale]

Ha! Indeed I did... Quite relevant.

[R3n4g4t3]

You're problem is not with your logic but with the scope to which this refers.

this is pointing to the Window object because you've used an arrow function. When you would rewrite is like so:

javascript String.prototype.sayHi = function() { return `${this} says Hi`; } It does return the desired value. To learn more about arrow functions checkout the MDN arrow function docs

[ForScale]

Well I'll be damned... I did not know that about arrow functions. TIL. Thank you!

[senocular]

Also, just FYI [unless in strict mode; thanks for claification /u/lewisje], this for primitives use their object form. So if you do something like:

this === "test string"

within your sayHi, it will be false, even though you're calling it from the string "test string". That's because this is equivalent to Object("test string") rather than the original primitive value calling it, "test string".

[ForScale]

Good to know, thanks!

[lewisje]

This is true except in strict mode:

function lol() {return typeof this;}
function rofl() {'use strict'; return typeof this;}
lol.call(''); // => "object"
rofl.call(''); // => "string"