Javascript - Scope and This - javascript

I have some code below. the problem I don't understand is why I don't have to refer to 'children' object via this.children but then accessing the firstname or surname, i have to use this.firstname....
Please help me understand why.
function User(first, sur) {
var firstName;
var surName;
var age;
var children = [];
this.firstName = first;
this.surName = sur;
this.getDisplayName = function() {
return this.firstName + ' ' + this.surName;
};
this.getTotalLength = function() {
return (this.firstName.length + this.surName.length);
};
this.displayFullName = function() {
return (this.firstName + ' ' + this.surName);
};
this.changeMaidenname = function(newSurname) {
if (newSurname)
{
this.surName = newSurname;
}
};
this.addChild = function(childUser) {
children.push(childUser);
};
this.numberOfChildren = function() {
return children.length;
};
this.killChild = function(childUser) {
children.forEach(function(item,index)
{
if (item.firstName === childUser.firstName && item.surName === childUser.surName)
{
children.splice(index, 1);
}
}
)
};
};
module.exports.User = User

In js,this keyword is used to create public variables whereas the var limits the scope of that variable to that particular function. :).You cant even access children object unless it is defined this.children=[]

Related

JS using a closure replicate an private set object only available through get/accessor method

I'm trying to create a function that uses a closure to replicate an object.
accessing the getter property within a private function.
function Container(param) {
var person = {
firstName: 'Jimmy',
lastName: 'Smith',
get fullName() {
return this.firstName + ' ' + this.lastName;
},
set fullName (name) {
var words = name.toString().split(' ');
this.firstName = words[0] || '';
this.lastName = words[1] || '';
}
}
}
// Attempting to clone private getter don't know how to access it.
function objectClone(person) {
var orginal = person //Trying to access the private method
var clone = function cloneObj { Object.assign({}, original); }
clone.prototype.spillSecret = function() { alert(this.getfullName()); }
;}
It seems like you're trying to create a new instance of a Container. Firstly, we should fix up that code:
function Container(param) {
this.firstName = 'Jimmy';
this.lastName = 'Smith';
Object.defineProperty(this, 'fullName', {
get: function() {
return this.firstName + ' ' + this.lastName;
},
set: function(name) {
var words = name.toString().split(' ');
this.firstName = words[0] || '';
this.lastName = words[1] || '';
}
});
}
Now, to create a new Container object, we use new:
var person = new Container();
person will have the get and set methods for fullName on it.

Create dynamic prototype like jquery function chain

I try to create a dynamic prototype like jQuery and able to function chain, but I got error without use new and inside of function, return this object correct?
(function() {
var peopleDynamicProto = function(name, age, state) {
this.name = name;
this.age = age;
this.state = state;
if (typeof this.printPerson !== 'function') {
peopleDynamicProto.prototype.printPerson = function() {
console.log(this.name + ',' + this.age + ',' + this.state);
return this;
};
}
if (!this.hasOwnProperty('gender')) {
peopleDynamicProto.prototype.gender = 'male';
return this;
}
}
window.peopleDynamicProto = peopleDynamicProto;
return peopleDynamicProto;
})();
//var person1 = new peopleDynamicProto('john', 23,'CA');
//person1.printPerson();
peopleDynamicProto('john', 23, 'CA').printPerson(); //got error
Anyone know where is the problem?
You have to use "new" if you want to create a new object based off a prototype.
I am not sure what you are trying to do exactly, and why you are trying to create the prototype dynamically. I'm not going to say 100% sure, but I don't think jQuery does that (plus it looks like a very bad practice).
If you're trying to do something like jQuery, where your class is chainable and can be chained as (new peopleDynamicProto(...)).print() or peopleDynamicProto(...).print(), then you can do something like this:
function peopleDynamicProto(name) {
if (this instanceof peopleDynamicProto) {
/* initialize attributes here */
this.name = name;
} else {
return new peopleDynamicProto(name);
}
}
peopleDynamicProto.prototype.printPerson = function() {
console.log( this.name );
return this;
}
Now you should be able call it in both ways:
peopleDynamicProto('john').printPerson();
(new peopleDynamicProto('john')).printPerson();
If you don't care about supporting both ways, then you can just return an object, e.g.:
function peopleDynamicProto(name) {
return {
name: name,
printPerson = function() {
console.log( this.name );
return this;
}
};
}
peopleDynamicProto('John').printPerson();
(There are other ways of doing that)
I think the reason why you are getting such an error is because what you are returning here is a function not an object but you are trying to access a property of an object.
For eg,
If you write as:
**
var myFun = function(){
this.message = "TEST";
}
**
you cannot access myFUN.message because here myFun is a function not an object of this function constructor.
To access its property, you need to do something like
(new myFun()).message;
Similarly in you case what you return is "peopleDynamicProto" which is a function only, not an object of this function constructor.
To access method printPerson (which is a member), you need to create an instance of peopleDynamicProto and access its member
I guess you missed the new operator- see this for reference
The new operator creates an instance of a user-defined object type or
of one of the built-in object types that has a constructor function.
See demo below:
(function() {
var peopleDynamicProto = function(name, age, state) {
this.name = name;
this.age = age;
this.state = state;
if (typeof this.printPerson !== 'function') {
peopleDynamicProto.prototype.printPerson = function() {
console.log(this.name + ',' + this.age + ',' + this.state);
return this;
};
}
if (!this.hasOwnProperty('gender')) {
peopleDynamicProto.prototype.gender = 'male';
return this;
}
}
window.peopleDynamicProto = peopleDynamicProto;
return peopleDynamicProto;
})();
var person1 = new peopleDynamicProto('john', 23,'CA');
person1.printPerson();
new peopleDynamicProto('john', 23, 'CA').printPerson(); //got error
you cant create prototype inside contructor. see this explanation
defining-prototype-methods-inside-the-constructor
use this keyword instead of prototype:
(function(){
var peopleDynamicProto = function(name, age, state){
this.name = name;
this.age = age;
this.state = state;
this.printPerson = function(){
console.log( this.name + ',' + this.age + ',' + this.state );
return this;
}
if( !this.hasOwnProperty('gender') ){
peopleDynamicProto.prototype.gender = 'male';
return this;
}
}
window.peopleDynamicProto = peopleDynamicProto;
return peopleDynamicProto;
})();
peopleDynamicProto('john', 23,'CA').printPerson();
or use prototype outside constructor(this is better since function object not recreated each time object created)
(function(){
var peopleDynamicProto = function(name, age, state){
this.name = name;
this.age = age;
this.state = state;
if( !this.hasOwnProperty('gender') ){
peopleDynamicProto.prototype.gender = 'male';
return this;
}
}
if( typeof this.printPerson !== 'function' ){
peopleDynamicProto.prototype.printPerson = function(){
console.log( this.name + ',' + this.age + ',' + this.state );
return this;
};
}
window.peopleDynamicProto = peopleDynamicProto;
return peopleDynamicProto;
})();

How to create a window instance with javascript?

I have a 'helper' object in a file called 'helper.js'
helper = {};
helper.hello = function(name) {
return 'hello' + name;
};
helper.bye = function(name) {
return 'bye' + name;
};
How can I make a window instance of this object so that my 'helper.js' could be visible to others js files?
Thanks!
helper = {};
helper.hello = function(name) {
return 'hello' + name;
};
helper.bye = function(name) {
return 'bye' + name;
};
window.helper=helper ;

Find name of property owner in javascript

An example from some javascript course that I am following:
var Tornado = function(name, cities, degree) {
this.name = name;
this.cities = cities;
this.degree = degree;
};
Tornado.prototype = {
nCities: function() {
return this.cities.length
},
valueOf: function() {
return this.nCities() * this.degree;
},
toString: function() {
return this.cities[0][0].toString() + " " + this.name;
}
}
cities = [["Washington", 1], ["Rotterdam", 2]]
var x = new Tornado("crazy", cities, 3)
console.log(x.nCities())
console.log(x.valueOf())
console.log(x + 16)
console.log(x.toString() + "... wow!")
Object.prototype.findOwnerOfProperty = function(propName) {
var currentObject = this;
while(currentObject !== null) {
if(currentObject.hasOwnProperty(propName)) {
return currentObject;
} else {
currentObject = currentObject.__proto__;
}
}
return "No property found!";
};
console.log(x.findOwnerOfProperty("toString"));
The findOwnerOfProperty function returns the object where the property is defined. This is nice, but it would be nicer to also have the name of that object (Tornado.prototype in this example), how can I do that?
No built-in solution. but you can make a property
this._constructor = arguments.callee.name;
inside Tornado function and make a
getConstructor:function(){
return this._constructor;
}
inside prototype.
BTW , forgot to mention that you should remake
var Tornado = function
to:
function Tornado

JavaScript Inheritance constructor.prototype

I can't understand line 4.
If I write like derive.constructor.prototype,
The error will occur.
And also, What is base.apply(derive, baseArgs);?
I thought that I can do like base(baseArg) I couldn't do that.
function initializeBase(derive, base, baseArgs) {
base.apply(derive, baseArgs);
for(var prop in base.prototype) {
var proto = derive.constructor.prototype;
if(!proto[prop]) {
proto[prop] = base.prototype[prop];
}
}
}
var Member = function(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
};
Member.prototype.getName = function() {
return this.firstName + ' ' + this.lastName;
};
var SpecialMember = function(firstName, lastName, role) {
initializeBase(this, Member, [firstName, lastName]);
this.role = role;
};
SpecialMember.prototype.isAdministrator = function() {
return (this.role == 'Administrator');
};
var mem = new SpecialMember('Kotaro', 'Hayafune', 'Administrator');
document.writeln('Name: ' + mem.getName() + '<br>');
document.writeln('Administrator: ' + mem.isAdministrator());
Not sure what your variables contain here but usually if you want the prototype you would write:
var proto = derive.prototype;
and if you wanted the constructor you'd write:
var constr = derive.prototype.constructor;

Categories

Resources