How to assign a property to a global function from inside that function

Question

Assuming functions in javascript are actually objects, how can I assign properties to this function object within the function itself.

Below are not working as 'this' keyword is referring to the window object, so 'prop' will be assigned to the window global object not to the function object.

function test() {
    this.prop = value;
}

Why 'this' keyword inside global functions is referring to the window object and not referring to the function object itself?

Edit:

My question is different from the duplicate question as I am asking how to assign a property to a global function inside that function, not about the scope of variables.

Possible duplicate of [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — Heretic Monkey, Jun 08 '18 at 16:24
Why would it refer to the function? Use `test` to refer to the function. The `this` keyword refers to a dynamic value that depends on how the function was called, and is usually `undefined` in strict mode. — Bergi, Jun 08 '18 at 17:33
The purpose is to assign properties to a function so I can use them later when passing this function as a callback. These properties are strictly related to the behavior of the function only. — Ahmed Sonbaty, Jun 08 '18 at 22:19
But why the 'this' keyword is referring to the global object not referring to the function object itself? — Ahmed Sonbaty, Jun 08 '18 at 22:21

Jordan Running · Accepted Answer · 2018-06-08T16:31:59.050

2

Reference the function by name:

function test(value) {
  test.prop = value;
}

test('hello');
console.log(test.prop); // => "hello"

edited Jun 08 '18 at 16:31

answered Jun 08 '18 at 16:19

Jordan Running

102,619
17
182
182

t.888 · Answer 2 · 2018-06-09T01:18:18.790

Short answer: invoke the function via call and pass the intended this as the first argument.

function test(value) {
  this.prop = value
}

//  'this' v     v value
test.call(test, 10)
console.log(test.prop) // 10

The purpose of call is to explicitly set the this of the invoked function.

Explanation:

For non-strict mode, when the function is invoked without a caller, e.g., test(10), this is implicitly set to the global object, in this case window. In strict mode, it will be undefined.

function test() {
  return this
}

console.log(test()) // window (or undefined in strict mode)

Inside of a function, this refers to the caller of the function.

const caller = {
    test: function () { return this }
}

console.log(caller.test()) // caller, i.e., { test: function() {...} }

This is true with 'classes' as well (functions invoked with new).

function MyConstructor() {
  this.test = function() {
    return this
  }
}

const instance = new MyConstructor()
console.log(instance.test()) // instance of MyConstructor

Depending on your use case, it may be preferable to use this form:

const myObj = {
  test: function(value) {
    this.prop = value
  }
}

// 'prop' will be set on `myObj` instead of the function.
myObj.test(10)
console.log(myObj) // { prop: 10, test: function(value) {...} }

or a class-like construct:

function MyConstructor(value) {
  this.prop = value
}

const instance = new MyConstructor(10)
console.log(instance) // MyConstructor { prop: 10 }
console.log(instance.prop) // 10

@Bergi, this is a clear and correct answer that gives the user an explanation directly in line with the crux of his question and explicates the observed behavior with several examples. I'm not making any value judgments on his usage. A judgment of what *should* be used is at least partially subjective and would rely on details not provided in the framing of the question. Setting the caller via `call` is perfectly adequate and actually helps demonstrate the behavior of `this` in the context of the question. — t.888, Jun 08 '18 at 17:59
*I* think that using `call` is not adequate for wanting to refer to the function from inside itself - just wanted to give a reason for the subjective downvote on an otherwise fine answer with good explanation. — Bergi, Jun 08 '18 at 21:52

How to assign a property to a global function from inside that function

2 Answers2