Trouble with passing "this"

Question

Sorry for the poor title, i don't really know how to formulate my question.

The code below is a small part of a thing i'm doing to automate the generation of buttons paired with a click event for a game. I'm tring to pass the modal.load() function (which takes an associative array as argument) as a string to the "Look" button. Well the function passing works (it is not in the code provided), BUT

As you can see, each properties of actions[0].script returns undefined, as if this is not passed..

Tell me if you need anything else to understand the code.

actions = [{
    name: "Look",
    modal_color: 'salmon',
    modal_img: '',
    modal_title: 'This is a title',
    modal_text: 'This is text',
    script: `modal.load({'img': '${this.modal_img}', 'color': '${this.modal_color}', 'title': '${this.modal_color}', 'txt': '${this.modal_text}'});`,
  },
  {
    name: "Walk",
    script: "console.info('Other type of script')"
  }
]

console.log(actions[0].script)

EDIT : template strings for clarity

You're calling `this` before the object is even created, so it's referencing the wrong `this`. — Frank Modica, Oct 30 '18 at 16:12
Related: [How does the “this” keyword in Javascript act within an object literal?](https://stackoverflow.com/questions/13441307/how-does-the-this-keyword-in-javascript-act-within-an-object-literal) — CRice, Oct 30 '18 at 16:17
`this` would work after the object is created, like if you had a method on the object called `createScript` which then did `this.script = ... this.modal_img ... `. Probably overkill here. — Frank Modica, Oct 30 '18 at 16:18

score 3 · Answer 1 · answered Oct 30 '18 at 16:22

3

"this" works in a functional scope only, not in object scope

actions = [{
name: "Look",
modal_color: 'salmon',
modal_img: '',
modal_title: 'This is a title',
modal_text: 'This is text',
script: function(){
    return `modal.load({'img': '${this.modal_img}', 'color': '${this.modal_color}', 'title': '${this.modal_color}', 'txt': '${this.modal_text}'});`;

}},
{
    name: "Walk",
    script: "console.info('Other type of script')"
}
]

console.log(actions[0].script())

answered Oct 30 '18 at 16:22

Shishir Arora

5,521
4
30
35

I thought it would work, but when I click on the generated button, i get a console warning saying `SyntaxError: function statement requires a name`.. – Joseph Allain Oct 30 '18 at 16:31
use `script: function f(){` i.e. give some name "f" to this function – Shishir Arora Oct 30 '18 at 18:20

score 2 · Answer 2 · answered Oct 30 '18 at 16:17

Would it work for you to iterate the array after the objects creation?

E.g.,

 actions = [{
  name: "Look",
  modal_color: 'salmon',
  modal_img: '',
  modal_title: 'This is a title',
  modal_text: 'This is text'
   },
   {
  name: "Walk",
  script: "console.info('Other type of script')"
   }
 ];

 actions.forEach( (e) => { e.script = "modal.load({'img': '" + e.modal_img + "', 'color': '" + e.modal_color + "', 'title': '" + e.modal_color + "', 'txt': '" + e.modal_text + "'});" });

 console.log(actions[0].script);

score 0 · Answer 3 · answered Oct 30 '18 at 21:41

0

Thanks everyone, i finally decided to rework all my corresponding code to make things not as overcomplicated.

answered Oct 30 '18 at 21:41

Joseph Allain

640
1
5
10

Trouble with passing "this"

3 Answers3