Social Icons

Pages

Показват се публикациите с етикет JavaScript. Показване на всички публикации
Показват се публикациите с етикет JavaScript. Показване на всички публикации

Why and where i should use .prototype in Javascript?


In JavaScript there is no concept of class instead you create an object. It's not difficult, but a little foreign for somebody used to the classical way.

function Person (name,age) {
    this.name = name;
    this.age = age;
    this.getInfo = function() {
        return this.name + ' is ' + this.age + ' years old.' ;
    };
}

var niki= new Person('Niki',30);
niki.age = 29; //want it younger?
alert(niki.getInfo());

In this example however, you will end up with a separate copy of the function for each and every instance of the class, which is simply wasted memory, since the function is identical in each instance. The best way to define methods for classes in this method is to define them outside of the constructor function itself, but as attributes of its prototype. This can be done fairly simply as follows, and solves both issues:
 
function Person (name,age) {
    this.name = name;
    this.age = age;
}
  
Person.prototype.getInfo = function() {
    return this.name + ' is ' + this.age + ' years old.' ;
};

Using this syntax changes nothing in the way you instantiate the object and use its properties and methods.
"Prototype" allows to simulate classes in JavaScript, because JavaScript's inheritance system is -prototypical, and not class-based.
Just think of constructor functions as classes and the properties of the prototype as shared members, ie members which are the same for each instance. In class-based systems, methods are implemented the same way for each instance, so methods are normally added to the prototype, whereas an object's fields are instance-specific and therefore added to the object itself during construction.

 

Solving javascript console.log issue in IE



I recently run into strange issue. My interface work perfectly for all browsers except IE. My code was IE compatible and IE debugger did not show any errors, moreover when i enable the IE debugger everything works?!?! I thought world must hate me.
So i started asking questions myself and after hours of Microsoft swearing, changes and blind testing (could not use IE debugger) found all answers. Issue was related with console.log calls.

Why when i turn on IE debugger tools with F12 and refresh the page evryhting works?

In that case  "console" object exists in the the window name space

Ok so if i disable console.log then my interface will work on IE, but i really need to use console.log? 

Sure you could take out all your console.log statements, but usually you need those around for a little while.
You put this very simple snippet before all your console calls:
if (!window.console) console = {log: function() {}};
Thus your Firefox/Chrome console will still work and you won't get errors on Internet Explorer. With above for browsers which do not support console you create such a object so when you call it somewhere in your code browser will not complain.
Another JS mystery down..

Is JavaScript a pass-by-reference or pass-by-value language?

 

This really confuses a lot of people including me. Short answer is: It's always pass by value, even for object. There's no way to alter the value held by a variable passed as a parameter to function, which would be possible if JS supported passing by reference.

OK, why then when you pass object to function you can change it's members? 

Well for objects the value of the variable is a reference. Because of this, when you pass an object and change its members, those changes persist outside of the function. This makes it look like pass by reference. But if you actually change the value of the object variable you will see that the change does not persist, proving it's really pass by value.

Example:
function changeObject(x) {
  x = {member:"bar"};
  alert("in changeObject: " + x.member);
}
function changeMember(x) {
  x.member = "bar";
  alert("in changeMember: " + x.member);
}
var x = {member:"foo"};

alert("before changeObject: " + x.member);
changeObject(x);
alert("after changeObject: " + x.member); /* change did not persist */

alert("before changeMember: " + x.member);
changeMember(x);
alert("after changeMember: " + x.member); /* change persists */
Output:
before changeObject: foo
in changeObject: bar
after changeObject: foo

before changeMember: foo
in changeMember: bar
after changeMember: bar