1. Arrow function 을 사용하는 이유

1. 간결함

function (x) {
	return x * 2;
}

를 아래와 같이 변경할 수 있다.

x => x * 2;

1. function 생략 가능
2. 변수의 ( ) 생략 가능 ( 매개변수가 한 개만 있을 경우 생략 가능, 2개부터는 ( ) 필요)
3. { } , return 생략 가능 ( 한 줄로 표현 가능 할 경우 )

2. this

2. 객체생성자

1. 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수가 구현 가능

• 함수를 통해 객체를 만들 수 있다.

	function Animal(type, name, sound) {
  	this.type = type;
  	this.name = name;
  	this.sound = sound;
  	this.say = function() {
    	console.log(`${this.name}는 이렇게 울어요. ${this.sound}`);
  	};
}
	let dog = new Animal('개', '멍멍이', '멍멍');
	let cat = new Animal('고양이', '냥냥이', '야옹');
    
	dog.say(); // '멍멍이는 이렇게 울어요 멍멍'
	cat.say(); // '고양이는 이렇게 울어요 야옹'

2. 객체생성자를 사용할 때는 함수의 이름을 대문자로 시작 (생성자 함수)

3. 새로운 객체를 만들때는 new 키워드를 사용해야 한다. (인스턴스)

위 코드에서 dog,cat이 같은 함수를 바라보기 때문에 객체가 생성될 때 마다 동일한 함수가 생성
(불필요한 코드가 생성되고, 메모리의 낭비를 초래

4. 특정 함수 또는 값을 재사용하기 위해 프로토타입을 사용

3. 프로토 타입

1. 프로토 타입을 통해 생성자 함수가 가지고 있는 함수를 상속 받을 수 있다.

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
}

Animal.prototype.legs = 4;

Animal.prototype.say = function() {
  console.log(`${this.name}는 이렇게 울어요. ${this.sound}`);
};

Animal.prototype.checkType = function() {
  console.log(`저 ${this.name}는 ${this.type}입니다.`);
};

const dog = new Animal('개', '멍멍이', '멍멍');
const cat = new Animal('고양이', '야옹이', '야옹');

dog.say(); // '저 멍멍이는 이렇게 울어요 멍멍'
cat.say(); // ' 저 고양이는 이렇게 울어요 야옹'
dog.checkType(); // '저 멍멍이는 개입니다'
cat.checkType(); // '저 야옹이는 고양이입니다'
dog.legs; // 4
cat.legs; // 4

2. 프로퍼티 && 메소드 모두 상속 가능

프로퍼티 - legs
메소드 - say(), checkType()

4. 객체생성자 상속 받기 (서브클래스)

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
}

Animal.prototype.legs = 4;

Animal.prototype.say = function() {
  console.log(`${this.name}는 이렇게 울어요. ${this.sound}`);
};

Animal.prototype.checkType = function() {
  console.log(`저 ${this.name}는 ${this.type}입니다.`);
};

function Dog(name, sound) {
  Animal.call(this, '개', name, sound);
}
Dog.prototype.constructor = Dog;
Dog.prototype = Object.create(Animal.prototype);
let chiwawa = new Dog('치와와', '치와와와르');

console.log(chiwawa); // Animal { type: '개', name: '치와와', sound: '치와와와르' }
chiwawa.say(); // '치와와는 이렇게 울어요. 치와와와르'
chiwawa.checkType(); // '저 치와와는 개입니다.'

1. 서브클래스 생성자 함수를 만든다

2. 내부에서 상위 생성자 함수를 호출하고 첫번째 인자로 this

3. 두번째 인자부터 상속받을 변수를 지정해준다

function Dog(name, sound) {
Animal.call(this, '개', name, sound);
}

4.하위 생성자 함수가 상위 생성자 함수의 prototype을 상속받는다고 정의한다.

Dog.prototype.constructor = Dog; // Dog 의 생성자는 Dog
Dog.prototype = Object.create(Animal.prototype) // Animal.prototype을 상속받는다.

5. new 키워드를 통해 하위 생성자 함수의 인스턴스를 생성한다.

let chiwawa = new Dog('치와와', '치와와와르');
console.log(chiwawa); // Animal { type: '개', name: '치와와', sound: '치와와와르' }
chiwawa.say(); // '치와와는 이렇게 울어요. 치와와와르'
chiwawa.checkType(); // '저 치와와는 개입니다.'

##4. 클래스

1. 클래스를 이용한 상속

class Animal {
  constructor(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
  }
  say () {
    console.log(`저 ${this.name} 이렇게 웁니다. ${this.sound}`)
  }
}

let dog = new Animal('개', '멍멍이', '멍멍')

dog.say() // '저 멍멍이 이렇게 웁니다. 멍멍'
dog.type // '개'
dog.name // '멍멍이'

2. 클래스의 하위클래스를 이용한 상속

• constructor
  • 그 안의 super을 유심히 볼 것
  • 상속을 할 때는 extends 키워드를 사용하며, constructor에서 사용하는 super() 함수가 상속받은 클래스의 생성자를 가르킵니다. **** 세상 중요한 super

class Cat extends Animal {
  constructor(name,sound) {
    super('고양이', name, sound)
  }
  checkType () {
    console.log(`${this.name}은 ${this.type}입니다.`)
  }
}

let 페르시안 = new Cat('페르시안', '야옹')
페르시안.say() // '저 페르시안 이렇게 웁니다 야옹'
페르시안.type // '고양이'
페르시안.checkType() // '페르시안은 고양이입니다.'

출처 : 벨로퍼트와 함께하는 모던 자바스크립트
https://learnjs.vlpt.us/basics/10-prototype-class.html

끝