I'm trying to use a method from a parent class inside the child class. In other languages, you would just have to use extends
and all the methods from the parent can be used in the child, but in JavaScript, it seems to be different.
function Svg() {
this.align = function(value) {
if(value === 'left') return 0;
}
}
function Graph() {
// I want to align text to the left
console.log('<text x="' + align('left') + '"></text>');
}
graph = new Graph();
Graph.prototype = new Svg();
Graph.prototype.align.call();
I do understand that the code below doesn't necessarily 'extend' like in other OOP languages. But it does take another function/class as a property - for which you can call it's methods directly. Furthermore, I haven't used JavaScript prototyping for this demo.
<script>
function Svg() {
this.align = function( align ) {
if( align == 'left')
return 'left';
else
return 0;
}
}
function Graph() {
this.Svg = new Svg();
// I want to align text to the left
this.AlignLeft = function( direction ) {
console.log('<text x="' + this.Svg.align( direction ) + '"></text>');
}
}
graph = new Graph();
graph.AlignLeft('left'); //console.log <text x="left"></text>
</script>
Fiddle : http://jsfiddle.net/cBMQg/11/
function Svg() {
this.align = function(value) {
if(value === 'left') return 0;
}
}
function Graph() {
Svg.call(this); // Call the Super Class Constructor with changed THIS
// I want to align text to the left
console.log('<text x="' + align('left') + '"></text>');
}
graph = new Graph();
Graph.prototype = new Svg();
graph.align('left');
The answers probably work but why no prototype use? Is the align function going to perform different logic on every instance?
As Bergi pointed out; JavaScript uses prototype to inherit and it's better to define members on the prototype that don't change between instances:
Simply explained; prototype can be used to declare members/properties that won't change for an instance. If I declare an object named Person and person has 2 members: name and greet. Greet will output "Hello, I am [this.name]" so greet does not change between instances.
When I declare the greet method on Person prototype and then create thousands of Person instances (ben, jack, mary ....) they will all share only one greet
function. This saves memory and cpu time for object intialisation. Check out this link for more info: https://stackoverflow.com/a/16063711/1641941
The following link might help you understand what this
refers to in JavaScript. https://stackoverflow.com/a/19068438/1641941
function Svg() {
this.someInstanceValue=22;
}
Svg.prototype.align = function(value) {
if(value === 'left') return 0;
}
function Graph() {
// get Svg's instance properties
Svg.apply(this,arguments);
console.log('<text x="' + this.align('left') + '"></text>');
}
//inherit from Svg:
Graph.prototype=Object.create(Svg.prototype);
Graph.prototype.constructor=Graph;
graph = new Graph();
graph.align('left');
If you don't want to inherit from Svg but mix it in then you can still use prototype to mix in it's functions (and call Svg.apply to get needed instance members):
function mixin(source, target){
for(thing in source){
if(source.hasOwnProperty(thing)){
target[thing]=source[thing];
}
}
};
function Svg() {
this.someInstanceValue=22;
}
Svg.prototype.align = function(value) {
if(value === 'left') return 0;
}
function Graph() {
// get Svg's instance properties
Svg.apply(this,arguments);
console.log('<text x="' + this.align('left') + '"></text>');
}
//mix in Svg:
mixin(Svg.prototype, Graph.prototype)
graph = new Graph();
graph.align('left');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.