클래스와 기본문법

Vorhandenheit ·2021년 9월 7일
0

JS.코어

목록 보기
18/29
post-custom-banner

클래스와 기본 문법

1. 기본 문법

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에 할당됨

2. 클래스란?

자바스크립트에서 클래스는 함수의 한 종류입니다.

class User {
	constructor (name) {
    	this.name = name;
    }
  sayHi() {
  	alert(this.name)
  }
}

class User 가 하는 일은
1. User라는 이름을 가진 함수를 만들고, 함수 본문은 생성자 메서드 constructor에서 가져옵니다. 생성자 메서드가 없으면 본문이 비워진 채로 함수가 만들어집니다.

2.sayHi 클래스 내에 정의한 메서드는 user.prototype에 저장합니다.

3. 클래스는 단순한 문법 설탕이 아닙니다.

function User(name) {
	this.name = name;
}

모든 함수의 프로토타입은 'constructor'프로퍼티를 기본을 갖고있기 때문에 constructor 프로퍼티를 명시적으로 만들 필요가 없습니다.

class User {
	constructor() {
	}
}
  • class 로 만듬 함수엔 특수 내부 프로퍼티인 [[FunctionKind]]:"classConstructor가 이름표처럼 붙음

이런 검증 과정이 있기 떄문에 new와 함께 호출하지않으면 에러가 발생

  • 클래스 메서드는 열거할 수 없습니다. 클래스 prototype프로퍼티에 추가된 메서드 전체의 enumerable 플래그는 false (메서드는 순회대상이 아님!)

4.클래스 표현식

let User = class {
	sayHi() {
    	alert('Hello');
    }
}

클래스 표현식에 이름을 붙이면 그 이름은 오직 클래스 내부에서만 사용 가능

let User = class Myclass {
	sayHi() {
    	alert(Myclass);
    }
}
new User().sayHi(); // 제대로 동작
alert(Myclass); // ReferenceError Myclass 클래스 밖에서 사용할 수 없음

5.getter와 setter

리터럴을 사용해 만든 객체처럼 클래스도 getter나 setter 계산된 프로퍼티를 포함할 수 있음
getset을 이용해 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(""); 

6. 클래스 필드

'클래스 필드' 문법을 사용하면 어떤 종류의 프로퍼티도 추가할 수 있습니다.
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를 해당 객체에 바인딩 해줌

profile
읽고 기록하고 고민하고 사용하고 개발하자!
post-custom-banner

0개의 댓글