This question already has answers here:
JavaScript inheritance: Object.create vs new
(5 answers)
Closed 7 years ago.
I know this question was answered so many times, but I am so confused about how to inherit (yes, inherit....again) two Javascript functions.
Assumed that I have a class called 'Base' which is the one that I want to inherit;
function Base(model)
{
var self=this;
self._model=model;
return self;
}
Base.prototype.modelName= function()
{
return self._model.Name;
};
Then I create a new class call Foo.
function Foo()
{
var self=this;
self.hello=function()
{
return 'Hello World';
}
return self;
}
What code should I add to the Foo class to be able to do something like this?
var myModel={type:1, name:'My Model'};
var myObj=new Foo(myModel);
var result= MyObj.modelName();
I know I should use the object.create() method, but I cannot understand exactly how! :(
Thank you guys, and again sorry for this silly question.....I am really struggling with this basic concept here!!!!
JavaScript uses prototypal inheritance. To inherit from Base class, use like
Foo.prototype = new Base();
But you can't pass parameters into Foo. You need to move model save logic to Foo.
NOTE: Don't return the created object from constructor functions. By default, created object is returned.
EDITED
function Base() {
}
Base.prototype.modelName = function () {
return self._model.Name;
};
function Foo(model)
{
this._model = model
this.hello = function () {
return 'Hello World';
}
}
Foo.prototype = new Base();
Related
This question already has answers here:
Javascript Class Inheritance For Functions
(2 answers)
Call parent method in JavaScript class but stll have access to prototype methods inside object instance?
(5 answers)
Closed 5 years ago.
This is surely trivial question, but I am little confused with JavaScript. I want to call method inside another function. I have spent some time to handle this and all I have got so far is the second piece of code. I would like to know, if there is any similar solution as noted in comment.
function Student() {
this.greeting = function() {
alert('Hi! I\'m student.');
};
};
function Teacher() {
Student.call(this)
this.greeting = function() {
Student.??? // here I want something like "inherited", or call Student.greeting()
alert('and I like apples');
};
};
I want to be sure, there is no another option like prototyping:
function Student() {
};
Student.prototype.greeting = function() {
alert('Hi! I\'m student.');
};
function Teacher() {
Student.call(this);
this.greeting = function() {
Student.prototype.greeting();
alert('and I like apples');
};
};
Thanx
Student is a function, in your case it is also a constructor.
To call "Student" you need to save object returned by call of constructor-function Student
function Teacher() {
var stdnt = new Student()
this.greeting = function() {
stdnt.greeting()
alert('and I like apples');
};
};
Also, in your code Student.call(this) is equivalent to just function call Student() - without creation of new object
Upd2. This call of stdnt from inner function called "closure"
This question already has answers here:
Setting methods through prototype object or in constructor, difference? [duplicate]
(3 answers)
Closed 8 years ago.
What's the difference between defining methods on a prototype individually vs via an object?
Example:
function Example() {
this.Test();
}
Example.prototype.Test = function() {
alert("Example");
};
instead of:
function Example() {
this.Test();
}
Example.prototype = {
Test: function() {
alert("Example");
}
};
It's the difference between adding to the prototype and replacing it.
The only place it's really likely to make a difference is in this sort of scenario, which is relatively rare (and yet, I avoid replacing prototypes because of it):
var f = new Foo();
function Foo() {
}
Foo.prototype = {
test: function() { }
};
f.test(); // Fails!
Live Copy | Live Source
That fails because the f object is created with Foo's original prototype object, but then later you replace that prototype object with a new one. f still uses the old one, which doesn't have the test property on it.
This works:
var f = new Foo();
function Foo() {
}
Foo.prototype.test = test: function() { };
f.test(); // Works
...because you're just adding to the object that f already uses as its prototype. Live Copy | Live Source
Provided f isn't created until after you've replaced Foo.prototype with a new object, it really doesn't make any significant difference.
This question already has answers here:
How does "this" keyword work within a function?
(7 answers)
Closed 8 years ago.
I have a function in JavaScript:
function main() {
console.log(this);
}
How come this logs Document? Surely it should log function main?
If not, then how do I declare a variable within main to be accessed by the rest of the code as main.varName?
Thank you!
Hey you can do something like this.
But then this would look something like a class object.
<script>
function main() {
this.testVar = "124";
}
var testMain = new main();
alert(testMain.testVar);
</script>
The alternative is that you just create a normal global variable.
The way i am taking the code is a more class object way.
Hope i could help :)
The this keyword references the context of the function, not the function itself.
When you call a function as a method of an object, then this references the object, otherwise the context is the global context (document).
Example:
var o = {
name: 'myObject',
fn: function(){ alert(this.name); }
};
o.fn(); // alerts "myObject"
As a function is also an object, you can add properties to it:
function main() {
}
main.varName = 42;
alert(main.varName); // shows "42"
However, this is not a regular use of functions and objects. Normally main would be a plain object rather than a function if you want to access main.varName.
Also, check out the module pattern
var person = function(){
return module = {
setName: function(name){
module.name=name;
}
}
};
var bill = person();
bill.setName('bill');
console.log(bill.name);
This question already has answers here:
Use of 'prototype' vs. 'this' in JavaScript?
(15 answers)
Closed 9 years ago.
So, I am not a JavaScript expert, just trying to understand what the difference is between two following snippets of code. I have a project that I want to convert to TypeScript and I need to understand the difference between two code snippets being generated.
var Pony = (function () {
function Pony() { }
Pony.prototype.bite = function () {
alert("Chomp!");
};
return Pony;
})();
var Pony2 = (function () {
function Pony2() {
var self = this;
self.bite = function () {
alert("Chomp!");
};
}
return Pony2;
})();
The difference between the two is that you can get to the prototype of the first Pony via attributes on the object stored in var Pony and could expand upon or use the associated bits of that prototype elsewhere where as Pony2 would just be considered a function. So if you do not plan on using any sort of prototypical inheritance later on they are equivalent.
The answers above give a good overview on the difference between putting on the prototype and putting on the instance. As to your question about converting to TypeScript, below is how you would write them both:
class Pony {
bite(){
alert('chomp');
}
}
class Pony2 {
bite: () => void;
constructor(){
this.bite = () => alert('chomp');
}
}
As far as how you use them, there's no difference. However, from a performance standpoint the former method would be preferable. Let's extend your example a little bit:
var prototypePony1 = new Pony();
var prototypePony2 = new Pony();
var thisPony1 = new Pony2();
var thisPony2 = new Pony2();
prototypePony1.hasOwnProperty('bite'); //returns false
prototypePony2.hasOwnProperty('bite'); //returns false
thisPony1.hasOwnProperty('bite'); //returns true
thisPony2.hasOwnProperty('bite'); //returns true
Pony.prototype.bite = function() { alert('Nomnomnom!'); };
Pony2.prototype.bite = function() { alert('Nomnomnom!'); };
prototypePony1.bite(); //alerts 'Nomnomnom!'
prototypePony2.bite(); //alerts 'Nomnomnom!'
thisPony1.bite(); //alerts 'Chomp!', instance property is accessed first
delete thisPony2.bite;
thisPony2.hasOwnProperty('bite'); //returns false
thisPony2.bite(); //alerts 'Nomnomnom!'
In the example above, thisPony1 and thisPony2 both get their own copy of the bite function, since it was defined using this However, prototypePony1 and prototypePony2 both share the same copy of bite from Pony's constructor.
Once we define the bite prototype on Pony2, the instance property is still accessed first on thisPony1. It's not until we delete the instance property that we see the newly defined prototype property on thisPony2.
For more detailed info on defining object methods, have a look here.
This question already has answers here:
this.constructor.prototype -- can't wholly overwrite, but can write individual props?
(2 answers)
Closed 6 years ago.
If I declare the base prototype object outside the constructor for an object, all created objects are based on that single base object which is not suitable for my needs because I need more than one instance of the base object.
In short: Is this code correct? It works but I'm picky about having correct code.
Example:
function BaseObject()
{
BaseObject.prototype.insertObject = function()…
…
… // Some other functions.
}
function Object1()
{
Object1.prototype = new BaseObject();
Object1.prototype.coolFunction = function()…
…
… // Same kind of pattern.
}
function Object2()
{
Object2.prototype = new Object1();
Object2.prototype.incredibleFunction = function()…
…
… // You get the idea.
}
The general pattern:
function Base ( baseMember ) {
this.baseMember = baseMember;
}
Base.prototype.baseFunc = function () {};
function Derived ( baseMember, derivedMember ) {
Base.apply( this, arguments );
this.derivedMember = derivedMember;
}
Derived.prototype = Object.create( Base.prototype );
Derived.prototype.constructor = Derived;
Derived.prototype.derivedFunc = function () {};
It's ugly, I know...
No, all the code that is currently inside your constructor functions should be outside of them. Right now you are reassigning those properties of the prototype every time someone creates a new object.
Finally, points of good-practice:
You should always "fix" the constructor property of any derived prototypes. This is a quirk of JS inheritance; it gets overwritten. People rarely depend on the constructor property being correct, but sometimes they do, and it just feels wrong if you don't.
Object.create(Base.prototype) is better than new Base() if you are working in browsers that support it, or using es5-shim. It only instantiates the object, instead of creating it, which is good since you don't need an actual copy of the object to perform prototypal inheritance.
This would all look like:
function BaseObject() { }
BaseObject.prototype.insertObject = function () { };
function Object1() { }
Object1.prototype = Object.create(BaseObject.prototype);
Object1.prototype.constructor = Object1;
Object1.prototype.coolFunction = function () { };
function Object2() { }
Object2.prototype = Object.create(Object1.prototype);
Object2.prototype.constructor = Object2;
Object2.prototype.incredibleFunction = function () { };