(50) [JavaScript] 6일 JavaScript 객체

💻/Javascript

(50) [JavaScript] 6일 JavaScript 객체 - 클래스

따궈 2024. 4. 28. 12:29

Class
객체를 생성하기 위한 템플릿이다.
클래스는 데이터와 이를 조작하는 코드를 하나로 추상화한다.

</head>
<body>

	<h3>클래스</h3>

	<script type="text/javascript">
	class User{
		constructor({name,age}){ // 생성자는 constructor 키워드로 정의  
			this.name=name; // 필드
			this.age=age;
		}
		
		sayHello(){ // 메소드 
			return `이름:${this.name},나이:${this.age}`; 
		}
	}
	
	var obj={name:'홍길동',age:20};
	
	const user = new User(obj);
	console.log(user.name);
	
	var s = user.sayHello();
	console.log(s);
	
	console.log(typeof User); // function
	console.log(user instanceof User); // true 
	
	</script>

</body>
</html>

</head>
<body>

	<h3>클래스 - 메소드</h3>

	<script type="text/javascript">
	class Calculator {
		add(x,y){
			return x+y;
		}
		
		sum(x,y){
			return x-y;
		}
		
	}
	
	var obj = new Calculator();
	console.log(obj.add(10,5));
	
	const methodName ='sayName';
	class User{
		constructor({name,age}){
			this.name=name;
			this.age=age;
		}
		
		[methodName](){ // 임의의 표현식으로 메소드명 부여 
			return `${this.name}:${this.age}`;
		}
	}
	
	var obj2=new User({name:'하하하',age:17});
	console.log(obj2.sayName());
	
	
	
	
	</script>



</body>
</html>

</head>
<body>

	<h3>클래스 : getter / setter</h3>

	<script type="text/javascript">
	class User{
		constructor(){
			this._name='';
		}
		
		get name(){
			return this._name;
		}
		set name(newName){
			this._name=newName;
		}
	}
	const obj = new User();
	//obj._name='호호호';
	//console.log(obj._name);
	
	obj.name = '호호호';
	console.log(obj.name);
	console.log(obj._name);
	console.log('--------------------------')
	
	class Rect{
		constructor(w,h){
			this.w =w;
			this.h = h;
			
		}
		
		calcArea(){
			return this.w*this.h;
		}
		
		//getter
		get area(){
			return this.calcArea();
			
		}
	}
	
	const rect = new Rect(10,5);
	//let a = rect.calcArea();
	let a = rect.area;
	console.log(a);
	
	</script>

</body>
</html>

</head>
<body>


	<h3>클래스/인스턴스 속성</h3>

	<script type="text/javascript">
	/*
class Rect{
	constructor(w,h){
		this.w = w;
		this.h = h;
		
	}
}

var obj = new Rect(10,5);
console.log(obj.w,obj.h);
*/

/*class Rect{
	constructor(w,h){ // 생성자
		this.w = 10; 
		this.h = 5;
		
	}
}

var obj = new Rect(0);
console.log(obj.w,obj.h); // 10 5 
*/

class Rect{
	//constructor(){}
area(w,h){ // 메소드 
	this.w = w;
	this.h = h;
	return this.w*this.h;
	
}
}

var obj = new Rect();
console.log(obj.w,obj.h); // undefined undefined

var s = obj.area(10,5);
console.log(obj.w,obj.h,s); // 10 5 50

</script>


</body>
</html>

</head>
<body>

	<h3>클래스 - static 메소드</h3>


	<script type="text/javascript">
	class Rect {
		construtor(w,h){
			this.w=w;
			this.h=h;
		}
		
		static displayName='Rectangle'; // static 속성
		static area(obj){ // static 메소드 
			return obj.w*obj.h;
		}
	}
	
	
	var obj = new Rect (10,5);
	var s = Rect.area(obj);
	
	console.log(Rect.displayName,s);
	
	</script>
</body>
</html>

</head>
<body>

	<h3>class-상속</h3>


	<script type="text/javascript">
	class Car{
		constructor(name){
			this.name=name;
		}
		speed(){
			console.log(`${this.name}는 시속 80입니다`);
		}
		color(){
			console.log(`${this.name}는 검정색입니다.`);
		}
	}
	
	class Taxi extends Car{
		constructor(name){
			super(name); // 상위 클래스의 생성자 호출 
		}
		speed(){
			super.speed();
			console.log(`${this.name}는 시속 100입니다.`);
		}
	}
	
	var obj = new Taxi('그랜저');
	console.log(obj.speed());
	console.log(obj.color());
	
	</script>
</body>
</html>

</head>
<body>

	<h3>클래스-private</h3>

	<script type="text/javascript">
	class User{
		static #A; //private 
		#B;
		
		constructor(){
			this.#B=100;
		}
		
		static fun(){
			User.#A=10;
			return User.#A;
		}
		
		sub(){
			return this.#B;
		}
		
		#method(){//private 
			return 'hello...';
		}
		
		msg(){
			return this.#method();
		}
	}
	
	const obj = new User();
	
	//console.log(User.#A);
	console.log(User.fun());
	console.log(obj.sub());
	console.log(obj.msg());
	
	</script>

</body>
</html>