this.slideUpComm = function (){
$("#Day-events-content p").addClass("hidden").slideUp("fast");
}
this.showhideEvents = function() {
$("#Day-events-content").on("click", ".eventsToggle", function() {
var obj = $(this).next();
if ($(obj).hasClass("hidden")) {
slideUpComm();
$(obj).removeClass("hidden").slideDown();
} else {
$(obj).addClass("hidden").slideUp();
}
});
}
I would like to use slideUpComm as function that I include on different events but console return Uncaught ReferenceError: slideUpComm is not defined.
How I should pass function to function ? Should I use callback?
function dateObj() {
this.d = new Date();
this.day = this.d.getDate();
this.numDay = this.d.getDay();
this.month = parseInt(this.d.getMonth());
this.year = this.d.getFullYear();
this.slideUpComm = function (){
}
this.showhideEvents = function() {
});
}
}
My Object look like above.
The problem is slideUpComm is a member of an object... so you need to use the object reference to invoke the method
//create a closure varaible to hold the reference to the instance
var self = this;
this.slideUpComm = function (){
$("#Day-events-content p").addClass("hidden").slideUp("fast");
}
this.showhideEvents = function() {
$("#Day-events-content").on("click", ".eventsToggle", function() {
var obj = $(this).next();
if ($(obj).hasClass("hidden")) {
//slideUpComm is a instance property so access it using the instance
self.slideUpComm();
$(obj).removeClass("hidden").slideDown();
} else {
$(obj).addClass("hidden").slideUp();
}
});
}
slideUpComm is a function of dateObj, you can not directly invoke the function. So to invoke a function you need to create an instance of function/object
var a = new dataObj();
then you can invoke the function using
a.slideUpComm()
Could this not be reduced to:
$("<object>").slideToggle();
?
Related
I have an object mainly composed of functions/ methods, much like this (Which should work!):
function thing1(){
this.thing2 = function(){
this.thing3 = function(){
alert();
}
}
}
But
When I call thing1.thing2.thing3(), I get
Cannot read property 'thing3' of undefined
complete pseudocode:
function thing1(){
this.thing2 = function(){
this.thing3 = function(){
alert();
}
}
}
var foo = new thing1();
foo.thing2.thing3();
thing2 doesn't return anything which results in returning undefined.
If you want to write chained functions, you need to return this:
function thing1() {
this.thing2 = function() {
this.thing3 = function() {
alert();
}
return this; // chained
}
}
Generally speaking, it's better to assign methods to a functions prototype if you intend to use it as a constructor. You can still chain functions on the prototype.
function thing1() {
}
thing1.prototype.thing2 = function() {
return this; // chained
};
thing1.prototype.thing3 = function() {
alert('thing3');
return this; // you can make this one chained as well, if you like
};
var t = new thing1();
t.thing2().thing3().thing2().thing3();
If you want to just create a basic chain without requiring parentheses, you could create a separate getter function.
function thing1() {
}
Object.defineProperty(thing1.prototype, 'thing2', {
get: function() {
return this;
}
});
thing1.prototype.thing3 = function() {
alert('thing3');
return this;
};
var foo = new thing1();
foo.thing2.thing3().thing2.thing3();
Those are constructors:
function thing1(){
this.thing2 = function(){
this.thing3 = function(){
alert();
}
}
}
(new (new thing1()).thing2()).thing3()
If you want to call thing1.thing2.thing3() you should format it like this:
function thing1(){
this.thing2 = {
thing3: function(){
alert();
}
}
}
var foo = new thing1();
foo.thing2.thing3()
I have trouble understanding how the method overriding works in Javascript.
In the code below, I have CustomFieldTable class subclassing from Table class, and it both have createList function.
How can I override the createList function from the below code so that createList function from the CustomFieldTable class can be run from the reload function?
Current console output:
'Should be silent overridden createList Function'
Desired console output:
'Custom Field create list'
'obj1'
'obj2'
'obj3'
$(document).ready(function() {
var table = new CustomFieldTable();
table.init();
});
function Table() {
var self = this;
self.table_data = [];
self.reload = function() {
self.table_data = ["obj1", "obj2", "obj3"];
self.createList();
}
self.createList = function() {
alert("Should be silent overridden createList Function");
}
}
CustomFieldTable.prototype = new Table();
CustomFieldTable.prototype.constructor = CustomFieldTable;
function CustomFieldTable() {
var self = this;
self.init = function() {
self.reload();
}
self.createList = function() {
alert("Custom Field create list");
for (var i = 0; i < self.table_data.length; i++) {
alert(self.table_data[i]);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can restructure this this way:
function myClass() {
// Constructor function
this.myProp = "This is myProp on myClass";
}
myClass.prototype.firstMethod = function() {
document.write("I am firstMethod on myClass<br\>");
}
myClass.prototype.secondMethod = function() {
document.write("I am to be overwritten<br\>");
}
function myExtendedClass() {
// This calls "super" class constructor with the correct "this"
myClass.call(this);
this.myOtherProp = "This is a prop only on my extended class<br\>";
}
// Set with super class prototype and set proper constructor
myExtendedClass.prototype = Object.create(myClass.prototype);
myExtendedClass.prototype.contructor = myExtendedClass;
// Overwrite or set new methods on extended class object
myExtendedClass.prototype.secondMethod = function() {
document.write("I overwrote my super's method<br\>");
}
var a = new myExtendedClass();
console.log(a);
a.firstMethod();
a.secondMethod();
To be exact... a correction of your code would be:
$(document).ready(function() {
var table = new CustomFieldTable();
table.init();
});
function Table() {
this.table_data = [];
}
Table.prototype.reload = function() {
this.table_data = ["obj1", "obj2", "obj3"];
this.createList();
}
Table.prototype.createList = function() {
alert("Should be silent overridden createList Function");
}
function CustomFieldTable() {
Table.call(this);
}
CustomFieldTable.prototype = Object.create(Table.prototype);
CustomFieldTable.prototype.constructor = CustomFieldTable;
CustomFieldTable.prototype.init = function() {
this.reload();
}
CustomFieldTable.prototype.createList = function() {
alert("Custom Field create list");
for (var i = 0; i < this.table_data.length; i++) {
alert(this.table_data[i]);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
A few things to note, when you set these functions inside the constructor you are creating new instances of the function object whenever you create an object. Instead, use the .prototype to set methods on the object. Then use Object.create to extend the prototype and call the super from the constructor.
I received error of Uncaught TypeError: object is not a function on the line with new
it can only run if I do var item = mylib;
However, I am not really clear what is the issue here.
(function(window){
function mylib (){
var Library={};
Library.localVar1="One";
Library.localVar2="Two";
Library.func1 = function (){
console.log("func1 output"+Library.localVar1)
return true;
}
Library.func2 = function (){
Library.func2Var1 = "func2One";
console.log("func2 output"+Library.localVar2)
return Library.func2Var1;
}
return Library;
}
//define globally if it doesn't already exist
if(typeof(Library) === 'undefined'){
window.mylib = mylib();
}
else{
console.log("Library already defined.");
}
})(window);
var item = new window.mylib;
console.log(item.localVar2,"var2");
console.log(item.func2(),"func2");
console.log(item.func1(),"func1");
As you use var item = new window.mylib; I assume you want to create a new instance from Library.
But in your code, Library is an Object, not a constructor, constructor should be a Function. So you'll get that error.
(function(window){
function mylib (){
var Library = function() {
// Set self's variable
this.localVar1="One";
this.localVar2="Two";
}
// Use prototype to define the shared function.
Library.prototype.func1 = function (){
console.log("func1 output"+this.localVar1)
return true;
};
Library.prototype.func2 = function (){
Library.func2Var1 = "func2One";
console.log("func2 output"+this.localVar2)
return Library.func2Var1;
};
return Library;
}
//define globally if it doesn't already exist
if(typeof(Library) === 'undefined'){
window.mylib = mylib();
}
else{
console.log("Library already defined.");
}
})(window);
var item = new window.mylib(); // Create a instance of Library
console.log(item.localVar2,"var2");
console.log(item.func2(),"func2");
console.log(item.func1(),"func1");
This is how I create objects from a hash of properties:
var object = new function (data) {
var self = this;
self.property = data.property;
self.anotherProperty = data.anotherProperty;
self.method = function () { return 'something'; }
self.update = function (newData) {
//what is here ?
//i could have written:
self.property = newData.property;
self.anotherProperty = newData.anotherProperty;
//but why not reuse the constructor?
}
};
I wonder how to reuse this function (constructor) to update an object from hash.
So that:
object.update(newData)
would update current object properties from newData hash the same way it is done in the constructor function.
By giving the constructor a name?
function MyNotReallyClass(data){
var self = this;
self.property = data.property;
self.method = function () { return 'something'; }
self.update = MyMyNotReallyClass;
};
you can can now call
var obj = new MyNotReallyClass(data);
var obj2 = new MyNotReallyClass(data);
and
obj.update(data);
i hope this helps.. i not 100% sure, because i'm learning too.. but yeah try it ;)
edit: after reading this comment of you: "But that would return a new instance, wouldn't it? Which i don't want."
i think you can write the Update function and call it in your constructor
var object = new function (data) {
var self = this;
self.update = function (newData) {
self.property = data.property;
self.method = function () { return 'something'; }
// and other things You want to do in constructor and update
}
self.update(data);
}
;
How do you go about passing an objects properties in the follwoing situation:
ObjectTest = function()
{
this.var1= "3";
this.var2= "";
}
and the call
ObjectTest .prototype.allFriends = function() {
function bindEvents() {
//pass var1 here
}
}
Is there a way to pass the ObjectTest properties without passing them as properties of the bindEvents(). I'd prefer a global solution if at all possible
You use the same code in the prototype of allFriends as you used in the constructor:
ObjectTest = function()
{
this.var1= "3";
this.var2= "";
}
ObjectTest.prototype.allFriends = function() {
alert(this.var1);
}
It's the same: this.var1 - run this:
ObjectTest = function() {
this.var1 = 3;
this.var2 = "";
};
ObjectTest.prototype.allFriends = function() {
alert(this.var1);
};
x = new ObjectTest();
x.allFriends();
Or see this fiddle: http://jsfiddle.net/9XYZU/
ObjectTest.prototype.allFriends = function() {
do_smth_with(this.var1);
}
Beware, though, that you create a new ObjectTest by calling new ObjectTest(); without the new keyword it will not work.
EDIT: It will still work, because of the inner function will inherit the outer function's (allFriends) scope:
ObjectTest .prototype.allFriends = function() {
function bindEvents() {
console.log(this.var1);
}
}
If it still doesn't work for you, use a reference to the parent's this:
ObjectTest .prototype.allFriends = function() {
var parent = this;
function bindEvents() {
console.log(parent.var1);
}
}