[JS] 생성자 함수 prototype과 class 문법

yengni·2022년 7월 14일
0

JS

목록 보기
9/11
post-thumbnail

💡 생성자 함수와 protoype과 class 문법은 object를 뽑아내는 기계이다!

🌟 기본적인 object 함수 작성방식

🏷 현재 오버워치 캐릭터의 스킬에 대해 나열하고 있는데 오버워치 캐릭터가 많아지면 많아질 수록 작성해야하는 객체들은 많아진다. 코드를 보면 캐릭터들의 객체 속성과 메소드가 동일하다. 이를 이용해서 공통적으로 가지고 있는 구조를 먼저 만든 후 캐릭터들의 속성 값을 구조에 대입하는 식으로 만들면 작업의 양이 줄어든다.

var nunu = {
	g : 'consume',
    w : 'snowball
    introduce : function(){
    	`my skill is ${this.g} and ${this.w}`
    }
    };
var garen = {
	g : 'strike',
    w : 'snowball'
    introduce : function(){
    	return `my skill is ${this.g} and ${this.w}`
    };
    ...

🌟 생성자 함수 사용하기

  • 함수명을 적을 때 Pascal 표기법 을 사용한다.
    : 첫단어와 두번째 단어의 첫번째 글자를 대문자로 적는다.
function Skill (left,right){
	this.g = left;
    this.w = right;
}
Skill.prototype.introduce = funtion(){
	return `my skill is ${this.g} and ${this.w}`
}
let nunu = new skill ('consume', 'snowball');
let garen = new skill ('strikd', 'snowball');
console.log(nunu.Skill());
console.log(garen.Skill());

🌟 class 문법 사용하기

🏷 생성자 함수보다 더 간결하게 작성할 수 있다.

1️⃣번과 2️⃣번 과정을 합친다!

class Skill{						//class 사용
	constructor (left, right){	    //constructer 사용
    	this.g = left;
    	this.w = right;
    }
    introduce(){
       return `my skill is ${this.g} and ${this.w}`
    }
}

🌟 상속 ( 확장 )

: 기존에 있는 class를 새로운 class에 상속해주는 것이다.

📍 class 상속받기

class Power extends Skill { 	//extends를 통해서 상속받을 class 지정하기.
	constructor (left, right){
    	super (left, right)		//Skill의 constructor로부터 받아온 것을 super로 전달해준다.
    }
}

📍 class 상속받고 속성 추가하기

class Power extends Skill {
	constructor (left, right, center){
    	super (left, right)	
        this.s = center;		//상속받은 class에 새로운 속성을 추가했다.
    }
}
profile
우당탕탕 비전공자의 FE 개발일지

0개의 댓글

관련 채용 정보