Develop Reference

Pass event object to setter method in event callback

I am working with createjs library.
I have the following class:
class Person {
constructor(){
this.name = 'John';
}
set updateName(event){
this.name += event.key;
}
}
Next, I instantiate the object like this:
var human = new Person();
I am trying to update the name of the person upon each keystroke like this:
window.addEventListener.on('keydown', human.updateName);
However, I get an error of "Cannot read property 'handleEvent' of undefined".

human.updateName attempts to read the updateName property. Since you haven't defined a getter for it, the result of that is undefined. Apparently whatever you're passing it to (window.addEventListener.on) expects to be passed something other than undefined.
To pass the actual setter function is a bit tricky, you have to get access to it via getOwnPropertyDescriptor and then pass it in:
window.addEventListener.on('keydown', Object.getOwnPropertyDescriptor(human, "updateName").set);
In order to ensure that the right person was updated, you'd probably need bind as well:
window.addEventListener.on('keydown', Object.getOwnPropertyDescriptor(human, "updateName").set.bind(human));
Alternately, it would be rather simpler just to use an arrow function as glue:
window.addEventListener.on('keydown', e => {
human.updateName = e;
});
Side note: updateName is the kind of name you'd give a method, not a property. Normally, a property would be called simply name.
Perhaps you intended it to be a method instead? If so:
class Person {
constructor(){
this.name = 'John';
}
updateName(event){ // No `set` on this line
this.name += event.key;
}
}
...and
window.addEventListener.on('keydown', human.updateName.bind(human));
or
window.addEventListener.on('keydown', e => {
human.updateName(e);
});

Javascript: Prototype on a function which accepts an argument

I'm having trouble achieving something in Javascript, and also having trouble explaining it. I'm writing an API and I want the developer to be able to write the following code:
dashboard('name1').createPanel('name2');
The problem is I can't figure out a way to create a function called "dashboard" (which accepts an argument 'name1') while also providing a prototype called createPanel.

You have functions and object. An example:
// A normal function
function dashboard(name) {
}
dashboard("name1");
You can also prototype this function if you do a new you will have to object of class dashboard. So the example:
function dashboard( name ) {
// As class
this.name = name;
}
dashboard.Prototype.createPanel = function(name) {
this.name = name;
return this; // return the reference
}
var x = new dashboard("name1"); // create object
x.createPanel( "Name2" );
// x.name will be "Name2"
What you want is chaining functions. All you need to do is return the object where you want to call the next function from. If you return this every time you can chain functions of that object like:
// extending the class with addProperty for chainging example
dashboard.Prototype.addProperty = function(key, value){
this[key] = value;
return this; // To enable chaining, return reference
}
var x = new dashboard("name1");
x.createPanel("Niels").addProperty("A", "B").addProperty("B", "C");
We can chain on and on. All you need to do is return the reference where you want to continue chaining from (normally the this object). But can be every object you want.

Javascript revealing Module, return private field

I'm quite confused by the revealing module pattern, when return a "private field" to outside world.
Here is the code,
var vm2 = (function(){
var
name = 'sean',
changename = function(v){
this.name=v;
};
return {
name: name,
foo: name,
changename:changename
};
}());
vm2.changename('jasper');
console.log(vm2.name);
console.log(vm2.foo);
I was confused by the result, that vm2.name is 'jasper' while vm2.foo is still 'sean',
can someone help me understand it?

The "changename" function only updates the "name" property of the object; it doesn't mess with the local variable called "name" that's present in the closure, and it doesn't mess with "foo". Thus the "foo" property of the object retains it's initial value no matter what you pass to "changename".
So step by step:
The variable "vm2" is initialized by that anonymous function. It's value is an object with three properties.
The call to the "changename" function is made via the property reference on "vm2". That will cause this to be bound to that object while "changename" executes.
Inside "changename", the "name" property of the object referenced by this (which is the "vm2" object) is updated to whatever value is passed as the parameter.
Note that once "vm2" is initialized, nothing in that code touches "foo".

How about this case? why the person is still the private one?
var vm = (function () {
var person = { name: "jasper" };
var changename = function (v) {
//person.name = v;
person = { };
};
return {
person: person,
changename: changename
};
})();
vm.changename("sean");
alert(vm.person.name);

javascript prototype property with no value set yet

So basically I made a dummy master Object and then added a property to all its children via the prototype property. But of course it is an empty property. While doing the conditional check using the in operator to see if the object had the new property it turned out to be false and output, "Nothing there." Is this because the property doesn't have a value yet?
function Master(age, sex, location)
{
this.age = age;
this.sex = sex;
this.location = location;
}
var me = new Master(99, "Male", "Texas, USA");
Master.prototype.username;
if("username" in me)
{
document.write("The prototype put the property there.");
}
else
{
document.write("Nothing there.<br />");
}

It is because there is no property yet. Just attempting to read the property does not spring it into existence. Master.prototype.username; is the same as saying window.foo - it just evaluates to undefined, but nothing else happens. If you want to set a value for it, try:
Master.prototype.username = undefined;
or better
Master.prototype.username = null;
The difference between null and undefined is pretty much that it is easier to check if a property is null; and if you pass some functions the value undefined as an argument, they think you did not pass any value at all.

Forcing the context

I have this class where I have a private property and a public method for access:
Person = function () {
this.Name = "asd";
var _public = new Object();
_public.Name = function (value) {
if (value == undefined) { //Get
return this.Name
} else {
this.Name = value; //Set
}
};
return _public;
};
I want to force the context in _public.Name for access a this.Name.
I know the technique of closure, but I want to see if I can force a context.
I found a technique to do it, extend object Function:
Function.prototype.setScope = function (scope) {
var f = this;
return function () {
f().apply(scope);
}
}
And my class becomes:
Person = function () {
this.Name = "asd";
var _public = new Object();
_public.Name = function (value) {
if (value == undefined) {
return this.Name
} else {
this.Name = value;
}
}.setScope(this);
return _public;
};
So I can force correctly the context, but I can not pass value and can not, however, return this.Name.

Not
f().apply(scope);
just
f.apply(scope);
(No () after f.) You want to use the apply function on the function f object, not call the function f and access apply on its return value.
To also pass on the arguments that your function in setScope receives, add this:
f.apply(scope, arguments);
arguments is an implicit argument to all functions, which is a pseudo-array of the actual arguments passed to the function at runtime. apply accepts any array-like thing as its second parameter to specify the arguments to use when calling the underlying function.
I'd also have it return the return value:
return f.apply(scope, arguments);
So setScope becomes:
Function.prototype.setScope = function (scope) {
var f = this;
return function () {
return f.apply(scope, arguments);
}
}
Live example
Note that the usual name for this function, and the name it has in the new ECMAScript5 standard, is bind (Section 15.3.4.5; ECMAScript5's bind also lets you curry arguments, which isn't done by this implementation). setScope is a particularly unfortunate name, because it doesn't set the scope, it sets the context.
Having said all that, there's no reason you need setScope in your Person constructor. You can just do this:
Person = function () {
var self = this;
this.Name = "asd";
var _public = new Object();
_public.Name = function (value) {
if (value == undefined) {
return self.Name;
} else {
self.Name = value;
}
};
return _public;
};
Live example
But using bind (aka setScope) can be useful in places where you don't want a new closure over the context in which you're doing it.
Off-topic: The way you're specifying Person will break certain things people might expect to work, such as:
var p = new Person();
alert(p instanceof Person); // Expect "true", but in your case will be "false"
...because you're replacing the object new created for you, but returning a different object out of your constructor (which overrides the default).
Rather than creating a new object and returning that in your constructor, allow the object constructed for you by new to be the object (and thus the Person relationship is maintained), but you can still get truly private variables and use accessors:
function Person() {
// Private variable
var name = "asd";
// Accessor function
this.Name = function(value) {
if (typeof value === "undefined") {
return name;
}
name = value;
};
}
Live example
As you can see, this is dramatically simpler, and it preserves the instanceof relationship. Note that we're not qualifying our references to name within Name at all, and so we're using the local variable in the constructor call in which our Name function, which closes over it, was created.
I've also taken the liberty there of giving the constructor function a name, because I'm not a fan of anonymous functions. I should have given the accessor a name as well:
function Person() {
// Private variable
var name = "asd";
// Accessor function
this.Name = Person_Name;
function Person_Name(value) {
if (typeof value === "undefined") {
return name;
}
name = value;
}
}
Off-topic 2: The overwhelming convention in JavaScript code is to use initial caps on function names only for constructor functions (like Person), and not on other kinds of functions (like Name). You're free to do whatever you like, of course, but I thought I'd mention the convention, as it makes it easier for other people to read your code.
Worth noting: All of these techniques result in every single Person object having its own copy of the accessor function. If there are going to be a lot of these objects, that could be a memory issue. If there are only going to be a few, that's fine.

First thing, I think the correct way to go about this is the "closure" method, as the syntax is easier and simpler to understand and makes more sense and most object oriented code written in Javascript is written that way. Another thing to note is that in your method, the "private" member can be accessed from outside by accessing Person.Name (instead of (new Person()).Name).
That being said, it seems that you want something like Prototype.JS's bind method, which allows you to bind a function reference as a method call to a specific object, and also passes all the arguments correctly (including allowing preloaded arguments).
Look at Prototype.JS source for the complete implementation, but a simple implementation of this semantic might look like this:
Function.prototype.bind = function(context) {
var callee = this;
var args = Array.prototype.slice.call(arguments,1);
return function() {
var newargs = args.concat(Array.prototype.slice.call(arguments,0));
return callee.apply(context, newargs);
};
};

It is difficult to understand what you are trying to achieve. But if I guess that you are trying to create a Person class with a name method to get/set the person's name, here is my suggestion:
function Person() {
this._name = undefined; // not required but is better than assigning a fake name
return this;
}
Person.prototype.name = function( _name ) {
if ( _name === undefined ) return this._name; // get
return this._name = _name; // set
}
Note that I have defined the name function with a lower case first letter. This is standard practice in JavaScript where only constructors are usually capitalized. To use this class you do:
person = new Person();
person.name( "Ermes Enea Colella" );
alert( person.name ); // displays "Ermes Enea Colella"
There is no need to bind any context with this method, so you may be looking for something else. If you can clarify your need, I'll be happy to edit my answer.
I hope this helps.