In PHP, you can do something like that:
class myClass() {
function doSomething(someVar) {
// do something here
}
// etc... (other methods and properties)
}
Then, of course, you could call that method after instanciating the class, like that:
$myObj = new myClass();
$myObj->doSomething();
But you would also have the option to call the method as a standalone function, without instantiating the class (but you'd have to pay attention to dependencies in that function), like that:
myClass::doSomething();
I believe it's something borrowed for C++...
It's known as a Scope Resolution Operator (Paamayim Nekudotayim in the PHP code...)
http://en.wikipedia.org/wiki/Scope_resolution_operator#PHP
http://www.php.net/manual/en/language.oop5.paamayim-nekudotayim.php
How would you do something like that in JavaScript? It doesn't seem to be possible.
Maybe I am approaching this the wrong way, I should disclose what I'm trying to achieve...
I simply have a function, which goes like this:
function submitContactForm(form) {
// pretty JavaScript...
}
And I'm happy with it being a function. But I'd like to implement a "resetContactForm()" but would like to have it attached somehow to the submitConatctForm function.
I know I could probably do this:
var contactForm = {
"submit" : function(form) {
//...
},
"reset" : function(form) {
//...
}
}
And I'd have answered my own question like that...
But, besides the fact that I don't like this syntax, and would like to avoid it, there is also the fact that the above structure cannot be used as a class definition, it is not the same than in PHP... so going back to the original question: is there a way to have a JavaScript structure that can be used as a class definition and a collection of stand-alone functions at once?
You are mis-understanding prototypal inheritance - you actually can use your second example as a "class" definition and the methods can be invoked either from the "class" or from the "instance":
// This is a normal JavaScript object
// not JSON as another commenter pointed out.
var ContactForm = {
submit: function(form) {
form = form || this.form;
// general contact form submission implementation
},
reset: function(form) {
form = form || this.form;
// general contact form reset implementation
},
setForm: function(form) {
this.form = form;
}
};
// Now we will create an instance of the contactForm "class"
// We are setting the prototype of `firstContactForm`
// to point at the `contactForm` object.
// If we wanted to we could create a function on the
// ContactForm object (e. g. `create`) that would invoke
// Object.create for us. (i. e. `ContactForm.create()`)
var firstContactForm = Object.create(ContactForm);
firstForm.setForm(document.getElementById("someForm"));
firstForm.reset();
// But, we can also use the function as a "static":
ContactForm.reset(document.getElementById("someForm"));
In answer to the other part of your question, if you want to make it something that is invokable "stand-alone" you can also allow the data to be passed in directly, as we are doing in the example with our form = form || this.form; checks in submit and reset.
Alternately, you can use call and apply (as #elclanrs points out in his answer) and always use this.form:
ContactForm.reset.call({form: document.getElementById("someForm")});
In JavaScript's object syntax you don't need quotes if there aren't any special characters:
var obj = {
key: function() {
...
},
...
}
Paamayim Nekudotayim has no place in JavaScript as there are no classes, no static methods. But JavaScript has a dynamic context, what we call this. It is not in any way similar to this in PHP or other classical inheritance languages, other than the name of the keyword.
A typical JavaScript "class" looks like:
// A "Class"
var Person = (function(){
// Private stuff, shared across instances
var instances = [];
// The constructor AKA "__construct"
function Person(name) {
this.name = name;
instances.push(this); // keep track of instances
}
// Static methods, attached to the constructor
// don't need an instance
Person.instances = function() {
return instances;
};
// Public methods
Person.prototype = {
say: function() {
return this.name +' says hello!';
}
};
return Person;
}());
Now, how you use this:
var mike = new Person('Mike');
mike.say(); //=> Mike says hello!
Person.instances().length; //=> 1
So good so far. As for "scope resolution" in JavaScript, you can pass the context explicitly; knowing that this is dynamic, you can borrow the Person's say method and invoke it in any other context, for example:
Person.prototype.say.call({name:'John'}); //=> John says hello!
You can make it a class like this:
function ContactForm(form) {
this.form = form;
}
ContactForm.prototype.submit = function() {
console.log('submiting: ' + this.form);// do something with the form
}
ContactForm.prototype.reset = function() {
console.log('reseting: ' + this.form);
}
var someForm = ...;
var form = new ContactForm(someForm);
form.submit();
form.reset();
Or if you want to use them statically you can do as following:
var ContactForm = (function() {
var reset = function(form) {
console.log('reseting' + form);
};
var submit = function(form) {
console.log('submiting' + form);
}
return {
submit: submit,
reset: reset
}
}()); // note that this is self-executing function
and use it like
ContactForm.submit(form);
ContactForm.reset(form);
Reading Sean Vieira and elclanrs' answers gave me better insight.
I've come up with this code as a proof of concept, and to make sure I understood what I was reading. This is essentially a simplified version of elclanrs' answer:
function contactForm(form) {
this.form = form;
}
contactForm.prototype.submit = function() {
alert("submit "+this.form);
}
contactForm.prototype.reset = function() {
alert("reset "+this.form);
}
// Without instanciating:
contactForm.prototype.submit.call({form:'form2'});
// With instance:
myForm = new contactForm('form1');
myForm.reset();
So it seams this "functionality" is already available in JavaScript, albeit in a different, less straightforward form.
Also, Sean Vieira's approach, completed:
var ContactForm = {
submit: function(form) {
form = form || this.form;
alert("submit "+form);
},
reset: function(form) {
form = form || this.form;
alert("reset "+form);
},
createForm: function(form) {
var myForm = Object.create(this);
myForm.setForm(form);
return(myForm);
},
setForm: function(form) {
this.form = form;
}
};
// instanciated
myContactForm = ContactForm.createForm('Me Form');
myContactForm.submit();
// no instance
ContactForm.submit("Some Form");
Also (my contribution), how about using wrapper functions, like that? Looks like a decent option to me.
function contactForm(form) {
this.form = form;
this.submit = function() {
submitContactForm(this.form)
}
this.reset = function() {
resetContactForm(this.form);
}
}
function submitContactForm(form) {
alert("submit "+form);
}
function resetContactForm(form) {
alert("reset "+form);
}
// Without instanciating:
submitContactForm('form2');
// With instance:
myForm = new contactForm('form1');
myForm.reset();
There is no perfect solution...
Related
On my index.html, I have this code,
$(document).ready(function() {
var self = this;
var submit = function() {
alert("Test");
}
const form = new Form(self.submit);
})
In my Form.js, I have this code,
class Form() {
constructor(func) {
var self = this;
// ...
$("submitBtn").click(function(e) {
e.preventDefault();
self.func();
});
// ...
}
}
Why my function is not executing after the submitBtn is clicked?
I used self to get the "this" value. I cant use "new Form(self.submit())" because It will execute the function once the line is read.
Your submit function is a local variable, not a property of this. Thus you need:
const form = new Form(submit);
Similarly, in your constructor, func doesn't have anything to do with self; it should just be
func();
Pointy answers the question. I just want to add that constructor is a place where you usually declare and initialize instance properties, and it's better to register click event in a class method, something like:
class Form{
constructor(){}
click(func){
$("submitBtn").click((e)=>{
e.preventDefault();
func();
});
}
}
Also you dont need to cache the scope var self = this as long as you use arrow function. This answer could be useful Advantages of using prototype, vs defining methods straight in the constructor?
I have a class like this
App.Person = Ember.Object.extend({
say: function(thing) {
alert(thing);
}
});
I wish to add something to the method say , so that the method becomes
App.Person = Ember.Object.extend({
say: function(thing) {
alert(thing);
alert("Thing is said above! ");
}
});
So that
var person = App.Person.create();
person.say("Hello");
Output is Hello Thing is said above! .
I have tried to reopen the class and define the method again like
App.Person.reopen({
say: function(thing) {
alert("Thing is said above! ");
}
});
But then i am left only with Thing is said above! . Is there a way to "extend" a method?
or perform anything similar to achieve this?
also explain how to achieve the same to extend a jquery method ? , like i have jquery method binded to an DOM element and i want to extend that to add more code
I think yes. Either you call the super function into the inherited function :
// Super class
function Person() {
this.text = "Hello";
}
Person.prototype.say = function () {
alert(this.text);
}
// Inherited class
function TalkativePerson() {
Person.apply(this); // Call to the super constructor
this.extendedText = "How are you ?";
}
TalkativePerson.prototype = Object.create(Person.prototype); // Inheritance
TalkativePerson.prototype.constructor = TalkativePerson;
TalkativePerson.prototype.say = function () { // Here you redefine your method
Person.prototype.say.call(this);//And then you call the super method
// Add some stuff here like this :
alert(this.extendedText);
}
var person = new TalkativePerson();
person.say();
Or you can (in your example) directly change the value of the text like this :
function TalkativePerson2() {
this.text += ". How are you ?";
}
TalkativePerson2.prototype = new Person();
Here is a JSFiddle where you can test it.
You can call this._super(); in the extended version to have it call the original method. You can see an example of that here
I've been building a small JS framework for use at my job, and I'd like to employ Douglas Crockford's prototypical inheritance patterns. I think I get the general idea of how the prototype object works, but what isn't clear is the way in which I would use this pattern beyond the simplest example.
I'll flesh it out to the point that I understand it.
(function () {
'use strict';
var Vehicles = {};
Vehicles.Vehicle = function () {
this.go = function () {
//go forwards
};
this.stop = function () {
//stop
};
};
Vehicles.Airplane = Object.create(Vehicles.Vehicle());
}());
So now my Vehicles.Airplane object can go() and stop(), but I want more. I want to add takeOff() and land() methods to this object. I could just use ugly dot notation afterwards:
Vehicles.Airplane.takeOff = function () {
//take off stuff
}
But that seems wrong, especially if I were to add many methods or properties. The question asked at here seems to be very similar to mine, but the answer doesn't quite ring true for me. The answer suggests that I should build an object literal before using Object.create, and that I should pass that object literal into the create method. In the example code given, however, it looks like their new object inherits nothing at all now.
What I'm hoping for is some syntax similar to:
Vehicles.Airplane = Object.create(Vehicles.Vehicle({
this.takeOff = function () {
//takeOff stuff
};
this.land = function () {
//land stuff
};
}));
I know this syntax will break terribly with Object.create right now, because of course I'm passing Vehicle.Vehicle a function rather than an object literal. That's beside the point. I'm wondering in what way I should build new properties into an object that inherits from another without having to list them out one at a time with dot notation after the fact.
EDIT:
Bergi, after some anguished thought on the topic, I think I really want to go with what you described as the "Classical Pattern". Here is my first stab at it (now with actual code snippets rather than mocked up hypotheticals - You even get to see my crappy method stubs):
CS.Button = function (o) {
o = o || {};
function init(self) {
self.domNode = dce('a');
self.text = o.text || '';
self.displayType = 'inline-block';
self.disabled = o.disabled || false;
self.domNode.appendChild(ctn(self.text));
if (o.handler) {
self.addListener('click', function () {
o.handler(self);
});
}
}
this.setText = function (newText) {
if (this.domNode.firstChild) {
this.domNode.removeChild(this.domNode.firstChild);
}
this.domNode.appendChild(ctn(newText));
};
init(this);
};
CS.Button.prototype = Object.create(CS.Displayable.prototype, {
constructor: {value: CS.Button, configurable: true}
});
CS.Displayable = function (o) { // o = CS Object
o = o || {};
var f = Object.create(new CS.Element(o));
function init(self) {
if (!self.domAnchor) {
self.domAnchor = self.domNode;
}
if (self.renderTo) {
self.renderTo.appendChild(self.domAnchor);
}
}
//Public Methods
this.addClass = function (newClass) {
if (typeof newClass === 'string') {
this.domNode.className += ' ' + newClass;
}
};
this.addListener = function (event, func, capture) {
if (this.domNode.addEventListener) {
this.domNode.addEventListener(event, func, capture);
} else if (this.domNode.attachEvent) {
this.domNode.attachEvent('on' + event, func);
}
};
this.blur = function () {
this.domNode.blur();
};
this.disable = function () {
this.disabled = true;
};
this.enable = function () {
this.disabled = false;
};
this.focus = function () {
this.domNode.focus();
};
this.getHeight = function () {
return this.domNode.offsetHeight;
};
this.getWidth = function () {
return this.domNode.offsetWidth;
};
this.hide = function () {
this.domNode.style.display = 'none';
};
this.isDisabled = function () {
return this.disabled;
};
this.removeClass = function (classToRemove) {
var classArray = this.domNode.className.split(' ');
classArray.splice(classArray.indexOf(classToRemove), 1);
this.domNode.className = classArray.join(' ');
};
this.removeListener = function () {
//Remove DOM element listener
};
this.show = function () {
this.domNode.style.display = this.displayType;
};
init(this);
};
CS.Displayable.prototype = Object.create(CS.Element.prototype, {
constructor: {value: CS.Displayable, configurable: true}
});
I should be quite clear and say that it's not quite working yet, but mostly I'd like your opinion on whether I'm even on the right track. You mentioned "instance-specific properties and methods" in a comment in your example. Does that mean that my this.setText method and others are wrongly placed, and won't be available to descendant items on the prototype chain?
Also, when used, it seems that the order of declaration now matters (I can't access CS.Displayable.prototype, because (I think) CS.Button is listed first, and CS.Displayable is undefined at the time that I'm trying to reference it). Is that something I'll just have to man up and deal with (put things in order of ancestry in the code rather than my OCD alphabetical order) or is there something I'm overlooking there as well?
Vehicles.Airplane = Object.create(Vehicles.Vehicle());
That line is wrong. You seem to want to use new Vehicles.Vehicle - never call a constructor without new!
Still, I'm not sure which pattern you want to use. Two are coming to my mind:
Classical Pattern
You are using constructor functions just as in standard JS. Inheritance is done by inheriting the prototype objects from each other, and applying the parent constructor on child instances. Your code should then look like this:
Vehicles.Vehicle = function () {
// instance-specific properties and methods,
// initialising
}
Vehicles.Vehicle.prototype.go = function () {
//go forwards
};
Vehicles.Vehicle.prototype.stop = function () {
//stop
};
Vehicles.Airplane = function() {
// Vehicles.Vehicle.apply(this, arguments);
// not needed here as "Vehicle" is empty
// maybe airplane-spefic instance initialisation
}
Vehicles.Airplane.prototype = Object.create(Vehicles.Vehicle.prototype, {
constructor: {value:Vehicles.Airplane, configurable:true}
}); // inheriting from Vehicle prototype, and overwriting constructor property
Vehicles.Airplane.prototype.takeOff = function () {
//take off stuff
};
// usage:
var airplane = new Vehicles.Airplace(params);
Pure Prototypical Pattern
You are using plain objects instead of constructor functions - no initialisation. To create instances, and to set up inheritance, only Object.create is used. It is like having only the prototype objects, and empty constructors. instancof does not work here. The code would look like this:
Vehicles.Vehicle = {
go: function () {
//go forwards
},
stop: function () {
//stop
}
}; // just an object literal
Vehicles.Airplane = Object.create(Vehicles.Vehicle); // a new object inheriting the go & stop methods
Vehicles.Airplane.takeOff = function () {
//take off stuff
};
// usage:
var airplane = Object.create(Vehicles.Airplane);
airplane.prop = params; // maybe also an "init" function, but that seems weird to me
You got Object.create wrong. The first argument should be an object (maybe that's why people suggested you pass a literal).
In your first example, you're actually passing undefined:
Vehicles.Airplane = Object.create(Vehicles.Vehicle()); // the function call will
// return undefined
The following would work, but it's not very Crockford-ish:
Vehicles.Airplane = Object.create(new Vehicles.Vehicle());
The way I believe Crockford would do it (or, at least, wouldn't complain of):
var Vehicles = {};
Vehicles.Vehicle = {
go : function() {
// go stuff
},
stop : function() {
// go stuff
}
};
Vehicles.Airplane = Object.create(Vehicles.Vehicle, {
takeOff : {
value : function() {
// take-off stuff
}
},
land : {
value: function() {
// land stuff
}
}
});
Note that Vehicles.Vehicle is just a literal, which will be used as the prototype for other objects. When we call Object.create, we pass Vehicles.Vehicle as the prototype, and takeOff and land will be own properties of Vehicles.Airplane. You may then call Object.create again, passing Vehicles.Airplane as the prototype, if you want to create e.g. a Boeing.
The own properties passed as the second parameter are packed in an object that contains a representation of their property descriptors. The outer keys are the names of your properties/methods, and each one points to another object containing the actual implementation as the value. You may also include other keys like enumerable; if you don't they'll take the default values. You can read more about descriptors on the MDN page about Object.defineProperty.
I'm designing an OOP inheritance pattern for many applications I'm building. Javascript has many ways of doing this, but I stumbled on a pattern I really like. But now I'm struggling with the need for a separation of classes and instances.
I have a base object called Root. And it has a main method called inherit. To create a new object you use
var Person = Root.inherit({
name : "",
height : 0,
walk : function() {},
talk : function() {}
});
Then to create an "instance" you would
var sally = Person.inherit({
name : "sally",
height : "5'6"
});
sally can .talk() and she can walk() and she has a .name and a .height
You can make more people the same way.
If you want a constructor you use
var Person = Root.inherit({
_construct : function() {
// do things when this object is inherited from
},
name : "",
height : 0,
walk : function() {},
talk : function() {}
});
It also has the ability to have init, when the object is first defined in code (singletons use this)
var Person = Root.inherit({
_init : function() {
// called at runtime, NOT called if an object is inherited from me
},
name : "",
height : 0,
walk : function() {},
talk : function() {}
});
So as you can see, everything uses .inhert(). There are no classes and no instances really. Everything is an instance of something. The only real problem I found so far is that there is no concept of "type", but you can always just check for a method if you need to. Also you can't protect a 'class', as a 'class' can be changed during execution if the developer accidentally changed it, or meant to change it.
So my question is: Is there a need in javascript to have an explicitly and controlled separation of class structure and instances of the class? Are there any issues with treating every object as an instance?
No there's no need since Javascript is a Prototypal based language, meaning that classes are not involved. You are just creating clones of the objects.
http://en.wikipedia.org/wiki/Prototype-based_programming
As far as the concept of type, the type is object.
A good read for more info about this would be Javascript Patterns by Stoyan Stefanov he has several different creational patterns that address your concerns, including examples that implement Design Patterns from the gang of four's design patterns.
http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752
So my question is: Is there a need in javascript to have an explicitly and controlled separation of class structure and instances of the class? Are there any issues with treating every object as an instance?
Not really, if you're happy with it, it's fine.
The more normal form of JavaScript inheritance does much the same thing. You'll frequently see structures like this (severely cut down for brevity):
function Base() {
}
Base.prototype.foo = function() {
};
function Derived() {
}
Derived.prototype = new Base();
...and of course, new Base() is also how you create instances of Base. So your system is quite similar.
Again, the above is a sketch, not a full example. For one thing, usually you'd see construction and initialization separated out, so you don't literally see Derived.prototype = new Base() so much as something that creates an object with Base's prototype but without actually calling Base (which Derived would do later), but you get the idea. Granted that statement somewhat weakens the similarity with your system, but I don't think it breaks it at all.
At the end of the day, it's all about objects (instances), which are either used directly (your sally) or indirectly by providing features to other objects (Person, Root) by cloning or by setting them up as the prototype of the other object.
Javascript's inheritance is prototypical which means everything object is an instance. You actually have to do extra work to get the classical inheritance.
This is how I work in javascript
// this is class
function person(){
// data is member variable
this.name = null;
this.id = null;
//member functions
this.set_name = _set_name;
this.get_name = _get_name;
this.set_id = _set_id;
this.get_id = _get_id;
function _set_name(name){
this.name = name;
}
function _get_name(name){
return this.name;
}
function _set_id(id){
this.id = id;
}
function _get_id(id){
return this.id;
}
}
// this is instance
var yogs = new person();
yogs.set_id(13);
yogs.set_name("yogs");
hope it may help
Start with some basic object...
// javascript prototypes - callback example - javascript objects
function myDummyObject () {
that = this;
} // end function myDummyObject ()
// begin dummy object's prototype
myDummyObject.prototype = {
that : this,
// add a simple command to our dummy object and load it with a callback entry
say : function () {
var that = this;
console.log('speaking:');
that.cb.run("doSay");
}
} // end myDummyObject proto
extend with a sub prototype..
// here we addon the callback handler... universally self sufficient object
var cb = {
that : this, // come to papa ( a link to parent object [ myDummyObject ] )
jCallback : new Array(new Array()), // initialize a javascript 2d array
jCallbackID : -1, // stores the last callback id
add: function(targetFnc, newFunc) {
var that = this;
var whichID = that.jCallbackID++;
// target, addon, active
that.jCallback[that.jCallback.length] = { 'targetFunc' : targetFnc, 'newFunc' : newFunc, 'active' : true, 'id': whichID };
return whichID; // if we want to delete this later...
}, // end add
run: function(targetFnc) {
var that = this;
for(i=0;i <= that.jCallback.length - 1;i++) // go through callback list
if( that.jCallback[i]['targetFunc'] == targetFnc && that.jCallback[i]['active'] == true )
that.jCallback[i]['newFunc'](); // run callback.
}, // end run
remove: function (whichID) {
var that = this;
console.log('removing:' + whichID);
for(i=0;i <= that.jCallback.length - 1;i++) // go through callback list
if( that.jCallback[i]['id'] == whichID )
that.jCallback[i]['newFunc'](); // run callback.
} // end remove
}
// add the object to the dummy object...
myDummyObject.prototype.cb = cb;
Example:
var testing = new myDummyObject();
testing.cb.add('doSay', function () { console.log('test: 213123123'); } );
// test remove...
var testid = testing.cb.add('doSay', function () { console.log('test: 12sad31'); } );
testing.cb.remove(testid);
testing.cb.add('doSay', function () { console.log('test: asdascccc'); } );
testing.cb.add('doSay', function () { console.log('test: qweqwe'); } );
testing.cb.add('doSay', function () { console.log('test: d121d21'); } );
testing.cb.add('doSay', function () { console.log('test: wwww'); } );
testing.say();
This always seemed the easiest for me to understand... Just create a new instance of the inherited class and then loop through its variables and methods and add them to the main one.
var myPerson = new Person()
var myPerson.firstName = 'john';
var myPerson.lastName = 'smith';
var myPerson.jobTitle = 'Programmer';
var Person = function(){
//Use this to inherit classes
this._extendedClass = new Person_Job();
for(var i in this._extendedClass){
this[i] = this._extendedClass[i];
}
delete this._extendedClass;
this.firstName = '';
this.lastName = '';
}
var Person_Job = function() {
this.jobTitle = '';
}
Set-Up
I'm trying to make an object based validation code for my site where you can define an input as an object and attach properties to it kinda like this
function input(id,isRequired) {
this.id = id
this.isRequired = isRequired
this.getElement = getElem;
this.getValue = getValue;
this.writeSpan = writeSpan;
this.checkText = checkText;
this.isText = true
this.checkEmpty = checkEmpty;
this.isEmpty = true
this.isValid = false
}
I currently have an event handler set up like this
firstName.getElement().onblur = function() {validate(firstName)}
where firstName is the input object and the getElement() method executes the following:
function getElem() {
return document.getElementById(this.id)
}
The Issue
What I would like to do is be able to reference the firstName object with the validate function by using a something similar to .this and effectively remove the anonymous function. I want to do this mainly because I'm working with team members who aren't very familiar with javascript and the less code the better.
I'm guessing the code I'm looking for would look something like this:
firstName.getElement().onblur = validate
function validate() {
object = "your code here"
}
Is this possible?
Have a look at .bind():
firstName.getElement().onblur = validate.bind(firstName);
This will make this inside the validate function refer to firstName (so it is not passed as parameter).
It is not supported by all browsers (it is part of ECMAScript5) but the link shows a custom implementation.
Alternatively, you could create a new function which generates the anonymous function for you:
firstName.getElement().onblur = get_validator(firstName);
where get_validator is:
function get_validator(obj) {
return function() {
validate(obj);
}
}
Or you could do the same but as a method of the input object, so that one only has to do:
firstName.getElement().onblur = firstName.getValidator();