posted 7/25/2010 by Raghav Khunger
Few days back a person was asking on forums on how to copy the methods from one class to other in Javascript. Yes, it sounds interesting. You can make use of object oriented techniques in Javascript to make robust and well maintained applications. So come to the question which the OP asked. I have created a sample code to accomplish it. In this example I have used a source class (SourceClass.js) , a target class (TargetClass.js) , a utility script (Utility.js) which is having the heart of the code and a demo page (demo.aspx). Below is the complete script:
SourceClass.js code:
function SourceClass(x, y) { //x and y are instance properties this.x = x; this.y = y; } //Instance method SourceClass.prototype.InstanceMethod1 = function () { return this.x * this.y; } //Instance method SourceClass.prototype.InstanceMethod2 = function () { return this.x * this.x; } //Class method SourceClass.ClassMethod1 = function (i, j) { return i * j; } //Class method SourceClass.ClassMethod2 = function (i) { return i * i; }
TargetClass.js code:
function TargetClass(x, y) { //x and y are instance properties this.x = x; this.y = y; }
Utility.js code:
function CopyMethods(sourceClass, targetClass) { // Copy instance methods var source = sourceClass.prototype; var target = targetClass.prototype; for (obj in source) { if (typeof source[obj] != "function") continue; // ignore everything except function target[obj] = source[obj]; } // Copy class methods source = sourceClass; target = targetClass; for (obj in source) { if (typeof source[obj] != "function") continue; // ignore everything except function target[obj] = source[obj]; } }
Demo.aspx:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="SourceClass.js" type="text/javascript"></script> <script src="TargetClass.js" type="text/javascript"></script> <script src="Utility.js" type="text/javascript"></script> <script type="text/javascript"> //Copy the methods from source class to target class CopyMethods(SourceClass, TargetClass); //Let's test whether the targetclass has all the methods //which were in source class or not var output = null; //Test instance methods var obj = new TargetClass(2, 3); alert('Output of InstanceMethod1: ' + obj.InstanceMethod1()); alert('Output of InstanceMethod2: ' + obj.InstanceMethod2()); //Test class methods alert('Output of ClassMethod1:' + TargetClass.ClassMethod1(2, 3)); alert('Output of ClassMethod2:' + TargetClass.ClassMethod2(2)); </script> </head> <body> </body> </html>
Above I have taken SourceClass.js which contains the source javascript class. This class contains both instance and class methods. I am pre assuming that you have the knowledge of instance and class methods. Next I have used target class (Target.js) to which we have to copy the methods from source class. Now come to the core part, the Utility.js. It contains a method "CopyMethod" which accepts two arguments the sourceclass and targetclass. This method has been divided into two parts.
First copy the instance methods:
// Copy instance methods var source = sourceClass.prototype; var target = targetClass.prototype; for (obj in source) { if (typeof source[obj] != "function") continue; // ignore everything except function target[obj] = source[obj]; }
Second copy the class methods:
// Copy class methods source = sourceClass; target = targetClass; for (obj in source) { if (typeof source[obj] != "function") continue; // ignore everything except function target[obj] = source[obj]; }
Next I have taken a demo page (demo.aspx) to see it in live. In this page we have called the "CopyMethod" and then just tested whether the targetclass has all the methods which were in source class or not. For that we have called the instance and class methods from instance of Target class and TargetClass itself.
Do let me know your feedback, comments.
Very nice!
What kind of email newsletter would you prefer to receive from CodeAsp.Net?18
