프로토타입
function 기계() {
this.q = 'strike';
this.w = 'snowball';
기계.prototype.name = 'kim'
//이렇게 추가를 해주면
//콘솔창에 nunu.name="kim"이 나온다.
const nunu = new 기계()
//기계 {q: "strike", w: "snowball"}
//이런식으로 자식 Object에게 데이터를 물려 줄 수 있는데,
//프로토 타입도 이게 가능하다.콘솔창에 기계.prototype을 쳐보면 우리가 만들지 않았지만 뭐가 만들어져 있다.
💡프로토타입은 기계의 유전자라고 생각하면 된다.프로토타입에 뭔가를 추가하면 자식들이 상속받아 사용이 가능하다.
그럼 어떻게 이게 가능한걸까❔
function 기계() {
this.q = 'strike';
this.w = 'snowball';
const nunu = new 기계()
nunu.namenunu가 name을 갖고 있으면 ➡️ 출력
nunu가 name을 갖고 있지 않으면 ➡️ nunu 부모유전자한테 너 name 있냐? 있으면 출력해준다
부모 유전자한테도 없으면 부모의 부모 유전까지 ➡️ 프로토타입 체인
const array = [4, 2, 1]
array.sort()
//[1, 2, 4]
array.length
//3sort,length를 사용 할 수 있는 이유 ➡️ array의 부모 요소에 포함 되어 있기 때문.
//모든 자료에서 쓸 수 있는 함수 추가
array.prototype.함수 = function(){}
String.prototype.yell = function() {
return `OMG!!! ${this.toUpperCase()}!!!!! AGHGHGHG!`;
};
'bees'.yell(); //"OMG!!! BEES!!!!! AGHGHGHG!"
Array.prototype.pop = function() {
return 'SORRY I WANT THAT ELEMENT, I WILL NEVER POP IT OFF!';
};
const nums = [ 6, 7, 8, 9 ];
nums.pop(); // "SORRY I WANT THAT ELEMENT, I WILL NEVER POP IT OFF!"사용하고 싶은 함수가 있다면 이렇게 적용 시켜 주면 가능하다.
자바스크립트가 가지는 객체지향
예를 들어서 LoL에 등장하는 캐릭터들을 정리해서 보여주기로 한다면
➡️ JS자료형에다가 먼저 정보를 담아야 겠는데?🤔
{Object}자료형으로 캐릭터들의 정보를 정리해보자.
//수많은 캐릭터를 이렇게 정리하면 너무 힘들다.
var nunu = {
q : 'consume',
w : 'snowball'
}
var garen = {
q : 'strike',
w : 'courage'
}
//이렇게 비슷한 object 많이 만들 일 있으면 class를 만들어 쓰면 된다.
//this 쉽게 표현하자면 기계로부터 생성되는 object(인스턴스!!)
function 기계() {
this.q = 'consume';
this.w = 'snowball';
}
//지금 이걸 쉽게 풀어말하자면 새로 생성 되는 object에
//{q : 'consume'} 이랑 {q : 'snowball'} 을 추가해달라❗
var nunu = new 기계();
var garen = new 기계();
//object를 한줄로 적어 줄 수 있다.
//하지만 문제가 있다 nunu와 garen은 q가 다르다class
//이렇게 함수를 적어준다면
function 기계(파라미터) {
this.q = '파라미터';
this.w = 'snowball';
}
var nunu = new 기계('consume');
var garen = new 기계('strike');
//q가 다르게 나온다.
//ES6 class문법
class Hero {
construntor(파라미터) {
this.q = '파라미터';
this.w = 'snowball';
}
}
new Hero()이렇게 class를 이용해서 간단하게 적어 줄 수 있다.
🔗 new를 좀 더 살펴볼까?
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
//mycar.make의 값은 문자열 "Eagle"이고,
//mycar.year는 정수 1993이며 나머지도 마찬가지
var mycar = new Car("Eagle", "Talon TSi", 1993);
//new를 호출해서 얼마든지 car 객체를 생성할 수 있다
var kenscar = new Car("Nissan", "300ZX", 1992);만약에 person이라고 불리는 객체를 다음과 같이 정의 한다면,
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
var rand = new Person("Rand McNally", 33, "M");
var ken = new Person("Ken Jones", 39, "M");
//그런 다음 owner 속성을 포함하는 car의 정의를 다시 쓸 수 있다
function Car(make, model, year, owner) {
this.make = make;
this.model = model;
this.year = year;
this.owner = owner;
}
//owner를 위한 매개변수로 rand와 ken 객체를 넘겨준다.
var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
var car2 = new Car("Nissan", "300ZX", 1992, ken);
//car2의 owner name을 확인해보기 위해서
car2.owner.name;위 코드에서 보다시피,
💡new는 기존 객체의 패턴을 기반으로 새로운 객체를 생성해주는 연산자다.
extend / super
class Cat {
constructor(name, age) {
this.name = name;
this.age = age;
}
eat() {
return `${this.name} is eating!`;
}
}
//이렇게 적어주고서 콘솔창에서
// const monty = new Cat('monty', 9);이렇게 찍어주면
//monty에는 {name: "monty", age: 9}가 저장되고
//monty.eat()에는 "monty is eating1"이 출력된다.
class Dog {
constructor(name, age) {
this.name = name;
this.age = age;
}
eat() {
return `${this.name} is eating!`;
}
}
// 기본적으로 둘은 같다.이제 두개가 살짝 다르지만 거의 비슷하게 만들어 주겠다.
부모 클래스를 Pet으로 만들어준다.
class Pet {
constructor(name, age) {
this.name = name;
this.age = age;
}
eat() {
return `${this.name} is eating!`;
}
}
class Cat extends Pet {
constructor(name, age, livesLeft = 9) {
super(name, age);
this.livesLeft = livesLeft;
}
meow() {
return 'MEOWWWW!!';
}
}
class Dog extends Pet {
bark() {
return 'WOOOF!!';
}
eat() {
return `${this.name} scarfs his food!`;
}
}만약에 extend없이 const jon = new Cat('jon');하면 빈 객체가 나온다.
➡️ 생성자가 Dog에도 없고 Cat에도 없기 때문이다.
Cat과 Dog에 Pet의 기능을 포함 시켜서 Pet을 확장 시키려면?
➡️ extend를 간단하게 class Cat extends Pet, class Dog extends Pet을 적어주면 된다.
그렇게 되면?
Cat에서는 eat을 정의하지 않았는데도 호출 할 수 있어진다.
추가 정보를 넣고 싶다고 해보자.
class Cat extends Pet {
constructor(name, age, livesLeft = 9) {
super(name, age);
this.livesLeft = livesLeft;
}
meow() {
return 'MEOWWWW!!';
}
}추가를 해주고, 밑에 super(name, age); 적어주면 super키워드가 super클래스의 참조 항목이 된다.
