| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes | [Back] [Original] |
Get to know MDN better
This page was translated from English by the community. Learn more and join the MDN Web Docs community.
This feature is well established and works across many devices and browser versions. Its been available across browsers since 2016 ..
JavaScript ECMAScript 2015 JavaScript . - , .
" ", , (function expressions function declarations), : class declarations class expressions.
class declaration ( ). class ( Rectangle).
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
(function declaration) (class declaration) , (hoisting), . , ReferenceError:
var p = new Rectangle(); // ReferenceError
class Rectangle {}
class expression ( ). . , .
//
var Rectangle = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
console.log(Rectangle.name);
// : "Rectangle"
//
var Rectangle = class Rectangle2 {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
console.log(Rectangle.name);
// : "Rectangle2"
: (hoisting), .
, {}. , .
(strict mode).
constructor , , , . constructor. SyntaxError , constructor.
super constructor .
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
get area() {
return this.calcArea();
}
calcArea() {
return this.height * this.width;
}
}
const square = new Rectangle(10, 10);
console.log(square.area); // 100
static, . , (instance) . , , , , .
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static displayName = "";
static distance(a, b) {
const dx = a.x - b.x;
const dy = a.y - b.y;
return Math.hypot(dx, dy);
}
}
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
p1.displayName; //undefined
p1.distance; //undefined
p2.displayName; //undefined
p2.distance; //undefined
console.log(Point.displayName); // ""
console.log(Point.distance(p1, p2)); // 7.0710678118654755
this this ( this boolean, string, number, undefined, null), this undefined . "use strict", .
class Animal {
speak() {
return this;
}
static eat() {
return this;
}
}
let obj = new Animal();
obj.speak(); // Animal
let speak = obj.speak;
speak(); // undefined
Animal.eat(); // Animal
let eat = Animal.eat;
eat(); // undefined
, this, . - this .
function Animal() {}
Animal.prototype.speak = function () {
return this;
};
Animal.eat = function () {
return this;
};
let obj = new Animal();
let speak = obj.speak;
speak(); // ( )
let eat = Animal.eat;
eat(); // ( )
:
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
(class-side) :
Rectangle.staticWidth = 20; Rectangle.prototype.prototypeWidth = 25;
Javascript , :
class Rectangle {
height = 0;
width;
constructor(height, width) {
this.height = height;
this.width = width;
}
}
, , .
, :
class Rectangle {
#height = 0;
#width;
constructor(height, width) {
this.#height = height;
this.#width = width;
}
}
. , , , , .
: .
, .
extends extends , .
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} .`);
}
}
class Dog extends Animal {
constructor(name) {
super(name); // super name
}
speak() {
console.log(`${this.name} .`);
}
}
let d = new Dog("");
d.speak(); //
, super, this.
, "":
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function () {
console.log(`${this.name} .`);
};
class Dog extends Animal {
speak() {
console.log(`${this.name} .`);
}
}
let d = new Dog("");
d.speak(); //
// .
, (non-constructible) . , Object.setPrototypeOf():
var Animal = {
speak() {
console.log(`${this.name} .`);
},
};
class Dog {
constructor(name) {
this.name = name;
}
}
// , TypeError speak.
Object.setPrototypeOf(Dog.prototype, Animal);
let d = new Dog("");
d.speak(); // .
, Array MyArray. species .
, , map(), , , Array MyArray. Symbol.species :
class MyArray extends Array {
// species Array
static get [Symbol.species]() {
return Array;
}
}
var a = new MyArray(1, 2, 3);
var mapped = a.map((x) => x * x);
console.log(mapped instanceof MyArray); // false
console.log(mapped instanceof Array); // true
super super .
class Cat {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} .`);
}
}
class Lion extends Cat {
speak() {
super.speak();
console.log(`${this.name} .`);
}
}
let l = new Lion("");
l.speak();
// .
// .
, mix-ins, . ECMAScript , ( , tooling classes) . .
mix-ins ECMAScript , , , :
var calculatorMixin = (Base) =>
class extends Base {
calc() {}
};
var randomizerMixin = (Base) =>
class extends Base {
randomize() {}
};
, mix-ins, :
class Foo {}
class Bar extends calculatorMixin(randomizerMixin(Foo)) {}
| Specification |
|---|
| ECMAScript 2027 LanguageSpecification # sec-class-definitions |
. SyntaxError .
, Firefox Web Console (Tools > Web Developer > Web Console) ('Run') , SyntaxError: redeclaration of let ClassName;. ( Firefox bug 1428672.) Chrome Developer Tools Uncaught SyntaxError: Identifier 'ClassName' has already been declared at <anonymous>:1:1.
This page was last modified on 24 . 2025 . by MDN contributors.
Your blueprint for a better internet.
Portions of this content are 19982026 by individual mozilla.org contributors. Content available under a Creative Commons license.
| Web Proxy Viewer | New URL | Original Page |