Frontend/JavaScript

[JavaScript]클래슀 μžλ£Œν˜•κ³Ό 객체(+ in μ—°μ‚°μž, withꡬ문)

sukii 2024. 1. 4. 20:42
λ°˜μ‘ν˜•

πŸ€”ν΄λž˜μŠ€ μžλ£Œν˜•κ³Ό 객체

ES6μ—μ„œλŠ” class ν‚€μ›Œλ“œλ‘œ 클래슀 μžλ£Œν˜•μ„ μž‘μ„±ν•˜μ—¬ 객체 생성 κ°€λŠ₯ - λ‚΄λΆ€μ μœΌλ‘œ 클래슀 ν•¨μˆ˜(ν”„λ‘œν† νƒ€μž…)둜 처리

 

μ‹€μŠ΅μ˜ˆμ œ

Human 클래슀 μž‘μ„±

class Human {

//constructor ν‚€μ›Œλ“œλ‘œ μƒμ„±μž ν•¨μˆ˜ μž‘μ„±

      constructor(num) {

//this ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•œ λ³€μˆ˜μ— λ§€κ°œλ³€μˆ˜λ‘œ 전달받은 κ°’ μ €μž₯ - ν”„λ‘œνΌν‹°

       this.num=num;

      }

}

 

 

extends ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ λΆ€λͺ¨ν΄λž˜μŠ€λ₯Ό 상속받아 μžμ‹ν΄λž˜μŠ€ μž‘μ„± κ°€λŠ₯

=> λΆ€λͺ¨ν΄λž˜μŠ€μ˜ ν”„λ‘œνΌν‹°μ™€ λ©”μ†Œλ“œλ₯Ό 상속받아 μ‚¬μš© κ°€λŠ₯

class Student extends Human {

     constructor(num, name, address) {

       //super : λΆ€λͺ¨ν΄λž˜μŠ€μ˜ 객체의 μ°Έμ‘°ν•˜κΈ° μœ„ν•œ ν‚€μ›Œλ“œ

       //super ν‚€μ›Œλ“œλ‘œ λΆ€λͺ¨ν΄λž˜μŠ€μ˜ μƒμ„±μž ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ—¬ λΆ€λͺ¨ν΄λž˜μŠ€μ˜ 객체 생성

       super(num);

       this.name=name;

       this.address=address;

        }

 

     //λ©”μ†Œλ“œ μ„ μ–Έ - function ν‚€μ›Œλ“œ 없이 ν•¨μˆ˜ μž‘μ„±

     // => 객체와 상관없이 클래슀 μžλ£Œν˜•μ— ν•˜λ‚˜λ§Œ μƒμ„±λ˜μ–΄ μ‚¬μš©

     display() {

       alert("ν•™λ²ˆ = "+this.num+", 이름 = "+this.name+", μ£Όμ†Œ = "+this.address);

     }

 

     setValue(num, name, address) {

       this.num=num;

       this.name=name;

       this.address=address;

     } 

}

 

new μ—°μ‚°μžλ‘œ 클래슀의 μƒμ„±μž ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ—¬ 객체 생성

=> μƒμ„±μž ν•¨μˆ˜λŠ” 클래슀의 μ΄λ¦„μœΌλ‘œ 호좜

let student=new Student(1000, "홍길동", "μ„œμšΈμ‹œ 강남ꡬ");

alert("클래슀의 μžλ£Œν˜• = "+typeof(Student));//클래슀의 μžλ£Œν˜• = function

alert("λ³€μˆ˜μ˜ μžλ£Œν˜• = "+typeof(student));//λ³€μˆ˜μ˜ μžλ£Œν˜• = object

 

//setValue λ©”μ†Œλ“œλ₯Ό ν˜ΈμΆœν•˜μ—¬, 값을 λ³€κ²½ν•  수 있음

student.setValue(2000, "μž„κΊ½μ •", "μ„œμšΈμ‹œ μ’…λ‘œκ΅¬");

student.display();

student.display() 의 결과

 

 

객체의 μš”μ†Œ(ν”„λ‘œνΌν‹° λ˜λŠ” λ©”μ†Œλ“œ)λŠ” . μ—°μ‚°μžλ₯Ό μ‚¬μš©ν•˜μ—¬ μ ‘κ·Ό κ°€λŠ₯함.

alert("ν•™λ²ˆ = "+student.num+", 이름 = "+student.name+", μ£Όμ†Œ = "+student.address);

student.display();

 

객체의 μš”μ†Œ(ν”„λ‘œνΌν‹° λ˜λŠ” λ©”μ†Œλ“œ)λŠ” [ ] μ—°μ‚°μžλ₯Ό μ‚¬μš©ν•˜μ—¬λ„ μ ‘κ·Ό κ°€λŠ₯함.

alert("ν•™λ²ˆ = "+student["num"]+", 이름 = "+student["name"]+", μ£Όμ†Œ = "+student["address"]);

student["display"]();

 

=> κ²°κ³ΌλŠ” λ‹Ήμ—°νžˆ μœ„μ˜ student.display(); 결과와 κ°™μŒ.

 

 

μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” μƒμ„±λœ 객체에 ν”„λ‘œνΌν‹° λ˜λŠ” λ©”μ†Œλ“œλ₯Ό μΆ”κ°€, λ³€κ²½, μ‚­μ œ κ°€λŠ₯

student.phone="010-1234-5678";//객체에 ν”„λ‘œνΌν‹° μΆ”κ°€

 

//객체에 μ €μž₯된 λ©”μ†Œλ“œ λ³€κ²½ 처리

student.display=function() {

alert("ν•™λ²ˆ = "+this.num+", 이름 = "+this.name+", μ£Όμ†Œ = "+this.address+", μ „ν™”λ²ˆν˜Έ = "+this.phone);

}

 

student.display();

μ „ν™”λ²ˆν˜ΈκΉŒμ§€ 좔가됨

 

μ‚­μ œλŠ”..

//delete(κ°μ²΄μš”μ†Œ) : 객체에 μ €μž₯된 ν”„λ‘œνΌν‹° λ˜λŠ” λ©”μ†Œλ“œλ₯Ό μ œκ±°ν•˜λŠ” ν•¨μˆ˜

delete(student.phone);//객체의 ν”„λ‘œνΌν‹° μ‚­μ œ

 

//객체의 μš”μ†Œκ°€ μ•„λ‹Œ 경우 [undefined] μžλ£Œν˜•μœΌλ‘œ 처리

student.display();

 

 

+in μ—°μ‚°μž : 객체의 ν”„λ‘œνΌν‹° λ˜λŠ” λ©”μ†Œλ“œκ°€ μ•„λ‹Œ 경우 [false]λ₯Ό μ œκ³΅ν•˜κ³  객체의 ν”„λ‘œνΌν‹° λ˜λŠ” λ©”μ†Œλ“œμΈ 경우 [true]λ₯Ό 제곡

ν˜•μ‹) "μš”μ†Œμ΄λ¦„" in κ°μ²΄λ³€μˆ˜λͺ…

alert("num" in student);//true

alert("name" in student);//true

alert("phone" in student);//false

 

 

for ꡬ문을 μ‚¬μš©ν•˜μ—¬ 객체의 μš”μ†Œ(ν”„λ‘œνΌν‹° λ˜λŠ” λ©”μ†Œλ“œ)의 이름을 μ°¨λ‘€λŒ€λ‘œ μ œκ³΅λ°›μ•„ λ³€μˆ˜μ— μ €μž₯ν•˜μ—¬ μΌκ΄„μ²˜λ¦¬ κ°€λŠ₯

ν˜•μ‹) for(λ³€μˆ˜λͺ… in κ°μ²΄λ³€μˆ˜λͺ…) { λͺ…λ Ή; λͺ…λ Ή; ... }

for(variable in student) {

  alert(variable);//=>num,name,address둜 좜λ ₯됨

 

  alert(student.variable);//undefined

λ³€μˆ˜μ— μ €μž₯된 μš”μ†Œλͺ…μœΌλ‘œ 객체의 μš”μ†Œμ— μ ‘κ·Όν•˜κΈ° μœ„ν•΄ [] μ—°μ‚°μž μ‚¬μš©

  alert(student[variable]); // =>2000, μž„κΊ½μ •, μ„œμšΈμ‹œ μ’…λ‘œκ΅¬ κ°€ μ°¨λ‘€λŒ€λ‘œ 경고창에 뜸

 

+with ꡬ문을 μ‚¬μš©ν•˜μ—¬ λΈ”λŸ­ λ‚΄λΆ€μ—μ„œ 객체의 μš”μ†Œλ₯Ό λ³€μˆ˜μ²˜λŸΌ μ‚¬μš©ν•  수 μžˆλŠ” κΈ°λŠ₯ 제곡

ν˜•μ‹) with(κ°μ²΄λ³€μˆ˜λͺ…) { λͺ…λ Ή; λͺ…λ Ή; ... }

with(student) {

alert("ν•™λ²ˆ = "+num+", 이름 = "+name+", μ£Όμ†Œ = "+address);

}

 

=> withꡬ문 μ•ˆμ—μ„œλŠ”  student.num μ΄λŸ°μ‹μœΌλ‘œ μ‚¬μš©ν•˜μ§€ μ•Šκ³ , λ°”λ‘œ num만 써도 μ•„λž˜μ™€ 같이 싀행됨

 

λ°˜μ‘ν˜•