| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/ko/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 3.
Class . . JavaScript ES5 .
Class " ". class class and class .
Class class . class ( "Rectangle") class .
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
, . ReferenceError .
const p = new Rectangle(); // ReferenceError
class Rectangle {}
Class class . Class , . class body local scope . (, ( ) name ).
// unnamed
let Rectangle = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
console.log(Rectangle.name);
// : "Rectangle"
// named
let Rectangle = class Rectangle2 {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
console.log(Rectangle.name);
// : "Rectangle2"
: Class .
Class body {} . constructor class .
(body) strict mode . , . , . ECMAScript .
constructor class . "constructor" . constructor SyntaxError .
constructor constructor super .
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
// Getter
get area() {
return this.calcArea();
}
//
calcArea() {
return this.height * this.width;
}
}
const square = new Rectangle(10, 10);
console.log(square.area); // 100
static (static) . (instantiating) , . (application) (utility) . , , .
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static displayName = "Point";
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); // "Point"
console.log(Point.distance(p1, p2)); // 7.0710678118654755
this , this , this undefined . "use strict" , class strict mode .
class Animal {
speak() {
return this;
}
static eat() {
return this;
}
}
let obj = new Animal();
obj.speak(); // the Animal object
let speak = obj.speak;
speak(); // undefined
Animal.eat(); // class Animal
let eat = Animal.eat;
eat(); // undefined
nonstrict mode , this this . Strict mode ; this .
function Animal() {}
Animal.prototype.speak = function () {
return this;
};
Animal.eat = function () {
return this;
};
let obj = new Animal();
let speak = obj.speak;
speak(); // global object (in nonstrict mode)
let eat = Animal.eat;
eat(); // global object (in non-strict mode)
:
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
() .
Rectangle.staticWidth = 20;
Rectangle.prototype.prototypeWidth = 25;
JavaScript .
class Rectangle {
height = 0;
width;
constructor(height, width) {
this.height = height;
this.width = width;
}
}
self-documenting .
.
private .
class Rectangle {
#height = 0;
#width;
constructor(height, width) {
this.#height = height;
this.#width = width;
}
}
private . private . .
: Private .
private .
extends (sub classing)extends .
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
constructor(name) {
super(name); // super class name
}
speak() {
console.log(`${this.name} barks.`);
}
}
let d = new Dog("Mitzie");
d.speak(); // Mitzie barks.
subclass constructor , "this" super() .
es5 .
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function () {
console.log(`${this.name} makes a noise.`);
};
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}
let d = new Dog("Mitzie");
d.speak(); // Mitzie barks.
// ,
(non-constructible) . , . Object.setPrototypeOf():
const Animal = {
speak() {
console.log(`${this.name} makes a noise.`);
},
};
class Dog {
constructor(name) {
this.name = name;
}
}
// speak TypeError
Object.setPrototypeOf(Dog.prototype, Animal);
let d = new Dog("Mitzie");
d.speak(); // Mitzie makes a noise.
MyArray Array Object . Species .
, map() MyArray Array . Symbol.species :
class MyArray extends Array {
// Array species
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} makes a noise.`);
}
}
class Lion extends Cat {
speak() {
super.speak();
console.log(`${this.name} roars.`);
}
}
let l = new Lion("Fuzzy");
l.speak();
// Fuzzy makes a noise.
// Fuzzy roars.
- . ECMAScript , . .
ECMAScript - :
var calculatorMixin = (Base) =>
class extends Base {
calc() {}
};
var randomizerMixin = (Base) =>
class extends Base {
randomize() {}
};
- :
class Foo {}
class Bar extends calculatorMixin(randomizerMixin(Foo)) {}
. SyntaxError .
FireFox Web Console (Tools > Web Developer > Web Console) . . SyntaxError: redeclaration of let ClassName;. (See further discussion of this issue in Firefox bug 1428672.) Doing something similar in Chrome Developer Tools gives you a message like Uncaught SyntaxError: Identifier 'ClassName' has already been declared at <anonymous>:1:1.
| Specification |
|---|
| ECMAScript 2027 LanguageSpecification # sec-class-definitions |
superThis page was last modified on 2026 7 15 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 |