Javascript set attribute function doesn't work

Question

I'm a begginer at Javascript and programming in general, my english is not good(sorry if there's any grammar error) but this is my problem:

When I create a class in JS and I create a function to set an attribute of its objects, the browser does not recognise the function. example:

var myObject = new MyClass();
myObject.setAttribute();

function MyClass() {
    this.attribute;
}

MyClass.prototype.setAttribute = function() {
    this.attribute = true;
};

When I try to run this code chrome throws an error saying "Uncaught TypeError: Object # has no method 'setAtributte' " and the specified line is 2. I don't get it.

I repeat: i'm a begginer so this may look like a silly error to you, but it's quite a big problem for me. thanks.

You're calling ".setAttribute()" before you've actually defined it. If you move that line of code to after the point at which you add the function to the prototype, it'll work. Code is evaluated line by line. — Pointy
– Pointy, Commented Nov 5, 2013 at 1:30
var myObject = new MyClass(); works in javascript because of variable hoisting but MyClass.prototype.setAttribute is added where you think it would be — megawac
– megawac, Commented Nov 5, 2013 at 1:32

jasonscript · Accepted Answer · 2013-11-05 01:33:03Z

2

JavaScript has 'hoisted' your declarations so that MyClass is defined before your variable declaration; however your prototype update is not hoisted. Change the order of your code

function MyClass() {
    this.attribute;
}

// Prototype has to be defined BEFORE it can be used
MyClass.prototype.setAttribute = function() {
    this.attribute = true;
    console.log(this.attribute);
};

var myObject = new MyClass();
myObject.setAttribute();

answered Nov 5, 2013 at 1:33

jasonscript

6,2063 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

plalx · Accepted Answer · 2013-11-05 01:35:22Z

0

Functions declared with the function name() {} syntax gets hoisted at the top which allows you to call the function before it's defined in the code, however that doesn't hold true for every other lines.

Your code is basically evaluated as:

var MyClass = function MyClass() {
    this.attribute;
}

var myObject = new MyClass();

myObject.setAttribute(); //does not exist since it's defined on the line below

MyClass.prototype.setAttribute = function() {
    this.attribute = true;
};

You should just reorder your code as:

//constructor declaration
//setting prototype values

var myObject = new MyClass();
myObject.setAttribute('test');

answered Nov 5, 2013 at 1:35

plalx

43.8k7 gold badges77 silver badges94 bronze badges

Collectives™ on Stack Overflow

Javascript set attribute function doesn't work

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related