This question already has answers here:
Use of 'prototype' vs. 'this' in JavaScript?
(15 answers)
this Vs. prototype [duplicate]
(1 answer)
Closed 9 years ago.
What is the difference of inheritance definition of the two ways below
function Rectangle(w,h){
this.width=w;
this.height.h;
this.area=function(){return this.width*this.height;}
}
and
function Rectangle(w,h){
this.width=w;
this.height.h;
}
Rectangle.prototype.area=function(){return this.width*this.height;}
I saw somebody said the first way is inefficient of use regular properties for methods that are intended to be shared by all objects of the same class.
Welcome any comment
The first way, you could use w and h directly inside the area function, equals to use them as private variable.
function Rec(w,h) {
this.setW=function(newW){
w=newW;
}
this.area=function(){
return w*h;
}
}
var rec=new Rec(5,6);
you cannot do alert(rec.w), or rec.w=5. since there is no this.w inside the class.
but you can do
rec.setW(2);
alert(rec.area());
this will alert 12.
http://jsfiddle.net/vanessachem/Hmyyc/ like this. w and h could be treat private variable. they could only be reset via a setter function inside the class.
It is inefficient when you need to create multiple instance. If you just want to create singleton, the first one is easy to manage.
The advantage of the second one is that you could put prototype function inside different file. It is good for multiple instances. However, you cannot treat w and h as private variable. You can't use w or h directly in the area function.
The first way, every time you construct a new Rectangle, you also create a new anonymous function and assign it to this.area. The second way is more efficient if you are going to be constructing more than one Rectangle, because the anonymous function is still only created once, and all Rectangles have access to it, via their prototype.
Related
This question already has answers here:
How to check if a Javascript function is a constructor
(9 answers)
Closed 1 year ago.
Many sources like MDN and this tutorial define a concept called "constructor" that should be used with the new keyword to create an instance in traditional OOP's sense. But what "constructor" means is not formally stated.
It seems to me that literally any function can be used with new. (Though function without any manipulation to this in its definition is not particularly useful when newed, because it merely returns an empty object). Is this correct?
When you use the new keyword, it creates a new object. When you create an instance of a class with new, it creates an object, and any properties in the constructor method will be initialized in the object as well.
This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 2 years ago.
I'm a beginner and following a long from a udemy course and I've come across this example where we use the THIS keyword to reference the properties within it's object. However, I don't understand why we can't just grab the property like we would normally do when we are outside of the object by doing: objectname.property. I tested it and it seems to work fine. I'm obviously missing something so if someone could let me know that would be hugely appreciated! The example is below. Instead of using this, why not just use mark.bmi for instance.
const mark = {
name: `mark`,
mass: 92,
height: 1.95,
bmiCalc: function() {
this.bmi = this.mass / (this.height * this.height);
return this.bmi;
}
}
Properties can be added dynamically to an object. You presented a trivial case, but in most of the cases, the compiler would not be able to decide without a "this." if you reference a member of the current object, or some global variable
Change the variable name mark to jacob, you don't need to refactor. But if you had changed this to mark then you needed to change it also to the new variable name.
Usually you create more objects (or instances) from a class. The method defined in the class applies to more than just this object (mark). That's the reason for using this in object oriented programming.
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
In JavaScript, what are specific reasons why creating functions within a loop can be computationally wasteful?
(2 answers)
Closed 8 years ago.
I checked over my script the other day with JSFiddle and got a warning on one of the lines: Don't make functions within a loop.
for (x = 0; x < 10; x++) {
if (moment(now) > moment(then)) {
doIt(x); // do it now
} else {
timeTillEnd = moment(then) - moment(now);
setTimeout(function () {
doIt(x); // do it later
}, timeTillEnd); // <-- flagged here
}
}
Why shouldn't I make functions within a loop in Javascript?
Also: Could the usage of a function in the particular situation shown here be problematic?
What you are trying to do is probably wrong, the x variable might not be what you expect it to be. See the following link:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures#Creating_closures_in_loops.3A_A_common_mistake
And they are also relatively expensive to create.
Each function comes with the closure of the variables it uses, that is an unnecessary overhead if you are doing "normal imperative programming" and just want to make the code look clearer by defining inner functions for sub-tasks:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures#Performance_considerations
In your case, it seems that you actually need a function with its closure, since you are deferring some computation, but make sure that you do the proper value capture.
Because it can lead to unexpected closure behaviour (the captured variable will have the value assigned in the last iteration of the loop). You will also get a new instance of the function for each loop which is wasteful of resources.
Modern browsers take a third argument for setTimeout which is the argument to the function. See here. This also gets rid of the problems with closures.
This question already has answers here:
What's the difference between this.bla to Object.prototype.bla
(4 answers)
Closed 9 years ago.
I want to know what is the difference between insideFn and outsideFn in the follwoing case :
function Construct()
{
this.insideFn = function(obj){
....
}
}
Construct.prototype.outsideFn = function(obj){
...
}
and which one is efficient to use ?
In the first case every instance created with Construct will have its own insideFn, which will waste memory in case you will use more than one instance. In the second case each instance of Construct will have just a reference to outsideFn. So the latter is better.
In the first construct the method is an attribute of the instance of Construct.
In the second construct the method is an attribute of the prototype object from Construct
If you define functions inside the prototype object, they will be the same when calling.
The prototypevariant often saves memory and speeds up the code.
You can also overload a prototype function within the instance of an object, to change the default behaviour of your object.
For better english and much more details see http://www.javascriptenlightenment.com/
The first one function Construct() {} is a class(in javascript it is an object) whereas later on you are inheriting(extending) this class using the keyword prototype and adding one more function outsideFn. There are no specific classes in JavaScript so you have to use objects as classes.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
JavaScript: Class.method vs. Class.prototype.method
I am trying to understand object in JavaScript. Now I see a lot of different uses of object, and I can not tell them apart.
For starters, the biggest thing I want to know is what the difference is between these two
Something.prototype.else = function(){
return 6;
}
And
Something.else = function(){
return 6;
}
Both look different, but they are used in the same way, or am I mistaken.
If you are familiar with other programming languages you can consider the second one to be a static method.
The first one you need an instance of the object in order to use it:
var x = new Something();
x.else();
The second one you do not need an instance in order to use it:
Something.else();
It's a good question for an interview for a JavaScript job indeed.
The difference is that Something.else overrides Something.prototype.else. That is, if you have both, Something.else will be used.
The advantage of having prototypes is that a prototype can be shared between many objects to reduce memory usage, make monkey-patching easier and implement prototype-based inheritance.