ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [JS] chapter15. 객체 μ§€ν–₯ - ν΄λž˜μŠ€μ™€ μΈμŠ€ν„΄μŠ€
    codeStates front-end/Java Script 2023. 1. 13. 11:05
    λ°˜μ‘ν˜•

     

     

     

     

     

     

     

     

    πŸ“Œ ν΄λž˜μŠ€μ™€ μΈμŠ€ν„΄μŠ€

     

     

    🧷 객체 μ§€ν–₯ ν”„λ‘œκ·Έλž˜λ°

     

    ν•˜λ‚˜μ˜ λͺ¨λΈμ΄ λ˜λŠ” 청사진을 λ§Œλ“€κ³  κ·Έ 청사진을 λ°”νƒ•μœΌλ‘œ ν•œ 객체λ₯Ό λ§Œλ“œλŠ” ν”„λ‘œκ·Έλž˜λ° νŒ¨ν„΄

    청사진 - class

    객체 - instance

     

     

    class - λŒ€λ¬Έμžλ‘œ μ‹œμž‘ν•˜λ©° 일반λͺ…μ‚¬λ‘œ λ§Œλ“ λ‹€

                속성과 λ©”μ†Œλ“œλ₯Ό μ •μ˜

     

    function Car(color) {}
    
    // ν΄λž˜μŠ€λŠ” ν•¨μˆ˜ μ •μ˜ κ°€λŠ₯
    // ES6μ—μ„œλŠ” class λΌλŠ” ν‚€μ›Œλ“œλ₯Ό μ΄μš©ν•΄ μ •μ˜ κ°€λŠ₯
    
    class Car {
    	constructor(brand, name, color)
        // μΈμŠ€ν„΄μŠ€κ°€ λ§Œλ“€μ–΄μ§ˆ λ•Œ μ‹€ν–‰λ˜λŠ” μ½”λ“œ
    }

     

    instance - ν΄λ ˆμŠ€μ—μ„œ μ •μ˜ν•œ 속성과 λ©”μ†Œλ“œλ₯Ό 이용

     

    let avante = new Car('blue') // 각각의 μΈμŠ€ν„΄μŠ€λŠ” CarλΌλŠ” 클래슀의 κ³ μœ ν•œ 속성과 λ©”μ†Œλ“œλ₯Ό κ°–λŠ”λ‹€
    let mini = new Car('cyan')
    let beetles = new Car('red')

     

     

    속성과 λ©”μ†Œλ“œμ˜ μ •μ˜

     

    // μ†μ„±μ˜ μ •μ˜
    
    function Car(brand, name, color) {
    	this.brand = brand;
        this.name = name;
        this.color = color;
    }
    
    //ES6 문법
    
    class Car{
    	constructor(brand, name, color) {
        	this.brand = brand;
            this.name = name;
            this.color = color;
        }
    }
    
    // λ©”μ†Œλ“œμ˜ μ •μ˜
    
    function Car(brand, name, color) {
    	Car.prototype.refuel = function() {
        	// μ—°λ£Œ 곡급을 κ΅¬ν˜„ν•˜λŠ” μ½”λ“œ
        }
        Car.prototype.drive = function() {
        	// μš΄μ „μ„ κ΅¬ν˜„ν•˜λŠ” μ½”λ“œ
        }
    }
    
    //ES6 문법
    
    class Car{
    	constructor(brand, name, color) {
        	refuel() {
            }
            drive() {
            }
        }
    }

     

    μΈμŠ€ν„΄μŠ€μ—μ„œμ˜ μ‚¬μš©

     

    let avante = new Car('hyundai','avante','black');
    avante.color; // 'black'
    avante.drive(); // μ•„λ°˜λ–Όκ°€ μš΄μ „μ„ μ‹œμž‘
    
    let mini = new Car('bmw','mini','white');
    mini.brand; // 'bmw'
    mini.refuel(); // λ―Έλ‹ˆμ— μ—°λ£Œλ₯Ό 곡급함

     

     

    πŸ’‘ μ•Œμ•„λ‘μ–΄μ•Ό ν•˜λŠ” μš©μ–΄

     

    prototype : λͺ¨λΈμ˜ 청사진을 λ§Œλ“€ λ•Œ μ“°λŠ” μ›ν˜• 객체

    constructor : μΈμŠ€ν„΄μŠ€κ°€ μ΄ˆκΈ°ν™”λ  λ•Œ μ‹€ν–‰ν•˜λŠ” μƒμ„±μž ν•¨μˆ˜

    this : ν•¨μˆ˜κ°€ 싀행될 λ•Œ, ν•΄λ‹Ή λ²”μœ„λ§ˆλ‹€ μƒμ„±λ˜λŠ” κ³ μœ ν•œ μ‹€ν–‰ context

     

     

    🧐 ν΄λž˜μŠ€λ‘œλΆ€ν„° μΈμŠ€ν„΄μŠ€λ₯Ό λ§Œλ“€ λ•Œ μ–΄λ–€ ν‚€μ›Œλ“œλ₯Ό 써야 ν•˜λŠ”μ§€ κ³ λ₯΄μ„Έμš”.

     

    answer : new

    λ°˜μ‘ν˜•

    λŒ“κΈ€

Designed by Tistory.