I have the following two files:
product.js ,
define(function(products) {
return {
reserveProduct: function(id) {
console.log(id);
}
}
});
purchase.js
define(["products"], function(products) {
return {
function(id) {
products.reserveProduct(id);
}
}
})
I am creating a purchase object.
new purchase(1);
Now I want to extend purchase.js as AnalyExtendpurchase.js and create a new object as
new AnalyExtendpurchase(1);
I want to pass id as parameter to parent object i.e to purchase object
Normally in Java the equivalent code would be:
Purchase.java
public class Purchase{
purchase(int id){
this.id=id;
}
}
AnalyExtendpurchase.java
AnalyExtendpurchase extends purchase{
AnalyExtendpurchase(int id){
super(id);
}
}
Object creation in java
new AnalyExtendpurchase(10);
I want to follow same object creation pattern using requirejs.
I have provided a sample example below : Hope it can help you ..
Let's say we have ABC() constructor like:
function ABC(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
Then Let's define XYZ() constructor function,
function XYZ(firstName, lastName,subject) {
ABC.call(this, firstName, lastName);
this.subject = subject;
}
Here call() is used to call a function defined somewhere else, but in the current context
Finally you can set XYZ() prototype as :
XYZ.prototype = Object.create(ABC.prototype);
XYZ.prototype.constructor = XYZ;
Here, above line create a new object and make it the value of XYZ.prototype and will inherit from ABC.prototype
Hope the above prototypal inheritance sample helps you . happy coding :)
Related
Hi this is from a challenge I was working on. Is there any way i can add the introduce method to the personStore object without using the keyword this. Any insight is greatly appreciated.
Using Object.create
Challenge 1/3
Inside personStore object, create a property greet where the value is a function that logs "hello".
Challenge 2/3
Create a function personFromPersonStore that takes as input a name and an age. > When called, the function will create person objects using the Object.create method on the personStore object.
Challenge 3/3
Without editing the code you've already written, add an introduce method to the personStore object that logs "Hi, my name is [name]".
Side Curiosity
As a side note, was curious if there was a way to add the introduce method to the person object that sits inside of the personFromPersonStore function.
my solution:
var personStore = {
// add code here
greet: function (){
console.log('Hello');
}
};
function personFromPersonStore(name, age) {
var person = Object.create(personStore);
person.name = name;
person.age = age;
person.greet = personStore.greet;
return person;
};
personStore.introduce = function () {
console.log('Hi, my name is ' + this.name)
}
//Challenge 3 Tester
sandra.introduce(); // -> Logs 'Hi, my name is Sandra
You can, but using this is a lot simpler.
This code passes the name property as an argument, but as the property is already accessible to the introduce function as an internal property via this, it is a bit wasteful.
var personStore = {
// add code here
greet: function (){
console.log('Hello');
}
};
function personFromPersonStore(name, age) {
var person = Object.create(personStore);
person.name = name;
person.age = age;
person.greet = personStore.greet;
return person;
};
personStore.introduce = function (nm) {
console.log('Hi, my name is ' + nm)
}
person1=personFromPersonStore('Fred',21);
person1.introduce(person1.name);
You can write it like this:
personFromPersonStore("whatevername","whateverage").name
instead of this.
I try to implement the Vector3 class in JS and wrote
function Vector(x,y,z) {
this.x=x;
this.y=y;
this.z=z;
}
so far looks alright, but then I wanted to add the Vector.prototype the function addVector:
Vector.prototype.addVector(addx,addy,addz) = function(addx,addy,addz) {
x+=addx; y+=addy; z+=addz;
};
but then I receive an error:
ReferenceError at line NaN: addx is not defined
I'm new to JS and I wonder what exactly I'm mistyping.
Replace:
Vector.prototype.addVector(addx,addy,addz) =
With:
Vector.prototype.addVector =
That's not where you specify the parameters.
The problem is with the syntax. The following should do your job.
Vector.prototype.addVector = function(addx,addy,addz){
x+=addx;
y+=addy;
z+=addz;
};
Correct your syntax
Vector.prototype.addVector = function (addx, addy, addz) {
this.x+=addx;
this.y+=addy;
this.z+=addz;
}
check here for reading more about prototypes.
You have several correct answers already but let me expand on them for you with a simple visual example so you can learn; it seems you may be unfamiliar with JavaScript prototypes.
// Here is a new function or in this case class
function Person() {};
// This is one way we could add methods to the Person() class
// After you call this method Person() will now have firstName,
// lastName, and age properties
Person.prototype.recordInfo = function(fname,lname,age){
this.firstName = fname;
this.lastName = lname;
this.age = age;
}
If you wan't to keep things together a bit more and have a lot of methods you'll be adding to the Person() class you can also declare your methods like so:
Person.prototype = {
recordInfo: function(fname,lname,age){
this.firstName = fname;
this.lastName = lname;
this.age = age;
},
aNewMethod: function(){
// ...
},
bNewMethod: function(){
// ...
}
}; // <-- Notice the closing semicolon and the commas separating the methods above
I am new to OOJS and I'm a little confused trying to understand inheritance, I created two simple classes, person and student that inherit from person, is there an option to create student by passing data in the parent's constructor? if it's possible, how to do it ? can a child get all the properties and methods from the parent or only the methods?
**the fname and lName in the alert are undefined
function Person(fNme, lName) {
this.fname = fNme;
this.lName = lName;
}
Object.prototype.go = function() {
alert("I am going now last time you see "+ this.lName);
}
function Student() {
this.study = function () {
alert("I am studing !");
}
}
Student.prototype = new Person();
var s1 = new Student("sam", "bubu");
alert(s1.fname +"+"+ s1.lName)
you can use constructor stealing.
function Student(fName,lName) {
Person.call(this,fName,lName);
this.study = function () {
alert("I am studing !");
}
}
when you call Student constructor you can pass along arguments to Person() with call() to initialize variables in Person
This is done by just calling the parent constructor
function Student(fName, lName, whateverelse) {
Person.call( this, fName, lName ); // call base class constructor function
this.study = function () {
alert("I am studing !");
}
}
I've been reading articles about bind, call, apply for almost a week now and it's still complex for me. I think I need them for this jsfiddle I wrote. However, I wasn't able to since I'm still confused.
I tried my best to write a fiddle of what I heard last week from one of our developers experiencing the issue. He wanted to display the properties of classA from a new class(classC) he made but it wasn't showing the data.
So here it goes.
There is a parent object(classA) that contains the complete properties and methods. A child(subclass like classB) of it inherits the properties from classA so inherited data plus its own data can be rendered on classB's modal.
Now, there is a requirement to add a new modal or section to display few properties from classA and properties from classB. So they made a new class called classC which inherits all information from classB. I remember they said, classC was inheriting all the properties and methods from classB but the properties it needs in classA weren't there.
Please help me with my fiddle. It will help me become a better Javascript developer. Oh, I also remember they were mentioning things like 'call' and 'super' which I am not familiar yet.
function classA() {
this.firstname = 'Donna';
this.lastname = 'Hill';
function getFullname () {
return firstname + ' ' + lastname;
}
}
function classB() {
var childofA = new classA();
var age = 10;
var sex = "female";
var bObject = {
showFullname : function() {
console.log(this.childofA.getFullname);
}
}
return bObject;
}
function classC() {
var childofB = new classB();
var cObject = {
showFullname : function() {
console.log(this.childofB.showFullname);
}
}
return cObject;
}
var c = new classC();
console.log(c.showFullname());
http://jsfiddle.net/01hz8933/2/
Fiddle Updated. http://jsfiddle.net/01hz8933/4/
// setup base class
function ClassA() {
this.firstname = 'Donna';
this.lastname = 'Hill';
}
ClassA.prototype.showFullname = function() {
return this.firstname + ' ' + this.lastname;
}
// first child class
function ClassB() {
this.age = 10;
this.sex = "female";
ClassA.call(this); // call parent constructor
}
ClassB.prototype = Object.create(ClassA.prototype); // inherit
ClassB.prototype.constructor = ClassB; // use our constructor function
// grand child
function ClassC() {
ClassB.call(this); // call parent constructor
}
ClassC.prototype = Object.create(ClassB.prototype); // inherit
ClassC.prototype.constructor = ClassC; // use our constructor function
var c = new ClassC();
console.log(c.showFullname());
There's a ton to unpack in there, but there were many things in your original that were surprising to me. Hopefully the updated fiddle provides some answers for you.
I am looking for a perfect way to define class. "perfect" here means:`
create instances will not create copies of methods.
public function could easily(not to much hassle) access private variable
For example, way 1:
function Foo1() {
var private1;
this.publicMethod1 = function() {//create instance will create copy of this function}
}
will not meet rule No.1 above.
Another example, way 2:
function Foo2() {
var private2;
}
Foo2.prototype.Method2 = function() {//cannot access private2}
will not meet rule No.2 above.
So is it possible to meet both rules? Thanks.
In JavaScript it's more about conventions. Private properties or methods are defined with a underscore first like _private. With a few helpers you can make classes easily. I find this setup easy enough, all you need is a helper inherits to extend classes, and instead of using multiple arguments you pass in an object props and simply call "super" on the inherited classes with arguments. For example, using a module pattern:
Function.prototype.inherits = function(parent) {
this.prototype = Object.create(parent.prototype);
};
var Person = (function PersonClass() {
function Person(props) {
this.name = props.name || 'unnamed';
this.age = props.age || 0;
}
Person.prototype = {
say: function() {
return 'My name is '+ this.name +'. I am '+ this.age +' years old.';
}
};
return Person;
}());
var Student = (function StudentClass(_super) {
Student.inherits(_super);
function Student(props) {
_super.apply(this, arguments);
this.grade = props.grade || 'untested';
}
Student.prototype.say = function() {
return 'My grade is '+ this.grade +'.';
};
return Student;
}(Person));
var john = new Student({
name: 'John',
age: 25,
grade: 'A+'
});
console.log(JSON.stringify(john)); //=> {"name":"John","age":25,"grade":"A+"}
console.log(john.say()); //=> "My grade is A+"
About the private variable "issue" just stick to convention for instance properties and use closures when needed for everything else private.
function Foo3() {
this.private = {};
}
Foo3.prototype.set_x = function (x) {
this.private.x = x;
};
To make a long story short: no, it is not. You cannot extend the prototype with methods that could access private variables. At least if these private variables are made private via a closure.
Though, it is a convention in javascript that you mark your private fields with an underscore, for example _myPrivateField. These would be still public, but i have seen this solution being used in many libraries and i also prefer that style to meet your first rule.
A basic example is below:
Foo = function(id)
{
// private instances.
var _id;
var _self = this;
// constructor
_id = id;
// private method
function _get()
{
return _id;
};
// public function
_self.set = function(id)
{
_id = id;
};
_self.get = function()
{
return _get();
};
};
var bar = Foo(100);
console.log( bar.get() );
bar.set(1000);
console.log( bar.get() );
I would recommend you use prototype.