This question already has answers here:
Use of 'prototype' vs. 'this' in JavaScript?
(15 answers)
Closed 6 years ago.
What is the difference between these functions? And what are the advantages and disadvantages?
let Test = function(name) {
this.name = name;
this.complete = function() {
console.log(`completing task${this.name}`)
}
}
and
let Test = function(name) {
this.name = name;
}
Test.prototype.complete = function() {
console.log(`completing task${this.name}`)
}
The difference is that each object you will create with the first function would have it's separate instance of complete function. While each object you will create with the second function would share the same complete function, which can be found at the prototype of the object you create using Test.
So if you create 100 objects using the first function, all these objects would have a different reference in memory for the complete function. While in the second case you would have only one, since all these objects would find the complete function on their prototype.
Related
This question already has answers here:
Constructor function vs Factory functions
(8 answers)
Closed 6 years ago.
Need to know which is the correct way of implementing the constructor function from these two options.
var Dog=function(name,bread)
{
return {
name:name,
bread:bread
}
}
function Dog(name,bread)
{
var new_object= this;
new_object.name=name;
new_object.bread=bread;
}
The is not one correct way to do that in JavaScript. Refer to this answer to see the different patterns that you can use to program in an object-oriented way in JavaScript:
https://stackoverflow.com/a/30148923/1566187
It depends on what you want to do with it, but if you're looking for a simple constructor I'd recommend
function dog(name,breed) {
this.name = name;
this.breed = breed;
}
This way you can create new objects easily using that constructor:
var Dog = new dog("Jacky", "Corgi");
var Puppy = new dog("T-Rex", "Yorkshire");
Hope this helps. :)
This question already has answers here:
Use of 'prototype' vs. 'this' in JavaScript?
(15 answers)
Closed 7 years ago.
Consider this code example:
function Person(config) {
this.name = config.name;
this.age = config.age;
}
Person.prototype.getAge = function() {
return this.age;
};
var tilo = new Person({name:"Tilo", age:23 });
console.log(tilo.getAge());
Rather than defining getName() as an appendage to the constructor's prototype property, it seems to me it could be defined within the constructor to achieve the same thing? Is there any useful difference? In other words, does doing it one way or the other have any particular implementation advantage?
The constructor will create a new instance of that function with each invocation. Putting it on the prototype will save memory.
This question already has answers here:
Use of 'prototype' vs. 'this' in JavaScript?
(15 answers)
Closed 7 years ago.
I am creating a JavaScript constructor. Consider this example:
function Student(name)
{
this.name = name;
}
Student.prototype.printName = function(){
console.log(this.name);
}
var s = new Student("Eden");
s.printName();
This above code works all well. But I can write the same this way also:
function Student(name)
{
this.name = name;
this.printName = function(){
console.log(this.name);
}
}
var s = new Student("Eden");
s.printName();
I feel the second method is correct way because printName should be own property of new object not an inherited property. Adding to prototype makes it an inherited property.
Why do developer prefer the first method?
By attaching functions directly to this in a constructor, that means every instance of Student has it's own copy of printName. That isn't very efficient. By attaching it to the prototype chain of Student, there is only one copy of the printName function and any instance of Student has it in it's prototype chain.
While there are other differences in those two approaches for attaching function to objects, that is the simplest and easiest to remember.
If you want the full dictionary of reasons how the two differ, please refer to this answer to an extremely similar question.
This question already has answers here:
var functionName = function() {} vs function functionName() {}
(41 answers)
Closed 7 years ago.
Is there ANY difference in the following two ways of defining a functions?
METHOD 1)
var printName = function(name){
return("Hi! My name is ",name)
}
VS
METHOD 2)
function printName(name){
return("Hi! My name is ",name)
}
and I mean ANY, I'm new at JS and want to lay down my understanding of functions and Objects before I advance as I feel these 2 features are the 2 I'll use the most.
Yes there is a difference, but none that would affect the performance of the function code when it's called.
The difference has to do with when the function is created, but the performance is identical. Using your examples:
printName_1("Drew"); // This will fail, as printName_1 is not defined (yet)
printName_2("user4820485"); // This will work
var printName_1 = function(name){
return "Hi! My name is "+name;
}
function printName_2(name){
return "Hi! My name is "+name;
}
Functions that are declared using the latter syntax are initialized at the beginning of the block where they appear, so it looks like they can be called before they are defined.
This question already has answers here:
How to execute a JavaScript function when I have its name as a string
(36 answers)
Closed 8 years ago.
I have an array with names of constructors var arr = ['Class1', 'Class2', 'Class3'].
function Class1() {
this.name = 'class1';
}
Is it possible to dynamically create instances of these classes? I mean something like
var class1Object = new arr[0]();
I tried that but it isn't working (Uncaught TypeError: string is not a function).
functions defined in "global" scope are actually created on the window object, so you can do this (as long as the code is in the head of the page, and not scoped to something specific):
function Class1(){
this.name = 'class1';
}
var className = "Class1";
var c1 = new window[className]();
Live example: http://jsfiddle.net/vdf4W/
Previously answered in this post (Google: Dynamic Instantiation In JavaScript)
Dynamic Instantiation In JavaScript