Overriding property in JavaScript function

Question

I want to override a member function in constructor function not the whole constructor function but only one member function inside it, my constructor function look like

function viewModel(){
  var self= this;
  self = {
          testFuncA:function(){
            console.log("you are in not overrided function test FuncA");
          },
          testFuncB:function(){
            console.log("you are in not orverided function test FuncB");
          }
      };
  }

and in override.js i want to override it like this

viewModel.prototype.testFuncA = function(){
      console.log("you are in overrided function test funcA");  
 }

and when i create object of viewModel constructor function

var obj = new viewModel();
obj.testFuncA();

then output should be you are in overrided function test funcA, but it print you are in not overrided function test FuncA which is not my desire output how may i achieve desire output.

When only core.js file is loaded in my web page then the testFuncA will output as you are in not overrided function test FuncA but when i load both files, that is core.js and after that override.js then testFuncA will output you are in overrided function test funcA.

self in this piece of code is local to viewModel scope, you can't access them in an outer scope — Hacketo
– Hacketo, Commented Nov 16, 2015 at 8:52
Maybe we miss some important part of your code. As shared, the self = this is overridden by self = { /* … */}, so self becomes totally private as mentioned by Hacketo. Only objects defined within that constructor will be able to use self. — ghybs
– ghybs, Commented Nov 16, 2015 at 9:05

Community · Accepted Answer · 2017-05-23 12:30:14Z

So first off, we cannot change the inner workings of this constructor function, you can only do that sort of thing with a prototype, so instead you will need to completely override it in the namespace. In override.js simply have the same code like this:

function viewModel(){
    this.testFuncA = function(){
        console.log("This is an overrided function test FuncA");
    };
    this.testFuncB = function(){
        console.log("This is an function test FuncB");
    };
}

So this will replace your original function in the namespace, ultimately achieving your goal. Had you been using a prototype system where you copy from an existing object, you'd simply have to do something along the lines of Proto.testFuncA = function(){...}

Note: I changed the code as a suggestion on how to handle your constructors, as a constructor is passed a new object via 'this' already, no need to make another. You also had 'Self' as a reference to 'this' but then by making a new object you actually only changed the reference in Self to the new object, you did not actually alter this in any way. instead you altered this new object that 'Self' was pointing to.

Note2: So if you would like to use prototypes. I would read through this Why is it necessary to set the prototype constructor? for a better understanding of prototypes. And this as well http://www.w3schools.com/js/js_object_prototypes.asp

LNT · Accepted Answer · 2015-11-16 09:44:28Z

1

In core.js if you have something like this

      function viewModel(){
      }
      viewModel.prototype.testFuncA = function(){
        console.log("you are in not overrided function test FuncA");
      };
      viewModel.prototype.testFuncB = function(){
        console.log("you are in not orverided function test FuncB");
      };

Then in override.js you can have soem thig like this

      viewModel.prototype.testFuncA = function(){
            console.log("you are in overrided function test funcA");  
       }

Edited :-- in case you dont want to make changes in core.js

var viewModelParent = viewModel;
var myViewModel = new viewModelParent();

var viewModel = function(){
    this.testFuncA = function(){
            console.log("you are in overrided function test funcA");  
    }
};
viewModel.prototype = myViewModel;

edited Nov 16, 2015 at 9:44

answered Nov 16, 2015 at 9:23

LNT

9268 silver badges19 bronze badges

6 Comments

Sean_A91 Over a year ago

Note that you put the declerations for the prototypes inside of the constructor. These should only be declared once outside of the constructor.

Mansoor Akhtar Over a year ago

there are hundreds of functions in viewModel constructor function which i cant convert to like that you defined needs some generic solution which can fit in my given scenario.

LNT Over a year ago

@Sja91 its not inside , have a look again, its empty constructor

LNT Over a year ago

@MansoorAkhtar do you have access to core.js? you dont want to make changes in core.js? can you give more detail?

Mansoor Akhtar Over a year ago

@LNT it have updated my question you can check it now.

|

gu mingfeng · Accepted Answer · 2015-11-17 00:37:41Z

0

core.js can do some change like

function viewModel(){

}
viewModel.prototype = {
      testFuncA:function(){
        console.log("you are in not overrided function test FuncA");
      },
      testFuncB:function(){
        console.log("you are in not orverided function test FuncB");
      }
}

in override.js use code below

viewModel.prototype.testFuncA=function(){
     //TODO::
}

U should confirm core.js load before override.js

answered Nov 17, 2015 at 0:37

gu mingfeng

1,0508 silver badges10 bronze badges

Collectives™ on Stack Overflow

Overriding property in JavaScript function

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related