I am running the below code in nodejs
this.x = 'global x';
class Point {
constructor(x) {
this.x = x;
}
toString() {
return this.x;
}
}
var obj = new Point(1);
obj.toString();// 1 as expected
var a = obj.toString;// Here I can do something like var a = obj.toString.bind(obj); to get rid of the situation. But I am curious to know how can we write `var self = this`;
a();// TypeError: Cannot read property 'x' of undefined
a(); throws the error.
How can we do like var self = this; as we used to do in es5 to prevent such a situation?
How can we do like var self = this; as we used to do in ES5?
You can do it exactly like you did in ES5 - ES6 is completely backward-compatible after all:
class Point {
constructor(x) {
this.x = x;
var self = this;
this.toString = function() {
return self.x;
};
}
}
However, that's really not idiomatic ES6 (not talking about const instead of var). You'd rather use an arrow function that has a lexical-scoped this, so that you can avoid this self variable completely:
class Point {
constructor(x) {
this.x = x;
this.toString = () => {
return this.x;
};
}
}
(which could even be shortened to this.toString = () => this.x;)
If you don't want to create all your class methods inside the constructor as Bergi suggests (which seems ugly to me) then you can enable ES7 features and define your method using arrow syntax:
class Point
{
constructor(x)
{
this.x = x;
}
toString = () =>
{
return this.x;
}
}
This has the same effect as saying:
constructor(x)
{
this.toString = this.toString.bind(this);
}
But it still doesn't allow you to access the dynamic this and the lexical this (self) in the same function. So this is not a complete answer.
I hope someone can edit this answer to show how we can access both types of this in a class method without defining every method in the class constructor.
Related
If I run
"string".toUpperCase();
the code should return
STRING
how does this work, from what I know functions can only be called like this;
myFunction("args");
how would I make a function that is called the same way as .toUpperCase()
You can store a function directly on an object.
let foo = {
bar() {
}
};
foo.bar()
Or you can store one indirectly on an object's prototype.
String.prototype.bar = function() {
return "my " + this;
}
let foo = "string";
foo.bar(); // "my string"
Adding methods to existing prototypes (monkey patching) is generally considered to be a bad idea, but defining new prototypes with methods is often used when implementing prototypal inheritance.
function Vehicle() {
this.fuel = 100;
}
Vehicle.prototype.drive = () => {
this.fuel -= 1;
}
let car = new Vehicle();
let train = new Vehicle();
car.drive();
train.drive();
Here is a reference.
The format is like Class.method().
On your example "string".toUpperCase();, the "string" is wrapped by the String Class :) since it is a primitive.
.method() is what they sometimes call function.
Actually, on the browser, when you define something like:
function happy(){
console.log("learning");
}
and you called it like happy(), it is equivalent to window.happy(). Try it on you web console to validate.
Here is the example from the reference given above.
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
get area() {
return this.calcArea();
}
calcArea() {
return this.height * this.width;
}
}
const square = new Rectangle(10, 10);
console.log(square.area);
Here is your solution;
String.prototype.myfunction = function () {
return this.toUpperCase();
}
>>> "hello".myfunction()
"HELLO"
I'm looking for a pattern that both allows me to create a private scope that my function prototype has access to and I need to be able to access the instance from within that scope.
For example, this is how I am currently achieving "private methods" (disregard what the code actually does, just look at the structure.)
function InfoPreview() {
this.element = document.createElement('div');
}
//Private Methods
InfoPreview.prototype.__newLine = function () {
this.element.appendChild(createElement({tagName:'br'}));
};
InfoPreview.prototype.__padLeft = function(level) {
var padding = createElement({tagName: 'span'});
this.element.appendChild(padding);
$(padding).width(level * 10);
};
InfoPreview.prototype.__print = function(string) {
var span = createElement({ tagName: 'span', textContent: string });
this.element.appendChild(span);
this.element.style["margin-right"]='10px';
};
InfoPreview.prototype.__puts = function(string) {
this.__print(string);
this.__newLine();
};
//Public Methods
InfoPreview.prototype.update = function(info) {
$(this.element).empty();
for (var record in info) {
this.__puts(record);
}
};
Notice that I am not creating private methods at all, just utilizing a naming convention. Additionally notice that I have no way to cache chain-lookups, such as this.element.
I would like to create a private scope by utilizing a revealing module pattern, like this:
InfoPreview.prototype = (function() {
var self = this, //<- `this` is actually the global object now.
el = self.element;
var newLine = function () {
el.appendChild(createElement({tagName:'br'}));
};
var padLeft = function(level) {
var padding = createElement({tagName: 'span'});
el.appendChild(padding);
$(padding).width(level * 10);
};
var print = function(string) {
var span = createElement({ tagName: 'span', textContent: string });
el.appendChild(span);
el.style["margin-right"]='10px';
};
var puts = function(string) {
print(string);
newLine();
};
var update = function(info) {
$(el).empty();
for (var record in info) {
puts(record);
}
};
return {
update: update
};
})();
The above approach doesn't work however, because the value of this within the IIFE is the global object, not the instance. I need a way to access the instance.
Is there any downside of using a constructor pattern?
function Foo(constructorArg) {
/* private variables */
var privVar = 'I am private',
cArg = constructorArg;
/* public variables */
this.pubVar = 'I am public';
/* private function */
function privFunc() {
return 'I am a private function';
}
/* public function */
this.publicFunc = function() {
return 'I am a public function and I call privVar->"' + privVar + '" and privFunc->"' + privFunc() + '"';
}
}
var foo = new Foo('something');
console.log('foo.pubVar', foo.pubVar); //ok
console.log('foo.publicFunc()', foo.publicFunc()); // ok
console.log('foo.privVar', foo.privVar); // undefined
console.log('foo.privFunc', foo.privFunc()); //error
Why you should use it (as requested in comments):
Simply put, because it is the only (sane) way of creating a "true private scope", which was your question.
The alternative is using a convention which tell developers what properties and methods are private, usually by prefixing them with an underscore _, which you already implemented but disliked.
Note that constructor and prototype are different things and enable you to do different stuff. Nothing prevents you from mixing both up.
Memory usage
Regarding memory usage, in modern js engines, such as Google's V8 JavaScript Engine, the constructor pattern might actually be faster.
V8 has hidden types created internally for objects at runtime; objects with the same hidden class can then use the same optimized generated code.
For example:
function Point(x, y) {
this.x = x;
this.y = y;
}
var p1 = new Point(11, 22);
var p2 = new Point(33, 44);
// At this point, p1 and p2 have a shared hidden class
p2.z = 55;
// warning! p1 and p2 now have different hidden classes!
Prototype chaining always require two lookups, so it might even be a tiny inny LITTLE bit slower. Note: Can't back up on this, jsperf.com is down!
Constructor pattern is dirty (sic)
Performance was my reason. I hadn't realized that. However it still feels dirty to me
I don't know why you feel the constructor pattern is dirty. Maybe it's because it has some "specifics", limitations and potential pitfalls you should be aware
this can mean different things
It's easy to forget the new keyword causing weird and hard to debug bugs due to shared state
You can't easily split your object across multiple files (without resorting to a build tool or some 3rd party injector)
However, 1 and 2 are also true for prototype declaration style so...
if you feel this is not adequate, you might want to look at the module pattern.
Within each function, you will have access to the this value you want.
var Example = function() {};
Example.prototype = (function() {
var privateUpdate = function() {
document.getElementById('answer').innerHTML = this.foo;
}
return {
update: privateUpdate
}
})();
var e = new Example();
e.foo = 'bar';
e.update();
<div id="answer"></div>
As a variant on what Pointy is suggesting, you can try this pattern;
infoPreview.prototype = (function() {
var self = null;
var update = function(info) {
....
};
var firstUpdate = function(info) {
self = this;
functions.update = update;
update(info);
}
var functions = {
update: firstUpdate
};
return functions;
})();
Maybe something like that, without prototyping :
https://jsfiddle.net/ynwun1xb
var Fn = function(el) {
this.el = el;
var myMethod = function() {
console.log('do something in method with element', this.el);
}.bind(this);
return {
myPublicMethod: function() {
return myMethod();
}
}
}
var instancedFn = new Fn('first instance element')
.myPublicMethod()
;
var instancedFn2 = new Fn('second instance element')
.myPublicMethod()
;
I'm new to Javascript and was wondering how a public variable in a prototype can be modified.
function Thing (val)
{
this.x = val;
this.addToX = function (valIn)
{
this.x += valIn;
};
}
function ChildThing ()
{
this.y = 55;
}
ChildThing.prototype = new Thing(10);
var frank = new ChildThing();
console.log("out1: " + frank.x);
frank.addToX(10);
console.log("out2: " + frank.x);
This code takes the value in the prototype x which is 10 and adds 10 to it in the addToX function. The new x value is stored in the top level object rather than replacing the current x value in the prototype.
Is there a way to overwrite the existing x in the prototype or am I using Javascript wrong?
That depends. What would be the point of altering x on the prototype? Generally you don't want to chang shared properties. But I imagine that there could be a use case (generating new id?).
As for the question: you can simply do:
this.addToX = function(valIn) {
ChildThing.prototype.x += valIn;
};
Again I do not advice doing it.
EDIT You can make it without referencing the child by defining the prototype before setting it as a prototype, i.e.
var my_proto = new Thing(10);
ChildThing.prototype = my_proto;
and then
this.addToX = function(valIn) {
my_proto.x += valIn;
};
Or you can even play with the singleton pattern.
What you seem to be wanting is very similar to what static members are in classical languages. It's very misleading to call a method on an object instance and have that method modify the state of other objects outside of it's scope. Therefore, I believe you shounldn't be relying on prototypes at all for this behavior. Here's what you could do to mimic static members.
function SomeClass() {}
SomeClass.staticMember = 'initial value';
SomeClass.changeStaticMember = function (val) { this.staticMember = val; };
SomeClass.changeStaticMember('another value');
I believe the code above is less cryptic and better at communicating the behavior. However if you still want to share mutable values across instances through the prototype you could simply avoid writing the property directly as a primitive value, but rather wrap it within a mutable shared object like below. Note that the whole inheritance hierarchy will share the same x value.
//Mutable class to encapsulate the value of X
function XValue(val) {
this.value = val;
}
XValue.prototype = {
constructor: XValue,
valueOf: function () { return this.value; },
set: function (val) { this.value = val; },
add: function (val) { this.value += val; }
};
function Thing(x) {
this.x = x;
}
Thing.prototype = {
constructor: Thing,
_x: new XValue(), //shared mutable object representing the value of X
get x() { return this._x.valueOf(); },
set x(val) { this._x.set(val); },
addToX: function (val) { this._x.add(val); }
};
function ChildThing() {
Thing.call(this, 10); //call parent constructor
}
ChildThing.prototype = Object.create(Thing.prototype);
//helper for snippet
function log(text) {
var span = document.createElement('span');
span.innerHTML = text;
document.body.appendChild(span);
document.body.appendChild(document.createElement('br'));
}
var ct = new ChildThing();
ct.addToX(10);
log('ct.x → ' + ct.x);
log('Thing.prototype.x → ' + Thing.prototype.x);
I was wondering how I could make private variables in javascript through clojure. But still have them cloned when using Object.create.
var point = {};
(function(){
var x, y;
x = 0;
y = 0;
Object.defineProperties(point, {
"x": {
set: function (value) {
x = value;
},
get: function() {
return x;
}
},
"y": {
set: function (value) {
y = value;
},
get: function () {
return y;
}
}
});
}());
var p1 = Object.create(point);
p1.x = 100;
console.log(p1.x); // = 100
var p2 = Object.create(point);
p2.x = 200;
console.log(p2.x); //= 200
console.log(p1.x); //= 200
I got this technique from http://ejohn.org/blog/ecmascript-5-objects-and-properties/ but it got this limitation that the closure variables is the same on all Objects. I know this behaviour on javascript is supposed but how can I create true private variables?
I know this behaviour on javascript is supposed but how can I create true private variables?
You can't, there is no private in ES5. You can use ES6 private names if you want.
You can emulate ES6 private names with ES6 WeakMaps which can be shimmed in ES5. This is an expensive and ugly emulation, that's not worth the cost.
When you need to add private variables to just one object which was created with Object.create you can make this:
var parent = { x: 0 }
var son = Object.create(parent)
son.init_private = function()
{
var private = 0;
this.print_and_increment_private = function()
{
print(private++);
}
}
son.init_private()
// now we can reach parent.x, son.x, son.print_and_increment_private but not son.private
If you want you can even avoid unnecessary public function init_private like this:
(function()
{
var private = 0;
this.print_and_increment = function()
{
print(private++);
}
}
).call(son)
Bad thing is that you could not append private members with several calls. The good thing is that this method is quite intuitive in my opinion.
This code was tested with Rhino 1.7 release 3 2013 01 27
What's the advantage of using a constructor function like so:
var MyLibrary = new function(){
var self = this;
self.MyLibrary = function(){
// init code
}
}
Instead of simply writing code inside the object?
var MyLibrary = new function(){
// init code
}
Neither of those are quite right, although the second one might work, but isn't really an object, more like a singleton(but in a weird way). Here's an example of a class with a constructor:
// Class & Constructor definition
function Rectangle(w,h) {
this.width = w;
this.height = h;
}
// Now your class methods go on the prototype object
Rectangle.prototype.area = function() {
return this.width * this.height;
}
Now to use this class:
var myRect = new Rectangle(3,4);
myRect.area();
You can also define a class by saving the 'constructor' to a var using anonymous functions instead of named functions:
// Class & Constructor definition
var Rectangle = function(w,h) {
this.width = w;
this.height = h;
}
// Now your class methods go on the prototype object
Rectangle.prototype.area = function() {
return this.width * this.height;
}
Well, if you're using prototype inheritance to create new classes, you'll do something like this:
function MyBaseClass() {
// common stuff here
}
function MySubClass() {
// subclass-specific stuff here
}
MySubClass.prototype = new MyBaseClass();
That last line is required to establish the inheritance chain. However, it also has the side-effect of executing the body of MyBaseClass, which might cause problems (particularly if the MyBaseClass function is expecting arguments).
If you don't want that to happen, do something like this:
function MyBaseClass() {
this.init = function() {
// initialisation stuff here
}
// common stuff here
}
function MySubClass() {
// subclass-specific stuff here
this.init();
}
MySubClass.prototype = new MyBaseClass();
The initialisation code in init is now only executed when you create an instance of MySubClass.