Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript: add methods to function prototype

Is there a shorter way to write this:

var controller = function(){ 
    /*--- constructor ---*/
}; 

controller.prototype.function1 = function(){ 
    //Prototype method1
}

controller.prototype.function2 = function(){ 
    //Prototype method2
}

controller.prototype.function3 = function(){ 
    //Prototype method3
} 

return controller

I'm using require.js. I wondered if I can avoid the controller.prototype code repetition.

like image 683
html_programmer Avatar asked Apr 11 '14 18:04

html_programmer


People also ask

Is __ proto __ deprecated?

__proto__ is considered outdated and somewhat deprecated (moved to the so-called “Annex B” of the JavaScript standard, meant for browsers only). The modern methods to get/set a prototype are: Object.

How do you add a function to a prototype?

To pass a function as props in React TypeScript: Define a type for the function property in the component's interface. Define the function in the parent component. Pass the function as a prop to the child component.

What are prototype methods in JavaScript?

Every object in JavaScript has a built-in property, which is called its prototype. The prototype is itself an object, so the prototype will have its own prototype, making what's called a prototype chain. The chain ends when we reach a prototype that has null for its own prototype.

What is difference between __ proto __ and prototype?

prototype is a property of a Function object. It is the prototype of objects constructed by that function. __proto__ is an internal property of an object, pointing to its prototype. Current standards provide an equivalent Object.


Video Answer


1 Answers

With a Helper Function

Even though this is longer than the answer given if you have to do this multiple places might be helpful to define a helper method:

function protomix(constructor, mix){
    for(var i in mix)
      if(mix.hasOwnProperty(i))
          constructor.prototype[i]=mix[i];
}

var controller = function(){
 //constructor
};

protomix(controller, {

   function1 :  function(){ 
       //Prototype method1
   },

   function2:  function(){ 
       //Prototype method2
   },

   function3 : function(){ 
    //Prototype method3
   } 
});

return controller;

Using jQuery's extend method

I thought I should mention jQuery's extend method because it was brought up in a comment and because in general has more functionality than the small helper method defined in the first part of the answer:

var controller = function(){ /* ctor */};
return $.extend(controller.prototype,{

   function1 :  function(){ 
       //Prototype method1
   },

   function2:  function(){ 
       //Prototype method2
   },

   function3 : function(){ 
    //Prototype method3
   } 
});

Other Libraries

Other libraries also have similar functionality built in, such as underscore's extend method or Lo-Dash's assign method

like image 90
konkked Avatar answered Sep 27 '22 19:09

konkked