ECMA

2024. 3. 13. 16:59Daily Codig Reminder

setget, 상속

   <script>
class Person{
    // constructor(){ //기본 생성자
    //     console.log("생성자");
    // }
    //생성자, constructor 로 1개만 존재해야함
//생성자 명시 안항경우 => 기본 생성자 , 묵시적 생성
//2. 생성자 이름은 constructor
    constructor(name){ //기본 생성자
        this.name=name;
        console.log("생성자");
    }
    set setName(name){
        this.name=name;
    }
    set setAge(age){
        this.age=age;
    }
    get getName(){
        return this.name;
    }
    get getAge(){
        return this.name;
    }

  
}
var p = new Person();
p.setName ="홍길동"; //변수 처럼 함수 호출
p.setAge =10;
console.log(p.getAge);
console.log(p.getName);
console.log(p.name);
console.log(p.age);    


   </script>

클래스3표현방식

var Person =class{

 

클래스4생성자

   <script>
class Person{
    //생성자 이름 constructor
    //생성자 : 단한개만 지정가능 
    //만일 생성자가 작성되지않으면 기본 생성자 생성함
    constructor(name , age){ //기본 생성자
        this.name=name;
        this.age=age;
        console.log("생성자");
    }
    set setName(name){
        this.name=name;
    }
    set setAge(age){
        this.age=age;
    }
    get getName(){
        return this.name;
    }
    get getAge(){
        return this.name;
    }

  
}
var p = new Person();
p.setName ="홍길동"; //변수 처럼 함수 호출
p.setAge =10;
console.log(p.getAge);
console.log(p.getName);
console.log(p.name);
console.log(p.age);    


   </script>

 

상속시 생성자 고려할 점

  1. 자식 클래스와 부모 클래스 양쪽 constructor를 작성하지 않아도 인스턴스 생성된다. ( default constructor 사용 )
  2. 부모 클래스에만 constructor를 작성하면, 자식 클래스의 ‘default 생성자’가 호출되고 부모 클래스의 constructor가 호출된다.
  3. 자식 클래스에만 constructor를 작성하면 자식 클래스의 constructor가 호출되고 반드시 부모 constructor를 명시적으로 호출해야 된다.
  4. 자식과 부모 클래스 양쪽 constructor를 작성하면 자식 constructor가 호출되지만 반드시 부모 constructor를 명시적으로 호출해야 된다.

상속

class Pet{
constructor (name,age){
    this.name = name;
    this.age =age;

}
setName(name){
    this.name=name;
}
setAge(age){
    this.age=age;
}
getName(name){
    return this.name;
}
getAge(age){
    return this.age;
}
};
class Cat extends Pet{
    constructor (name, age,gender){
  super(name, age); // 함수 호출
        this.gender = gender;
    }
};
var cat = new Cat('cat',10,'female');
console.log(`${cat.name}, ${cat.getName()}`);
console.log(cat.age, cat.gender);
    
 </script>

상속2

 <script>
class Pet{
constructor (name,age){
    this.name = name;
    this.age =age;

}
info(){
    return this.name+"\t"+this.age;
}
};//end parent



class Cat extends Pet{
    constructor (name, age,sex){
  super(name, age); // 함수 호출
        this.sex = sex;
    }

info(){
    return this.name+"\t"+this.sex;
}
};
var cat = new Cat('navi',10,'female');

console.log(cat.info());
    
 </script>

static메소드, module

 

 <script>
class Person{
    getPerson(){ //일반함수는 객체 생성 후 사용
        return "hello";
    }
    static getXXX(){
        return "world"; //static 메소드는 클래스명, 메소드형식으로 참조
    }
}
console.log(Person.getXXX());
let p = new Person();
console.log(p.getPerson());

 </script>

🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟

a.js

export 변수, 함수 , 클래스 다른 js 에서 사용할 수 있도록 제공

  1. 일반 export (여러개를 export 가능)
  2. export default (한 js 파일안에서 한번만 사용가능

b.js

  1. import default이름 from a.js
  2. import (export이름, export이름) from a.js
 <script type="module">
//1. export 는 반드시 {} 사용 import , n as xxx alias 가능
//2. export 는 default 는 1개만 가능하며 

import {fun , fun2, Person, Person2, n,xxx} from './module/a.js';
import kkk  from './module/b.js';
//import {kkk} from './module/b.js'; //안됨
//import kkk as from './module/b.js';  //안됨
import kkk2 from './module/b2.js';
////////////a.js
console.log("a.js n: ", n);
fun();
fun2();
var p = new Person();
p.info();
var p2 = new Person2();
console.log(xxx());
////////////////
//b.js
console.log('============= b.js');
console.log(kkk());
///////////
//b2.js
console.log('============= b2.js');
console.log(kkk2.name);

 </script>

a.js

export let n = 100;

export function fun(){
    console.log("./module/fun()");
}
export function fun2(){
    console.log("./module/fun2()");
}
export class Person{
    info(){
        console.log("info()");
    }
}
export class Person2{
    info2(){
        console.log("info2()");
    }
}
export const xxx = ()=>100;

 

 

b.js

const kkk = () => 300;

export default kkk;

//const kkk2=()= 300;
//export var nn= 100;

 

 

b2.js

const kkk2= {name:"홍길동" ,age:20};

export default kkk2;

//const kkk2=()= 300;
//export var nn= 100;

 

 

c.js

export class Person{
    constructor (n){
        this.name=n;
    }
}
export function aaa(){
    console.log("hello");
}
const zzz = () => 'c.zzz';
export default zzz;

 

 

d.js

export default function bbb(){
    console.log("d.bbb()");
}

 

 

e.js

export const yyy = 'e.yyy';

 

 

 

'Daily Codig Reminder' 카테고리의 다른 글

v-if /v-for/ v-on event  (0) 2024.03.13
vue  (0) 2024.03.13
ECMA  (1) 2024.03.12
thymeleaf, external_img  (0) 2024.03.12
redirect,thymeleaf  (0) 2024.03.12