a = function(x){
this.c = x;
this.c();
}
a.prototype.b = function () {
alert("B");
}
a.prototype.c = function () {
//overwrite this
}
var z = new a(this.b);
I know using this.b is wrong but is there anyway I can reference an objects method and pass it as an argument when instantiating the object?
I know the object instance doesn't exist yet but the prototypes do.
I can't paste the context as it's far too complicated I'm afraid. Basically I want to overwrite prototype.b on some occasions and do that at the instantiation point rather than afterwards. Mainly for prettier code. But if can't be done no worries.
You would need to reference it from the constructor.
a = function(x) {
this.c = x;
this.c();
}
a.prototype.b = function() {
alert("B");
}
var z = new a(a.prototype.b);
or maybe it would be nicer to send the name of the desired method, and have the constructor do it.
a = function(x) {
if (x in a.prototype) {
this.c = a.prototype[x];
this.c();
}
}
a.prototype.b = function() {
alert("B");
}
var z = new a("b");
Related
var A = function () {
this.p1 = 2;
};
A.prototype.f1 = function () {
return 7;
};
var B = function () {
inherit(A, B);
};
function inherit(Child, Parent) {
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
}
var b = new B();
console.log(b.p1); // get undefined here
I am new to JS, sorry for dump question. I would like to inherit B from A. What am I doing wrong?
You're only calling inherit() after creating the instance of B.
You need to call inherit() statically, once, after defining both functions.
You also need to call A on your instance in B.
For more details on how to properly do inheritance, see my blog.
What am I doing wrong?
Two things:
You're calling inherit inside B. You should be doing it outside.
Inside B, you should be calling A, e.g.
A.call(this/*, other, args, here, if, needed*/);
or
A.apply(this, arguments);
to pass on all of the arguments B received at runtime via the automatic arguments pseudo-array.
Like so:
var A = function () {
this.p1 = 2;
};
A.prototype.f1 = function () {
return 7;
};
var B = function () {
A.call(this); // <==== Added
};
inherit(A, B); // <==== Moved
function inherit(Child, Parent) {
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
}
var b = new B();
console.log(b.p1); // get 2 here now
You didn't call the base constructor. Also, it's enough if you inherit only once the classes.
var A = function () {
this.p1 = 2;
};
A.prototype.f1 = function () {
return 7;
};
var B = function () {
A.apply(this, arguments);
};
inherit(A, B);
function inherit(Child, Parent) {
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
}
var b = new B();
console.log(b.p1); // get undefined here
I want to be able to call sub-functions that work with private data. Currently I have this:
var myFunction4 = function() {
this.secret1 = 0;
this.secret2 = 0;
var that = this;
this.iterate1 = function(){
return that.secret1++;
}
this.iterate2 = function(){
return that.secret2++;
}
this.addSecrets = function(){
return that.secret1 + that.secret2;
}
return {
iterate1: this.iterate1,
iterate2: this.iterate2,
addSecrets: this.addSecrets,
}
};
The bad thing about this is that to call one of the methods, I have to do:
myFunction4().iterate1();
Which executes myFunction4() every single time I want to access a method. Not only is this inefficient, but it resets secret1 each time so I can't iterate it. I've tried using the new operator, but that exposes secret1 and secret2, and it messes up the ability to nest functions deeply.
var myFunction3 = function() {
this.secret1 = 0;
this.secret2 = 0;
this.iterate1 = function(){
return this.secret1++;
}
this.iterate2 = function(){
return this.secret2++;
}
this.addSecrets = function(){
return this.secret1 + this.secret2;
}
};
var f3 = new myFunction3();
f3.secret1; // exposes the secret!
See the console logs at the bottom of this JSFiddle for more examples.
How can I have a function with both private and public vars/methods which retain their values and don't need to be called multiple times?
While the other answers are absolutely fine and correct, there is one more issue to consider when emulating OOP behaviour in javascript.
The function execution context issue will bite us hard when we will try to use a public method as a e.g. async. callback.
The magical this will point to a different object then we expect in the OOP world.
Of course there are ways to bind the context but why to worry about this after we define the 'class' in a non OOP js ;)
Here is a simple solution to this: Do not use this. Let the closure refactor this out ;)
var myFunction4 = function() {
// we could inherit here from another 'class' (object)
// by replacing `this` with e.g. `new SuperClass()`
var that = this;
// 'private' variables
var secret1 = 0;
var secret2 = 0;
// 'public' variables
that.somePublicVar = 4;
// 'private' methods
var somePrivateMethod = function(){
secret2 = 77;
that.somePublicVar = 77;
}
// 'public' methods
that.iterate1 = function(){
return secret1++;
}
that.iterate2 = function(){
return secret2++;
}
that.addSecrets = function(){
return secret1 + secret2;
}
return that;
};
var f = new myFunction4();
console.log( f.iterate1() ); // 0
console.log( f.iterate1() ); // 1
console.log( f.secret1 ); //undefined
console.log( f.somePublicVar ); //4
Try that (closures power!):
var myFunction3 = function() {
var secret1 = 0;
var secret2 = 0;
this.iterate1 = function(){
return secret1++;
}
this.iterate2 = function(){
return secret2++;
}
this.addSecrets = function(){
return secret1 + secret2;
}
};
var f3 = new myFunction3();
now only the methods are exposeds
Edited version:
If you don't wanna execute the main function every time you call sub-method, you can change a bit your approach and use the power of IIFE (immediately-invoked function expression)
var myFunction4 = (function() {
var secret1 = 0;
var secret2 = 0;
var iterate1 = function(){
return secret1++;
}
var iterate2 = function(){
return secret2++;
}
var addSecrets = function(){
return secret1 + secret2;
}
return {
iterate1: iterate1,
iterate2: iterate2,
addSecrets: addSecrets
}
}());
Then you can use this:
myFunction4.iterate1();
myFunction4.iterate2();
myFunction4.addSecrets();
Hope this helps you
I generally only use the factory pattern to create objects unless I absolutely need to have the performance benefits of prototypical inheritance.
Using the factory pattern also means you don't have to deal with the ever changing value of this in different contexts.
var factory = function() {
// internal private state
var state = {
secret1: 0,
secret2: 0
}
function iterate1(){
return state.secret1++;
}
function iterate2(){
return state.secret2++;
}
function addSecrets(){
return state.secret1 + state.secret2;
}
function __privateMethod() {
// this is private because it's not on the returned object
}
// this is the public api
return {
iterate1,
iterate2,
addSecrets
}
}
// create a secret module
var secret = factory()
console.log(
secret.iterate1(), // 0
secret.iterate2(), // 0
secret.addSecrets(), // 2
secret.secret1, // undefined
secret.secret2 // undefined
)
// you can even create more with the same factory
var secret2 = factory()
Why don't you try Revealing Module Pattern
var myFunction4 = function() {
var secret1 = 0,
secret2 = 0,
iterate1 = function(){
return secret1++;
},
iterate2 = function(){
return secret2++;
},
addSecrets = function(){
return secret1 + secret2;
};
// public functions and properties
return {
iterate1: iterate1,
iterate2: iterate2,
addSecrets: addSecrets,
}
}();
myFunction4.iterate1(); // is available
myFunction4.secret2; // is private and not available outside of myFunction4
Hope it helps
A basic pattern:
var myFunction = function() {
var that = this;
var secret1 = 0;
var secret2 = 0; // private
this.public1 = 0; // public
this.iterate1 = function(){
return secret1++;
}
this.iterate2 = function(){
return secret2++;
}
this.addSecrets = function() { // public
return privateMethod();
}
var privateMethod = function() { // private
return secret1 + secret2;
}
return this; // return function itself!
};
var myFn = new myFunction();
myFn.public1 // 0
myFn.secret1 // undefined
myFn.addSecrets();
I recommend you to read the excellent Learning JavaScript Design Patterns by Addy Osmani.
What I understand from your explanation as per your second snippet is that you need a sharedPrivate among the instantiated objects. You can not do this with classical object creation patterns like constructor, factory or module. This is possible by taking a private variable under closure in the prototype of the constructor so that it doesn't get reset each time an object is created and at the meantime the instantiated objects are provided with necessary methods to access, modify and share it privately.
function SharedPrivate(){
var secret = 0;
this.constructor.prototype.getSecret = function(){return secret}
this.constructor.prototype.setSecret = function(v){ secret = v;}
this.constructor.prototype.incrementSecret = function(){secret++}
}
var o1 = new SharedPrivate();
var o2 = new SharedPrivate();
console.log(o1.getSecret()); // 0
console.log(o2.getSecret()); // 0
o1.setSecret(7);
console.log(o1.getSecret()); // 7
console.log(o2.getSecret()); // 7
o2.incrementSecret()
console.log(o1.getSecret()); // 8
And another method of getting a similar result would be
function SharedPrivate(){
var secret = 0;
return {getS : function(){return secret},
setS : function(v){secret = v},
incS : function(){secret++}
};
}
sharedProto = SharedPrivate(); // secret is now under closure to be shared
var o1 = Object.create(sharedProto); // sharedProto becomes o1.__proto__
var o2 = Object.create(sharedProto); // sharedProto becomes o2.__proto__
o1.setS(7); // o1 sets secret to 7
console.log(o2.getS()); // when o2 access it secret is still 7
o2.incS(); // o2 increments the secret
console.log(o1.getS()); // o1 can access the incremented value
var createworker = function() {
var workcount;
var input;
(function() {
workcount = 0;
console.log("hello");
}());
var task1 = function() {
workcount += 1;
console.log("task1" + workcount);
};
var task2 = function(a) {
workcount += 1;
input = a;
console.log("task2" + workcount + "variable" + a);
};
var task3 = function() {
console.log(input);
};
return {
job1: task1,
job2: task2,
job3: task3
};
}
var worker = new createworker();
worker.job1();
worker.job2(2);
worker.job3();
var worker1 = createworker();
worker1.job1();
worker1.job2(2);
worker1.job3();
Both work same. Then why to use new and when to use it?
Both work same.
They reason they both work the same is that you're returning an object from createworker. That overrides the work that new did.
new is used with constructor functions. It does this:
Creates a new object backed by the object the constructor function's prototype property points ot
Calls the constructor function with this referring to that new object
In the normal case, the result of new functionname is a reference to the object that new created. But, if the constructor function returns a non-null object reference, the result of the new expression is that object instead. It's that "but" that's happening in your createworker example.
So your version of createworker doesn't need new, because of the way it's written.
And doing it that way is absolutely fine; in fact, there are people who always do it that way. If you wanted to use new with createworker, here's a version designed to be used that way (renamed CreateWorker, because by convention constructor functions are capitalized):
var CreateWorker = function() {
var workcount;
var input;
(function() { // Side note: This function is pointless. Just move
workcount = 0; // <− this line
console.log("hello"); // <− and this one
}()); // ...out into the body of `createworker`/`CreateWorker`
// Note we assign to properties on `this`
this.job1 = function() {
workcount += 1;
console.log("task1" + workcount);
};
this.job2 = function(a) {
workcount += 1;
input = a;
console.log("task2" + workcount + "variable" + a);
};
this.job3 = function() {
console.log(input);
};
// Note we aren't returning anything
};
I want add new function after i have created objects . I try write some code but it not right.
//
Sorry my description don't clear. I want after i create an object i can add function for this object to do something. Hope someone can understand my english :(
http://fiddle.jshell.net/7LnLerdt/
function Add(a,b){
var _self = this;
var a = a;
var b = b;
}
Add.prototype.doAdd = function(){
var rs = this.a+this.b;
if(rs < 10){
this.lessThanTen();
}else{
this.moreThanTen();
}
};
Add.prototype.moreThanTen = function(callback) {
if(callback){
callback.call(this);
}
};
Add.prototype.lessThanTen = function(callback) {
if(callback){
callback.call(this);
}
};
var add = new Add();
add.moreThanTen(function(){
console.log("moreThanTen");
});
add.lessThanTen(function(){
console.log("lessThanTen")
});
add.doAdd();
The code where you are "assigning" callbacks is not how it works. It just executes the method, it does not magically just assign the callback. The callbacks would need to be passed into the doAdd method or you need to assign the callbacks in a different manner.
If you want to add properties to object use this code instead:
function Add(a,b){
this.a = a;
this.b = b;
}
If you want to add callbacks use this:
Add.prototype.addCallbacks(less, more) {
this.less = less;
this.more = more;
};
Add.prototype.moreThanTen = function(callback) {
if(this.more){
this.more.call(this);
}
};
Add.prototype.lessThanTen = function(callback) {
if(this.less){
this.less.call(this);
}
};
and then
var add = new Add();
add.addCallbacks(function(){
console.log("lessThanTen")
}, function(){
console.log("moreThanTen");
});
You have a couple of problems. First, using var will declare a local variable, so it will not be accessible outside that function. If you want to create a member variable, use this. instead (as jcubic pointed out).
function Add(a, b) {
this.a = a;
this.b = b;
}
Second, you are not adding the callbacks correctly. Your code is executing the callback immediately, but (I think) what you really want to do is save the callback and execute it later.
function Add(a, b) {
this.a = a;
this.b = b;
this.moreThanTenCallbacks = [];
this.lessThanTenCallbacks = [];
}
Add.prototype.moreThanTen = function(callback) {
moreThanTenCallbacks.push(callback);
};
Add.prototype.lessThanTen = function(callback) {
lessThanTenCallbacks.push(callback);
};
Add.prototype.executeCallback = function(callbacks) {
for (var i = 0; i < callbacks.length; ++i) {
if (callback) {
callback();
}
}
};
Add.prototype.doAdd = function() {
var rs = this.a + this.b;
if (rs < 10) {
this.executeCallback(this.lessThanTenCallbacks);
} else {
// NOTE: this will execute moreThanTen callbacks even if the result equals 10!
// Are you sure that is what you want?
this.executeCallback(this.moreThanTenCallbacks);
}
};
Family = function(name) {
this._Name = name;
}
Family.prototype = {
getName: function() {
return this._Name;
},
People: function(num) {
this._Number = num;
}
}
Family.People.prototype = {
clearNumber: function() {
this._Number = 0;
}
}
People is a nested class. Its parent class is Family.
I get the error that Family.People is undefined. Could someone correct the code above?
Working code
// function doesn't need "new" operator
var Family = function(name) { this._Name = name; };
Family.prototype = {
getName: function() { return this._Name; }, // missing comma
People: function(num) {
this._Number = num;
}
};
// work with prototypes
Family.prototype.People.prototype = {
clearNumber: function() { this._Number = 0; }
};
This will work. But you have to be aware, that when you call:
var f = new Family("Doe");
f.People is just an object constructor, and not an instance of some other object. You will have to instantiate it as well like:
f.members = new f.People(3);
Sou you have a constructor within your instance which is rather confusing.
A better approach
So it would probably be better if you'd write your prototypes this way:
var Family = function(name) {
this._Name = name;
this.getName = function() { return this._Name; };
};
Family.People = function(num) {
this._Number = num;
this.clearNumber = function() { this._Number = 0; };
};
This actually makes a class within a class (and not within instances). So upper lines would be called this way:
var f = new Family("Doe");
f.members = new Family.People(3);
Drill down of f instance would look like:
f
_Name
getName()
members
_Number
clearNumber()
Private variables
var Family = function(name) {
var _name = name;
this.getName = function() { return _name; };
};
Family.People = function(num) {
var _num = num;
this.getNumber = function() { return _num; }
this.clearNumber = function() { _num = 0; };
};
This way we make variables private and only accessible within so they can't be manipulated outside. You must always use functions to manipulate them. This makes it more robust especially when there are certain business rules related to variable values.
var f = new Family("Doe");
f._name; // this is undefined because "_name" is private closure variable
Drill down of f instance would now look more like a class object instance:
f
getName()
members
getNumber()
clearNumber()
Notice that you are assigning to Family.prototype.People then trying to access Family.People.
Family is not an instance of Family thus it does not have the properties of that class - Family is an instance of Function thus you are trying to access Function.prototype.People in that 3rd statement. (this is a bit of a simplification)
i.e. what you want to be doing is
Family.prototype.People.prototype = {
clearNumber:function(){this._Number = 0;}
}
You are also missing a comma before people, but I assume this is a typo...
You should declare the People constructor as a key in the Family object:
Family.People = function(num) {
this._Number = num;
}
The Family prototype will be in the prototype chain for new objects of type Family; not a part of Family itself.