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>
