Geek Answers Handbook

Fundamental JavaScript OO

Ok, I should know the answer to this question, but for some reason I never understood or needed to really know JavaScript.

My question is: by looking at the code samples below, I will correct my understanding, or I will miss some information.

Example 1

You must create an instance of the function (or class) in order to use the IsOld method, and a separate copy of the IsOld function will be created for each instance.

 function MyClass1() { this.IsOld = function (age) { if (age > 40) { return true; } return false; }; } // sample usage var m1 = new MyClass1(); console.log(m1.IsOld(34));

Example 2

You must create an instance, but unlike MyClass1 for the script, you do not need to create a copy of the IsOld method for each instance of the class.

 var MyClass2 = (function () { function MyClass2() { } MyClass2.prototype.IsOld = function (age) { if (age > 40) { return true; } return false; }; return MyClass2; })(); // sample usage var m2 = new MyClass2(); console.log(m2.IsOld(34));

Example 3

You do not need to instantiate a function / class to access the IsOld method. One instance of the IsOld method IsOld used in all calls.

 var MyClass3 = { IsOld: function (age) { if (age > 40) { return true; } return false; }, }; // sample uage console.log(MyClass3.IsOld(34));

Note. I guess there are a lot of similar questions / answers here, but for some reason I could not find the one that really made sense to me.

+6
source share
3 answers

Your understanding seems correct.

If “need to create an instance”, you mean using the “new” keyword, I would like to add something here.

In JavaScript, using a new keyword is not the only way to create new instances. (Edited according to comments) Any function can act as a constructor function.

When you use the keyword "new", followed by any function (say, "x") that it does is

  • Create a new object (for example, 'y') and set the prototype of the function x as the prototype of the new objects (y).
  • Call the function "x" in the context of the newly created objects y, that is, this refers to this new object "y" inside the function "x"
  • If the function does not return an object, return the new object 'x' created by the new statement as a result of the new expression.

Here is a good source for learning JavaScript with Douglas Crockford ( http://javascript.crockford.com/ )

So, if memory bothers you (you should be), use a constructor function and add all the common methods to the function prototype, as it was in example 2.

Then all these methods will be inherited to all objects created using this function as a constructor. However, as mentioned earlier, I think sample 2 might be simpler:

 var MyClass2 = function MyClass2() { }; MyClass2.prototype.IsOld = function (age) { if (age > 40) { return true; } return false; }; var obj = new MyClass2();
+2
source

As far as I know, you are right in all three cases.

  • An instance of IsOld , and a new function will be created for each instance.
  • No need to create an instance of IsOld , as in the prototype.
  • An IsOld instance is not required since MyClass3 is already an instance (the object is not a function).
+1
source

It seems to me that there has been some misunderstanding regarding the structure of the class and the dynamic nature of Javascript: for all the cases presented, each instance of the class creates a new unnamed function.

If you want to declare “classes” in a more traditional way (like C ++ or Java), you'd better:

1) Define the functions:

 function MyClass_IsOld(age) { return (age > 40); }

2) Create a "class" and define its prototype:

 function MyClass() { /* put any instance constructor logic here */ }; MyClass.prototype.IsOld = MyClass_IsOld;

3) Use the class:

 var myInstance = new MyClass(); console.log(myInstance.IsOld(37));

If you want to use the "method" as a regular function, declare it globally, for example:

 function MyClass_IsOld(age) { return (age > 40); } function MyClass() { /* put any instance constructor logic here */ }; MyClass.prototype.IsOld = MyClass_IsOld; var myInstance = new MyClass(); console.log(myInstance.IsOld(37)); // use as a method console.log(MyClass_IsOld(37)); // use as a function

If you want to hide implementation details, create a closure:

 var MyClass = (function () { function _MyClass_IsOld(age) { return (age > 40); } function _MyClass() { /* put any instance constructor logic here */ }; _MyClass.prototype.IsOld = _MyClass_IsOld; // use as a method return _MyClass; })(); var myInstance = new MyClass(); console.log(myInstance.IsOld(37)); // use as a method console.log(MyClass_IsOld(37)); // ERROR: undefined function
+1
source

More articles:


All Articles