- Home
- /
- Tutorials
- /
- JavaScript Tutorial
- /
- JavaScript Class Methods
JavaScript Classes
JavaScript Class Methods
Class methods are functions shared by every instance of the class.
They are written inside the class body, without function and without commas.
Every instance uses the same function, which is why classes are memory-efficient.
Example
Example
javascript
class Person {
constructor(name) {
this.name = name;
}
greet() {
return "Hello " + this.name;
}
}
console.log(new Person("Ada").greet());The output is Hello Ada.
How Methods Work
A method lives on the class prototype, not on each instance.
this inside a method is the instance it was called on.
Methods are separated by nothing - no commas, unlike an object literal.
Syntax
Syntax
javascript
class Name {
method() {
return this.property;
}
}No commas between methods.
Methods Take Parameters
They behave like any other function.
Example
Example
javascript
class Account {
constructor(balance) {
this.balance = balance;
}
deposit(amount) {
this.balance += amount;
return this.balance;
}
}
console.log(new Account(100).deposit(50));The output is 150.
Calling Another Method
Use this to reach a sibling method.
Example
Example
javascript
class Order {
constructor(price) {
this.price = price;
}
tax() {
return this.price * 0.2;
}
total() {
return this.price + this.tax();
}
}
console.log(new Order(100).total());The output is 120.
Shared, Not Copied
Both instances use the very same function object.
A method defined in the constructor would be copied for each one.
Example
Example
javascript
class Person {
greet() {
return "hi";
}
}
const a = new Person();
const b = new Person();
console.log(a.greet === b.greet);The output is true.
Method Chaining
Returning this lets calls be strung together.
Example
Example
javascript
class Counter {
constructor() {
this.count = 0;
}
up() {
this.count++;
return this;
}
value() {
return this.count;
}
}
console.log(new Counter().up().up().up().value());The output is 3.
Losing this
Pulling a method out of its object breaks the link to the instance.
bind reattaches it.
Example
Example
javascript
class Person {
constructor(name) {
this.name = name;
}
greet() {
return "Hello " + this.name;
}
}
const ada = new Person("Ada");
const greet = ada.greet.bind(ada);
console.log(greet());Without bind this would throw, because this is undefined.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Class Methods</title>
</head>
<body>
<h1>Class Methods</h1>
<p id="out"></p>
<script>
class Basket {
constructor() {
this.items = [];
}
add(name, price) {
this.items.push({ name: name, price: price });
return this;
}
total() {
return this.items.reduce(function (sum, item) {
return sum + item.price;
}, 0);
}
}
const basket = new Basket().add("Book", 12).add("Pen", 3);
document.getElementById("out").textContent =
basket.items.length + " items, total " + basket.total();
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try adding another item:
Chain one more .add(...) and watch both numbers change.
Important Points
- Methods go inside the class body with no commas.
thisis the instance the method was called on.- Methods live on the prototype and are shared.
- Returning
thisallows chaining. - A detached method loses
thisunless it is bound.
Conclusion
Methods are where a class's behaviour lives.
Sharing them on the prototype is what makes classes efficient.
Chaining is a small trick that makes some APIs much nicer to use.
