MyFunnyDev » JavaScript

debounce in JavaScript

Michał Kuklis — Sun, 05 Jun 2011 03:43:02 +0000

I ran into a situation recently where a function would get executed repeatedly after given timeout. I wanted to make sure that only last execution was taken into the consideration and I came up with:

now I can use it like this:

function print(value) {
console.log(value);
}

var printD = debounce(print, 100);
printD(1);
printD(2);
printD(3);

With this approach only last call will get executed with the value 3.

prototype, [[Prototype]], proto, constructor in JavaScript

Michał Kuklis — Sun, 08 May 2011 02:04:20 +0000

prototype, [[Prototype]], __proto__, constructor can be confusing. Here are a few notes which I’m writting mostly for myself but maybe it will help somebody else:

prototype from the Function point of view:

every function has access to a publically available prototype property:

function Foo() {}
console.log(Foo.prototype); //Object

the value of the prototype property references a prototype object
the prototype object contains an attribute called constructor. The value of the constructor attribute references the function itself when the function is orginally created.

console.log(Foo.prototype.constuctor === Foo); // true

prototype from the object point of view:

every object has access to prototype object
the prototype is not publicly accessible from the object. The object has an implicit access to the prototype via internal [[Prototype]] property
when object is created the value of the [[Prototype]] implicitly references the same object as prototype property of the constructor function

// pseudo code
var foo = new Foo();
foo.[[Prototype]] => Prototype <= Foo.prototype

some implementations expose a public attribute on objects called __proto__ which can be used to access prototype object

(You should never relay on __proto__ since it’s not a standard. I’m using it here for demo purposes.)

console.log(foo.__proto__ === Foo.prototype) // true

it’s important to mention that if the value of the prototype attribute attached to the function changes, the object created before the change happens will still point to the old Prototype object.

Foo.prototype = {};
console.log(foo.__proto__ === Foo.prototype) // false

Here are few more examples which illustrate it:

Please check this exceptional article written by Dmitry A. Soshnikov if you want to learn more about the topic.

object literals chaining via prototype in JavaScript

Michał Kuklis — Sun, 27 Feb 2011 05:54:59 +0000

Recently I played with the idea of chaining object literals via prototype. Here is what I came up with:

and an example usage:

var a = {a: 1}, b = {b: 2}, c = {c: 3},
var chained = chain(a, b, c);
console.log(chained.c); // 3

Creating new objects in JavaScript

Michał Kuklis — Wed, 12 Jan 2011 07:35:26 +0000

I’m writing this to remind myself about what happens when new object is constructed in JavaScript. This is based on the knowledge I have so far. Please let me know if you find something which is not correct.

Every object in JavaScript has a property called [[Prototype]] which is hidden and not accessible. The exceptions are functions which are also objects in JavaScript. Each function has an additional public property called prototype.

This property is used when setting up a prototypal inheritance. It’s important to mention that public prototype property is not equal to the private hidden [[Prototype]] property.

In order to create a new object of the specific type the constructor has to be defined first. In JavaScript constructors are just regular functions. For example:

// function which will be used to construct new object (constructor)
function Foo() {}

A new object can be created with the operator ‘new’:

// new object is created
var foo = new Foo;

The operator ‘new’ in the line above does a few things:

1) it creates a new object with the [[Prototype]] property
2) the [[Prototype]] property of the newly created object is set to the prototype of the function used as a constructor to create the object. This sounds complicated but it’s actually pretty simple. Let’s take a look at this code:

// __proto__ is a visible
// in some browsers (Chrome, Safari, FF)
// and it's deprecated now: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/proto
// the [[Prototype]] property is set to the prototype of the constructor (function)
console.log(foo.__proto__ === Foo.prototype) // true

3) The newly created object is passed to Foo() as the implicit parameter ‘this’
4) The object ‘this’ is returned and assigned to the variable foo

Foo’s public prototype property is an object itself and has access to it’s own [[Prototype]] property. On top of that it also has an extra property called constructor which points back to function Foo.

We can test it with:

console.log(Foo.prototype.constructor === Foo) // true

Thanks to the prototypal nature of JavaScript we can access the properties of the Foo’s prototype directly from foo. Since we alredy know that:

console.log(foo.__proto__ === Foo.prototype) // true

and:

console.log(Foo.prototype.constructor) // Foo

based on the above we know that:

console.log(foo.constructor === Foo.prototype.constructor) // true

What actually happens when we try to access constructor property from foo is that first the runtime looks up the property on the object foo level and it doesn’t find it:

console.log(foo.hasOwnProperty('constructor')) // false

then it looks up the property in the object referenced by [[Prototype]] property.
Since in this case we know that the [[Prototype]] of foo points to the public prototype property on Foo, the constructor is present and visible.

Here are the tests together:

function Foo() {}
var foo = new Foo;
console.log(Foo.prototype.constructor === Foo) // true
console.log(foo.__proto__ === Foo.prototype) // true
console.log(Foo.prototype.constructor) // Foo
console.log(foo.constructor === Foo.prototype.constructor) // true
console.log(foo.hasOwnProperty('constructor')) // false

JavaScript closures

Michał Kuklis — Fri, 25 Jun 2010 05:37:54 +0000

For given content:

<div id="test0">change mediv>
<div id="test1">change mediv>
<div id="test2">change mediv>
<div id="test3">change mediv>

The code:

for (var i = 0; i < 4; i++) {
$('#test' + i).click(function(){
$(this).html(i);
});
}

will print (every time any of the elements is clicked):

4
4
4
4

Here is how this could be solved with the closure:

for (var i = 0; i < 4; i++) {
(function (i) {
$('#test' + i).click(function () {
$(this).html(i);
});
})(i);
}

JQuery 1.3

Michał Kuklis — Fri, 16 Jan 2009 03:51:00 +0000

New release contains new selector engine called Sizzle (the fastest css selector out there) and live events (which work similar to the live query plugin).

More details can be found here

Peppy fast css3 selector engine

Michał Kuklis — Wed, 29 Oct 2008 02:41:48 +0000

Peppy is a small and very fast css3 selector written by James Donaghue. Here is how you can use it:

var selector = "div";
var context = "#elementId";
var q = peppy.query(selector, context);

JavaScript closures

Michał Kuklis — Wed, 17 Sep 2008 02:30:25 +0000

Nice presentation about JavaScript closures posted by Stuart Langridge

MyFunnyDev » JavaScript

debounce in JavaScript

prototype, [[Prototype]], __proto__, constructor in JavaScript

object literals chaining via prototype in JavaScript

Creating new objects in JavaScript

JavaScript closures

JQuery 1.3

Peppy fast css3 selector engine

JavaScript closures

prototype, [[Prototype]], proto, constructor in JavaScript