CODEWITHSUNDEEP
javascriptfunctionthis
Filipe Aleixo
Filipe Aleixo

Reputation: 4242

How to reuse function attribute?

I want to do something like the following:

function StatusBox() {
    this.connectionStatus = $("#connectionStatus");
}

StatusBox.nosupport = function(type) {
    StatusBox.connectionStatus.html('<span style="color: red;">' + NO_SUPPORT + '</span>');
};

StatusBox.error = function(type) {
    StatusBox.connectionStatus.html('<span style="color: red;">' + ERROR + '</span>');
};

But I get Uncaught TypeError: Cannot read property 'html' of undefined

How do I reuse $("#connectionStatus") in the child functions?

Upvotes: 2

Views: 65

Answers (2)

Snirka
Snirka

Reputation: 598

The value of this inside a function is usually defined by the function call. That means that this can have different values inside it for each execution of the function. I would not use this but rather do something like the following examples:

Exmaple 1:

function fun() {
    fun.id = 1234;
    console.log('called fun function!');
}

fun.printId = function() {console.log(fun.id);}

fun();
fun.printId();

Similar to what you did, if you create the attribute inside the function you should call that function so the assignment will occur and any further use of this attribute, fun.id in the example above, will be recognized.

Example 2:

function fun() {
    console.log('called fun function!');
}

fun.id = 1234;
fun.printId = function() {console.log(fun.id);}

fun.printId();

Here you do the assignment of the attribute outside of fun so there is no need to call it.

Upvotes: 1

b.stevens.photo
b.stevens.photo

Reputation: 934

From what I can see the design pattern you're going after is this:

function StatusBox() {
    this.connectionStatus = $("#connectionStatus");
}

StatusBox.prototype.nosupport = function(type) {
    this.connectionStatus.html('<span style="color: red;">' + NO_SUPPORT + '</span>');
};

StatusBox.prototype.error = function(type) {
    this.connectionStatus.html('<span style="color: red;">' + ERROR + '</span>');
};

let statusBox = new StatusBox();
statusBox.nosupport();
statusBox.error();

But you can also do this:

function StatusBox() { }

StatusBox.getConnectionStatus = function() {
    StatusBox.connectionStatus = $("#connectionStatus");
};

StatusBox.nosupport = function(type) {
    StatusBox.connectionStatus.html('<span style="color: red;">' + NO_SUPPORT + '</span>');
};

StatusBox.error = function(type) {
    StatusBox.connectionStatus.html('<span style="color: red;">' + ERROR + '</span>');
};

StatusBox.getConnectionStatus();
StatusBox.nosupport();
StatusBox.error();

Which is a little redundant because a simple object will accomplish the same task:

const StatusBox = {
   getConnectionStatus: function() {
      StatusBox.connectionStatus = $("#connectionStatus");
   },
   nosupport: function(type) {
      StatusBox.connectionStatus.html('<span style="color: red;">' + NO_SUPPORT + '</span>');
   }
   error: function(type) {
      StatusBox.connectionStatus.html('<span style="color: red;">' + ERROR + '</span>');
   }
};

StatusBox.getConnectionStatus();
StatusBox.nosupport();
StatusBox.error();

Upvotes: 2

Related Questions