ECMA
2024. 3. 13. 16:59ㆍDaily 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>
상속시 생성자 고려할 점
- 자식 클래스와 부모 클래스 양쪽 constructor를 작성하지 않아도 인스턴스 생성된다. ( default constructor 사용 )
- 부모 클래스에만 constructor를 작성하면, 자식 클래스의 ‘default 생성자’가 호출되고 부모 클래스의 constructor가 호출된다.
- 자식 클래스에만 constructor를 작성하면 자식 클래스의 constructor가 호출되고 반드시 부모 constructor를 명시적으로 호출해야 된다.
- 자식과 부모 클래스 양쪽 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 에서 사용할 수 있도록 제공
- 일반 export (여러개를 export 가능)
- export default (한 js 파일안에서 한번만 사용가능
b.js
- import default이름 from a.js
- 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 |