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, Nov 16 '15 at 08: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, Nov 16 '15 at 09:05

score 2 · Answer 1 · edited May 23 '17 at 12:30

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 · Answer 2 · 2015-11-16T09:44:28.247

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 '15 at 09:44

answered Nov 16 '15 at 09:23

LNT

876
8
18

Note that you put the declerations for the prototypes inside of the constructor. These should only be declared once outside of the constructor. – Sean_A91 Nov 16 '15 at 09:28
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. – Mansoor Akhtar Nov 16 '15 at 09:30
@Sja91 its not inside , have a look again, its empty constructor – LNT Nov 16 '15 at 09:32
@MansoorAkhtar do you have access to core.js? you dont want to make changes in core.js? can you give more detail? – LNT Nov 16 '15 at 09:33
@LNT it have updated my question you can check it now. – Mansoor Akhtar Nov 16 '15 at 09:38
Ah yes it is, I appologize. – Sean_A91 Nov 16 '15 at 09:44

score 0 · Answer 3 · answered Nov 17 '15 at 00:37

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

Overriding property in JavaScript function

3 Answers3