[클래스] prototype

const fruits = ['Apple', 'Banana', 'Cherry'];
const fruitsArray = new Array('Apple', 'Banana', 'Cherry');
console.log(fruitsArray); //['Apple', 'Banana', 'Cherry']
console.log(fruitsArray.length); // 3

console.log(fruitsArray.includes('Banana')) //true
console.log(fruitsArray.includes('Orange')) //false

Array.prototype.heropy = function () {
	console.log(this)
};

fruits.heropy(); // 

const arr = [];
arr.heropy() 

prototype이라는 것은 인스턴스에서 사용할 수 있는 메서드나 속성을 등록할 수 있는 역할을 한다.

const heropy = {
	firstName : 'Heropy',
  	lastName : 'Park',
  	getFullName : function (){
    	return `${this.firstName} ${this.lastName}`;
    }
}
const neo = {
	firstName : 'Neo',
  	lastName : 'Anderson',
  	getFullName : function (){
    	return `${this.firstName} ${this.lastName}`;
    }
}
console.log(heropy.getFullName()); // Heropy Park
console.log(neo.getFullName()); // Neo Anderson

: 같은 로직을 가지고 있는 객체가 두개가 동시에 가지고 있다.

const heropy = {
	firstName : 'Heropy',
  	lastName : 'Park',
  	getFullName : function (){
    	return `${this.firstName} ${this.lastName}`;
    }
}
const neo = {
	firstName : 'Neo',
  	lastName : 'Anderson',
}
console.log(heropy.getFullName()); // Heropy Park
console.log(heropy.getFullName.call(neo)); // Neo Anderson

function User(first, last){
	this.firstName = first
  	this.lastName = last
}
// 여기서는 화살표 함수로 사용 X
User.prototype.getFullName = function() {
	return `${this.firstName} ${this.lastName}`
}

const heropy = new User('Heropy', 'Park') // 생성자 함수를 통해서 인스턴스를 생성한다. 
console.log(heropy); // 함수를 통해서 객체데이터를 만들 수 있다. 

const neo = new User('Neo' , 'Anderson');
console.log(neo); 
console.log(neo.getFullName()); // Neo Anderson

리터럴 방식으로 사용하는것이 더 편하기 때문에 보통 첫번째로 마니 사용한다.
그러나 두번째 사용법은 getFullName과 같은 메서드를 효율적으로 사용할 수 있다.

MDN prototype

• 자바스크립트는 prototype-based-language라고 불린다. 모든 객체들이 메서드나 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미이다.

즉, 상속되는 속성과 메서드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있다.