I have the following code:
var A = function (id) {
var elem = document.getElementById(id);
function text () {
return "Hello world";
}
this.other = function(){
console.log(text());
}
}
What if I wanted to add the other function from outside and still call the text() function like this:
(function(A){
A.prototype.other = function() {
console.log(text());
}
})(A);
Is there any way to do that? I mean without having to change function text(){} to this.text=function(){}
You could attach text() method to A function which is still an object and then use it in A.prototype.other like this.
var A = function(id) {
this.id = id;
}
A.text = function() {
return "Hello world";
}
A.prototype.other = function() {
return this.id + ' ' + A.text();
}
var a = new A(123);
console.log(a.other())
Related
So i have this code:
function Class1() {
this.i = 1;
var that=this;
function nn() {
return 21;
}
this.aa = function() {
nn();
};
this.bb = function() {
this.aa();
};
this.cc = function() {
this.bb();
};
}
var o = new Class1();
var b=o.cc();
alert(b); //undefined
But when the alert is fired, I get an undefined error and not 21, Does the private method can not use a return? Thanks!
When using the function() {} syntax to define a function, you always explicitly need to return the value, i.e. not only from nn, but from all intermediate functions as well.
function Class1() {
this.i = 1;
var that = this;
function nn() {
return 21;
}
this.aa = function() {
return nn();
}
this.bb = function() {
return this.aa();
}
this.cc = function() {
return this.bb();
}
}
var o = new Class1();
var b = o.cc();
alert(b); // "21"
Apart from the answer above, the 'this' context seems weird in your functions. Maybe you are better of with arrow functions if you dont want to bind the this context to each function. I also think that it is better to actually separate private and public functions when using a 'class' like this.
function Class1() {
var _nn = function () {
return 21;
}
var _aa = function () {
return _nn();
}
var _bb = function () {
return _aa();
}
var cc = function () {
return _bb();
};
return {
cc
};
}
var o = new Class1();
var a = o.cc();
console.log(a);
Much easier to understand that it is only cc that is a public function.
So with arrow function it would instead look like this, and you can use the Class1 this context inside of your private functions without doing
var that = this; or using bind.
function Class1() {
this.privateThing = 'private';
var _nn = () => { return this.privateThing; };
var _aa = () => { return _nn(); };
var _bb = () => { return _aa(); };
var cc = () => { return _bb(); };
return {
cc
};
}
I'm studying Javascript and learning how to use call. I created this script and I don't know why I can't have access to this variable Time.
var MyObject;
(function(MyObject) {
var Runner = (function() {
function Runner(time) {
this.time = time;
}
var myFunctionArray = [];
Runner.prototype.execute = function() {
myFunctionArray[0]();
}
Runner.prototype.newTest = function(index, execute) {
var test = function() {
return execute.call(this);
}
myFunctionArray.push(test);
}
return Runner;
})();
MyObject.Runner = Runner;
})(MyObject || (MyObject = {});
var myNewObj = new MyObject.Runner(1000); myNewObj.newTest('1', function() {
console.log(this.time) //output: undefined
});
So how can I get time value inside newTest function?
Issue is in newTest function
Runner.prototype.newTest = function(index, execute) {
var test = function() {
return execute.call(this);
}
myFunctionArray.push(test);
}
Here this is pointing to test and not Runner. You will have to save context in a variable and then set it in call.
Runner.prototype.newTest = function(index, execute) {
var self = this;
var test = function() {
return execute.call(self);
}
myFunctionArray.push(test);
}
.call + self
var MyObject;
(function(MyObject) {
var Runner = (function() {
function Runner(time) {
this.time = time;
}
var myFunctionArray = [];
Runner.prototype.execute = function() {
myFunctionArray[0]();
}
Runner.prototype.newTest = function(index, execute) {
var self = this;
var test = function() {
return execute.call(self);
}
myFunctionArray.push(test);
}
return Runner;
})();
MyObject.Runner = Runner;
})(MyObject || (MyObject = {}));
var myNewObj = new MyObject.Runner(1000);
myNewObj.newTest('1', function() {
console.log(this, this.time) //output: undefined
});
myNewObj.execute()
.bind
As commented, you can even use .bind
var MyObject;
(function(MyObject) {
var Runner = (function() {
function Runner(time) {
this.time = time;
}
var myFunctionArray = [];
Runner.prototype.execute = function() {
myFunctionArray[0]();
}
Runner.prototype.newTest = function(index, execute) {
myFunctionArray.push(execute.bind(this));
}
return Runner;
})();
MyObject.Runner = Runner;
})(MyObject || (MyObject = {}));
var myNewObj = new MyObject.Runner(1000);
myNewObj.newTest('1', function() {
console.log(this, this.time) //output: undefined
});
myNewObj.execute()
When you declare your Runner function, you've actually declared a function that takes no arguments that then itself declares a function called Runner that takes one argument.
Actually In this code snippet :
Runner.prototype.newTest = function(index, execute) {
var test = function() {
return execute.call(this);
}
myFunctionArray.push(test);
}
this will reference to test variable (as per constructor invocation pattern)
So, to pass right variable cache the value of this in another variable and then pass that to function.
I am working on a javascript library that will work like this: tex("element").print("hi"). Here is the code:
(function (window) {
var regex = {
Id : /^[#]\w+$/,
Class : /^[.]\w+$/,
Tag : /^\w+$/,
validSelector : /^([#]\w+|[.]\w+|\w+)$/
},
tex = function(selector){
//only some of the functions need to select an element
//EX:
// style: tex(selector).style(style);
//one that would not need a selector is the random number function:
// tex().random(from,to);
if (selector){
if (typeof selector === 'string'){
var valid = regex.validSelector.test(selector);
if( valid ){
if(regex.Id.test(selector)){
this = document.getElementById(selector);
}
if(regex.Class.test(selector)){
this = document.getElementByClass(selector);
}
if(regex.Tag.test(selector)){
this = document.getElementByTagName(selector);
}
}
}else if(typeof selector === 'object'){
this = selector;
}
//this = document.querySelector(selector);
// I could make a selector engine byt I only need basic css selectors.
}
};
tex.prototype = {
dit : function(){
this.innerHTML = 'Hi?!?!?!'
}
};
window.tex = tex;
})(window);
When I try to run the code I get an error that says, "Left side of argument is not a reference" referring to this = document.getElementById(selector);
Does anyone know what is wrong with my code?
Because you can not set this.
To do something that you are after, you just return this.
without using a prototype
var foo = function( selector ) {
this.print = function () {
console.group("in print");
console.log(this.elements[0].innerHTML);
console.groupEnd("in print");
return this;
}
this.printAll = function () {
console.group("in printAll");
for (var i=0; i<this.elements.length; i++) {
console.log(this.elements[i].innerHTML);
}
console.groupEnd("in printAll");
return this;
}
this.elements = document.querySelectorAll( selector );
return this;
}
console.group("id");
foo("#foofoo").print();
console.groupEnd("id");
console.group("class");
foo(".bar").printAll().print();
console.groupEnd("class");
JSFiddle
Basic example with prototype
(function () {
var basic = function (selector) {
this.elements = document.querySelectorAll(selector);
return this;
}
basic.prototype.print = function () {
console.group("in print");
console.log(this.elements[0].innerHTML);
console.groupEnd("in print");
return this;
}
basic.prototype.printAll = function () {
console.group("in printAll");
for (var i = 0; i < this.elements.length; i++) {
console.log(this.elements[i].innerHTML);
}
console.groupEnd("in printAll");
return this;
}
var foo = function (selector) {
return new basic(selector);
}
window.foo = foo;
})();
console.group("id");
foo("#foofoo").print();
console.groupEnd("id");
console.group("class");
foo(".bar").printAll().print();
console.groupEnd("class");
JSFiddle
I am trying to write a little helper class for my ajax chat system i am working on just trying to add basic functions that i may need.
var strings = {
filterWords: ["fool", "dumb", "arse"],
removeSpecialChars: function (str) {
return str.replace(/[^\w\s]/gi, '');
},
killSpace: function (str) {
return str.replace(/\s/g, '');
},
reduceSpace: function (str) {
return str.replace(/\s+/g, ' ');
},
allowLetsAndNums: function (str) {
return str.replace(/[^A-Za-z0-9]/g, ' ');
},
allowLets: function (str) {
return str.replace(/[^A-Za-z]/g, ' ');
},
allowNums: function (str) {
return str.replace(/[^0-9]/g, ' ');
},
wordFilter: function (str) {
var rgx = new RegExp(this.filterWords.join("|"), "gi");
return str.replace(rgx, "****");
}
}
What i am finding is i may need to run multiple methods together i am asking whats the best practise to do this without resulting with below?
alert(strings.wordFilter(strings.reduceSpace(strings.allowLets("efgwge #£235%^#£ fool you a dumb arse432345$%^"))));
Thanks
You could make this a fluent interface, allowing code like this:
var x = new Validation("efgwge #£235%^#£ fool you a dumb arse432345$%^");
alert(x.allowLets().reduceSpace().wordFilter().result());
// alerts "efgwge **** you a **** ****"
Your main code would need to be:
var Validation = function(str) {
this.str = str;
filterWords = ["fool", "dumb", "arse"]
this.removeSpecialChars = function () {
this.str = this.str.replace(/[^\w\s]/gi, '');
return this;
};
this.killSpace = function () {
this.str = this.str.replace(/\s/g, '');
return this;
};
this.reduceSpace = function () {
this.str = this.str.replace(/\s+/g, ' ');
return this;
};
this.allowLetsAndNums = function () {
this.str = this.str.replace(/[^A-Za-z0-9]/g, ' ');
return this;
};
this.allowLets = function () {
this.str = this.str.replace(/[^A-Za-z]/g, ' ');
return this;
};
this.allowNums = function () {
this.str = this.str.replace(/[^0-9]/g, ' ');
return this;
};
this.wordFilter = function () {
var rgx = new RegExp(filterWords.join("|"), "gi");
this.str = this.str.replace(rgx, "****");
return this;
};
this.result = function(){
return this.str;
};
}
Live example: http://jsfiddle.net/fb7en/
You could extend the String prototype:
String.prototype.removeSpecialChars = function () {
return this.replace(/[^\w\s]/gi, '');
}
String.prototype.killSpace = function () {
return this.replace(/\s/g, '');
}
var foo = "This is my§$% String";
document.write(foo.removeSpecialChars().killSpace());
You could add the functions to the String.prototype so you can call the functions like this:
String.prototype.killSpace = function() {
return this.replace(/\s/g, '');
}
String.prototype.reduceSpace = function () {
return this.replace(/\s+/g, ' ');
}
"foo bar".reduceSpace().killSpace(); // => returns foobar
Only downside to this is that you can't iterate over a string with a for..in loop then because it will list the method as a member and there's currently no cross-browser way to make it non-iterable (IE doesn't support it).
You might consider a chainable API for your Object:
var StringFilter = {
_string: '',
string: function (string) {
this._string = string || '';
return this;
},
filterWords: ["fool", "dumb", "arse"],
removeSpecialChars: function () {
this._string = this._string.replace(/[^\w\s]/gi, '');
return this;
},
killSpace: function () {
this._string = this._string.replace(/\s/g, '');
return this;
},
reduceSpace: function () {
this._string = this._string.replace(/\s+/g, ' ');
return this;
},
allowLetsAndNums: function () {
this._string = this._string.replace(/[^A-Za-z0-9]/g, ' ');
return this;
},
allowLets: function () {
this._string = this._string.replace(/[^A-Za-z]/g, ' ');
return this;
},
allowNums: function () {
this._string = this._string.replace(/[^0-9]/g, ' ');
return this;
},
wordFilter: function () {
var rgx = new RegExp(this.filterWords.join("|"), "gi");
this._string = this._string.replace(rgx, "****");
return this;
},
select: function () {
return this._string;
}
};
StringFilter
.string("efgwge #£235%^#£ fool you a dumb arse432345$%^")
.allowLets()
.reduceSpace()
.wordFilter()
.select();
Can I call public method from within private one:
var myObject = function() {
var p = 'private var';
function private_method1() {
// can I call public method "public_method1" from this(private_method1) one and if yes HOW?
}
return {
public_method1: function() {
// do stuff here
}
};
} ();
do something like:
var myObject = function() {
var p = 'private var';
function private_method1() {
public.public_method1()
}
var public = {
public_method1: function() {
alert('do stuff')
},
public_method2: function() {
private_method1()
}
};
return public;
} ();
//...
myObject.public_method2()
Why not do this as something you can instantiate?
function Whatever()
{
var p = 'private var';
var self = this;
function private_method1()
{
// I can read the public method
self.public_method1();
}
this.public_method1 = function()
{
// And both test() I can read the private members
alert( p );
}
this.test = function()
{
private_method1();
}
}
var myObject = new Whatever();
myObject.test();
public_method1 is not a public method. It is a method on an anonymous object that is constructed entirely within the return statement of your constructor function.
If you want to call it, why not structure the object like this:
var myObject = function() {
var p...
function private_method() {
another_object.public_method1()
}
var another_object = {
public_method1: function() {
....
}
}
return another_object;
}() ;
Is this approach not a advisable one? I am not sure though
var klass = function(){
var privateMethod = function(){
this.publicMethod1();
}.bind(this);
this.publicMethod1 = function(){
console.log("public method called through private method");
}
this.publicMethod2 = function(){
privateMethod();
}
}
var klassObj = new klass();
klassObj.publicMethod2();
Do not know direct answer, but following should work.
var myObject = function()
{
var p = 'private var';
function private_method1() {
_public_method1()
}
var _public_method1 = function() {
// do stuff here
}
return {
public_method1: _public_method1
};
} ();