class Myclass {
constructor(name) {
this.name = name;
}
sayHi() {
alert(this.name);
}
}
let user = new User('John');
new User('John')을 하면
1.새로운 객체가 생성되고
2. 넘겨받은 인수와 함께 constructor가 실행되고 'John'이 this.name에 할당됨
자바스크립트에서 클래스는 함수의 한 종류입니다.
class User {
constructor (name) {
this.name = name;
}
sayHi() {
alert(this.name)
}
}
class User 가 하는 일은
1. User라는 이름을 가진 함수를 만들고, 함수 본문은 생성자 메서드 constructor에서 가져옵니다. 생성자 메서드가 없으면 본문이 비워진 채로 함수가 만들어집니다.
2.sayHi 클래스 내에 정의한 메서드는 user.prototype
에 저장합니다.
function User(name) {
this.name = name;
}
모든 함수의 프로토타입은 'constructor'프로퍼티를 기본을 갖고있기 때문에 constructor 프로퍼티를 명시적으로 만들 필요가 없습니다.
class User {
constructor() {
}
}
[[FunctionKind]]:"classConstructor
가 이름표처럼 붙음이런 검증 과정이 있기 떄문에 new와 함께 호출하지않으면 에러가 발생
prototype
프로퍼티에 추가된 메서드 전체의 enumerable 플래그는 false (메서드는 순회대상이 아님!)let User = class {
sayHi() {
alert('Hello');
}
}
클래스 표현식에 이름을 붙이면 그 이름은 오직 클래스 내부에서만 사용 가능
let User = class Myclass {
sayHi() {
alert(Myclass);
}
}
new User().sayHi(); // 제대로 동작
alert(Myclass); // ReferenceError Myclass 클래스 밖에서 사용할 수 없음
리터럴을 사용해 만든 객체처럼 클래스도 getter나 setter 계산된 프로퍼티를 포함할 수 있음
get
과 set
을 이용해 user.name
을 조작
class User {
constructor(name) {
this.name = name;
}
get name() {
return this._name;
}
set name(value) {
if (value.length < 4) {
alert('이름이 너무짧습니다.');
return ;
}
this._name = value;
}
}
let user = new User('John')
alert(user.name); // John
user = new User("");
'클래스 필드' 문법을 사용하면 어떤 종류의 프로퍼티도 추가할 수 있습니다.
User.prototype이 아닌 개별 객체에 클래스 필드가 설정됨
class User {
name = "John"
sayHi() {
alert('Hello, ${this.name}!');
}
}
new User().sayHi(); // Hello, John!
class Button {
constructor (value) {
this.value = value;
}
click() {
alert(this.value)
}
}
let button = new Button('Hello');
setTimeout(button.click, 1000); // undefined
이렇게 this 컨텍스트 알수없게된 문제를 잃어버린 this라고 함
class Button {
constructor(value) {
this.value = value;
}
click = () => {
alert(this.value);
}
}
let button = new Button("HELLO")
setTimeout(button.click, 1000): //HELLO
클래스 필드 click = () => {...}
은 각 button 객체마다 독립적인 함수를 만들고 함수의 this를 해당 객체에 바인딩 해줌