JavaScript Classes
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
javascript
class Person {
constructor(name) {
this.name = name;
}
greet() {
return "Hello " + this.name;
}
}
console.log(new Person("Ada").greet());The output is Hello Ada.
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
javascript
class Name {
method() {
return this.property;
}
}No commas between methods.
They behave like any other function.
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.
Use this to reach a sibling method.
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.
Both instances use the very same function object.
A method defined in the constructor would be copied for each one.
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.
Returning this lets calls be strung together.
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.
Pulling a method out of its object breaks the link to the instance.
bind reattaches it.
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
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>Run the above example in the Try It Editor.
Try adding another item:
Chain one more .add(...) and watch both numbers change.
this is the instance the method was called on.this allows chaining.this unless it is bound.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.