클래스와 함수생성자

클래스와 객체

객체

• 클래스의 인스턴스 이다
• 1개의 클래스로 여러개의 객체를 만들 수 있다
• 객체 안에는 데이터가 있다.
• 메모리에 올라간다

클래스

• 템플릿 같은 역활을 한다
• 한번만 선언한다
• 클래스 안에는 데이터가 없다
• 메모리에 올라가지 않는다

클래스 선언

생성자 Constructor

생성자는 객체를 생성할 때 인자를 프로퍼티에 전달하여 생성

class Person {
	name='mike';
	age=19;
}
//인스턴스 생성
let person= new Person(); 

class User {
  constructor(name) {
    // setter를 활성화합니다.
    this.name = name;
  }
}
//인스턴스 생성
let user=new User(name);

동적으로 선언

getter 와 setter

class User {

  constructor(name) {
    // setter를 활성화합니다.
    this.name = name;
  }

  get name() {
    return this._name;
  }

  set name(value) {
    if (value.length < 4) {
      alert("이름이 너무 짧습니다.");
      return;
    }
    this._name = value;
  }

}

let user = new User("보라");
alert(user.name); // 보라

user = new User(""); // 이름이 너무 짧습니다.

클래스 필드로 바인딩 된 메서드 만들기

class Button {
  constructor(value) {
    this.value = value;
  }
  click = () => {
    alert(this.value);
  }
// click(){} 사용하면 안됨 losing this 하게 됨 
}

let button = new Button("안녕하세요.");

setTimeout(button.click, 1000); // 안녕하세요.

test

class CheckValid {
  constructor(age) {
    this.age = age;
  }
  sayAge = () => {
    console.log(this.age);
  };
	static staticSayHello=()=>{
		console.log("안녕");
	}
  static staticSayAge = () => {
    console.log(this.age);
  };
//다른곳에서 변수 받아오기 
	static staticSetValue = (value) => {
    console.log(value);
  };
  static staticSetName = (e) => {
    const { name } = e.tartget;
    console.log(this.name);
  };
}

//호출부분 name="id"인 input에 hi라고 입력하기 
const onBlur = (e) => {
    const { name, value } = e.target;
    let valid = new CheckValid(18);

====> 
//함수 이용
    valid.sayAge(); // 18
//인스턴스에 static 메소드 호출 
		valid.staticSayAge (); // Not Function 
//static method 호출 
		CheckValid.staticSayHello(); // 안녕 
//losing this 찾을 수 없는 변수 
		CheckValid.staticSayAge () // losing this 현상 일어나서 ()=>{ console.log(CheckValid.age)} 출력
//static method에 매개변수 받기 		
		CheckValid.staticSetValue(value); //hi
//static method에 이벤트 객체 전달 
    CheckValid.staticSetName(e); //id
//인스턴스 객체 함수에 이벤트 객체 전달 
    valid.SetName(e);//id
  };

CheckValid.age // Error Why? 

프로토타입

자바스크립트의 모든 함수는 prototype 이라는 속성이 있는데 인스턴스가 생성될 때마다 상속받게 된다

[JavaScript] 함수 생성자와 클래스의 차이

프로토타입의 사용 이유

ConstructorFunc.prototype.func대신 Class

//함수 생성자 방식
function Person(name) {
    this.name = name;
}
Person.prototype = {
    constructor: Person,
    hi() {
        console.log('hi my name is' + this.name)
    }
}

class Person {
    constructor(name) {
    this.name = name;
    }
    hi() {
        console.log('..')
    }
	
}

Static method ,Static property

static 키워드는 인스턴스화 하지 않고 호출 되며 클래스 인스턴스를 통해 호출하는것이 불가능하다

lass 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
//Point.distance(new Point(5,5), new Point(10,10))
//distance dx= 5-10;
					//dy=5-10;