자바스크립트 중급 강좌 ⑤

Const User = function (name, age) {
	this.name = name;
	this.age= age;
	this.showName = function () {
    	console.log(this.name);
    };
};

const mike = new User("Mike", 30);

생성자 함수는 Class 로도 만들 수 있다.

---

Class

:ES6에 추가된 스펙

class User2{
	constructor(name, age) {
    		this.name = name;
		this.age = age;
	}
	showName() {
		console.log(this.name);
	}
}

const tom = new.User2("Tom", 19);

new를 사용하여 객체를 생성하는 건 동일하다.

class 키워드 사용, 내부에 constructor (객체를 만들어주는 생성자 메서드) 가 있다.

class 내에 정의된 함수 showName()은 User2에 prototype에 저장된다.

---

생성자함수에서 class와 동일하게 동작하도록 바꿔보자

Const User = function (name, age) {
	this.name = name;
	this.age= age;	
};

User.prototype.showNAME = function() {
	console.log(this.name);
};

const mike = new User("Mike", 30);

---

생성자 함수에서는 const mike = User("Mike", 30) 이라 하면 undefined 가 뜨며, 에러는 발생하지 않는다.

class는 new 없이 실행할 수 없다. class에서 const tom = User("Tom", 19) 이라 하면  에러 발생한다.

---

생성자 함수로 생성한 객체의 __proto__ 내부의 constructor를 보면 constructor : f (name, age)

class 로 생성한 객체의 __proto__내부의 constructor를 보면  constructor : class User2

constructor 가 클래스인 걸 알수 있고, new 없이 호출하면 에러가 발생되도록 설계되어있다.

---

for (const p in mike) {

console.log(p); // name, age, showName   for in문에서는 prototype포함된 showName까지 다 나온다. 

}

for(const p in tom){

console.log(p); // name, age    for in 문에서 class에 선언된 메서드는 제외된다.

}

---

클래스에서의 상속

//extends

class Car {
	constructor(color) {
		this.color = color;
		this.wheels = 4;
	}
	drive() {
		console.log("drive..");
	}
	stop() {
		console.log("STOP!");
	}
}

class Bmw extends Car {
	park() {
    	console.log("PARK");
    }
}

const z4 = new Bmw("blue");

---

// 메소드 오버라이딩

만약 Bmw 내부에 Car에서 정의한 메서드와 동일한 이름의 메서드가 정의되면 어떻게 될까?

class Car {
	constructor(color) {
		this.color = color;
		this.wheels = 4;
	}
	drive() {
		console.log("drive..");
	}
	stop() {
		console.log("STOP!");
	}
}

class Bmw extends Car {
	park() {
    	console.log("PARK");
	}
	stop() {
		super.stop();
		console.log("OFF!");
	}
}

const z4 = new Bmw("blue");

z4.sto(); // OFF! 가 나온다. 동일한 이름으로 메서드를 정의하면 덮어쓴다.

부모의 stop() 을 사용하고 싶으면, super.stop(); 을 사용하면 STOP! 이 출력된다.

---

생성자 오버라이딩

class Car {
	constructor(color) {
		this.color = color;
		this.wheels = 4;
	}
	drive() {
		console.log("drive..");
	}
	stop() {
		console.log("STOP!");
	}
}

class Bmw extends Car {
	constructor(color){
		super(color): //부모 constructor 를 반드시 먼저 호출해야한다. 
		this.navigation = 1;
	}
	park() {
		console.log("PARK");
	}
}

---

Promise

const pr = new Promise((resolve, reject) => {  });

 

new Promise로 생성한다, 함수를 전달받는다. 인수 resolve는 성공한경우, reject는 실패 시 실행되는 함수이다.

어떤 일이 완료된 이후 실행되는 함수를 call back 함수라 한다.

---

오